Should upload images be resized?

Kinopio Design
1

Right now when you upload an image, it 's fully uploaded as is. In some cases like .heic file support, it’ll make sense to convert the uploaded file into a normal image format (eg jpg or webp). During that step it might also make sense to resize the image if it’s really big. i.e. it’s coming straight from the iphone camera roll.

Because too many large size images on a page impact page performance, should we also resize giant regular size images too? Like a really large jpg or tiff file.

The downside of resizing is that you might have a scenario where you want to upload an image to kinopio to host it for use on another, like on your blog. Mysterious resizing might compromise that.

Here’s the most elegant way I can see this working:

  • user uploads FILEX.jpg,
  • kinopio-server uploads the original file to CDN_HOST/FILEX.jpg.
  • if the file is really big, the server resizes the image (and convert from heic if needed) and uploads it to CDN_HOST/FILEX-small.jpg

After the upload is complete:

  • if the file was resized/converted, the server tells the client to use -small url in the card
  • otherwise the normal url is sent back as it is right now

With this scheme, experienced users know (or can guess) that if they can remove the -small from the name they’ll be able to reference the original upload wherever.

Some outstanding questions:
how big is too big (i.e. what should the size cut-off be before resizing)? should it be based on file size, or image dimensions?

(cc @lucas)

2 Likes
2

the other additional bit of logic that could be added is that if the card width or height exceeds a certain amount it switches from using the -small version to the original version

re Discord

1 Like
3

File storage freaks me out a bit. I feel a little guilty uploading images, knowing that the weight of their size will only ever accrue over time…

It feels a little wrong, to link out an image. Will the link be cleaned up at some point? I’d appreciate an understanding of your policy there in general. Am I responsible for not hosting too many big files through kinopio? How many is too many?

Sorry to answer your questions with only more questions :wink:

Your solution sounds good; the simple text renaming scheme is nice and readable.

Sometimes when I upload an image for a background, it’s larger than I expected. If possible I’d appreciate, especially when an image is very large (like an iPhone photo), some kind of dialog that says “Hey! This is very large! What size do you want to resize it to?” with some kind of reasonable default. It wouldn’t be the end of the world for this to happen automatically without my involvement, but sometimes I would prefer to be involved in that process.

Sometimes I need to reupload an image and I wonder: What happens to the old image? Does it live on your file servers forever, linkless, haunting the internet? Is there a way I can clean up after myself?

For background images, I’m not sure if there is any size that I can imagine being ‘too big’, so if anything it would be file size based for your server costs.

For non-background images, I would definitely expect anything larger than my current screen dimensions to be resized to a ‘-small’ version.

4

i wouldn’t feel too guilty, space is cheap: 1tb costs me 5$ a month and there’s a cap of 1gb per file for paid users (5mb for unpaid).

Will the link be cleaned up at some point?

No the links only are cleaned up if you remove the space and then permanently remove it (sidebar → remove)

policy there in general

upload whatever files you need for working on your space , or images you want to host elsewhere. don’t upload your harddrive or other multi-gb things.

How many is too many?

There’s no enforced maximum because so far there hasn’t been any need for that.

when I upload an image for a background…

background images might get resized but it’ll be a diff size limit than card images because they’re displayed bigger. The limits will be hardcoded instead of based on device size because other ppl on other devices will view your space, or you might use a diff computer. And also because there are scenarios where you want the background image to be larger than your screen.

I suspect this will be automatic and not have an interface to keep user friction low and the code in scope.

Sometimes I need to reupload an image and I wonder: What happens to the old image?

the image urls are scoped to the card id so if you upload the same image in another card it’ll be uniquely uploaded. if you remove the image from a card and upload an image with the same filename onto the same card then it’ll overwrite the old one.

Is there a way I can clean up after myself?

permanently removing spaces you don’t use should do this, but there’s no real need to do this for most ppl

background images, I’m not sure if there is any size that I can imagine being ‘too big’, so if anything it would be file size based for your server costs

from my pov the main consideration is loading time. if you have a space bk that’s 3mb, then you on other machines or visitors to your space have to dl that 3mb file. large files may also cause scrolling perf issues.

1 Like
5

somewhat related:
when a user uploads a wav (or flac) file we should convert it to mp3 so it can be streamed

3 Likes
6

Also, M4A audio into MP3

3 Likes
7

I started to sketch out a possible media upload pipeline here.

The rough idea is that after a file got uploaded to Kinopio it gets converted into a more compatible file with a reasonable compression level.

For images, that would be JPEG or WebP, for videos MP4 and MP3 for audio.

As Pirijan pointed out, it would be preferable to still have access to the original uploaded file in case Kinopio is used as a file storage. I am not yet sure how to execute this because Kinopio uses the URL to a file as the card name. Maybe it’s possible to store URLs of processed files somewhere inside the card model, so users would by default see the optimized version of a file, but still have the option to download the original version.

2 Likes
8

I am not yet sure how to execute this because Kinopio uses the URL to a file as the card name. Maybe it’s possible to store URLs of processed files somewhere inside the card model, so users would by default see the optimized version of a file, but still have the option to download the original version.

at first I was thinking that we could change the card name (like append a -small) to resized images, but that wouldn’t work as well for file type conversions. So ya I’m in favor of adding a new card attribute STR card.urlDownloadFile that’ll contain the original url. And the preview area inside CardDetails can be updated to give access to that url.

I’ll add this suggestion to the space too

2 Likes
9

another space that got slow in safari bc the user uploaded many 2mb images and 7-10mb gifs: Kinopio – Thinking Canvas

1 Like