search

svsticky / chroma

Manage photo albums on S3 buckets. Successor to Pxl and Rstr
1 stars 1 forks source link

Generate thumbnails #4

Closed Riscky closed 10 months ago

Riscky commented 1 year ago

chromas predecessor, pxl, generates thumbnails for each uploaded picture, in two sizes:

These different sizes are used in different locations on the photo website:

I think chroma should also support thumbnails at some point, as this makes loading the website a lot quicker, especially when there are lots of pictures in the viewport. Since we already have thumbnails in sizes w400 and w1600 in pxl, which we want to migrate over to chroma , we might as well use the same sizes in chroma.

I'm not sure if this is a requirement to start using chroma in production, but it might very well be if it turns out to be too slow. With 12 original sized pictures in the viewport, a client has to load about 24 Mb on each pageview, and there is no CDN that can make that feel fast.

Note that we can go three ways here: generating thumbnails on upload, generating thumbnails on request, and generating thumbnails as a background- or recurring job. I think the last option is the best, as this means uploads and downloads will be quick.

TobiasDeBruijn commented 10 months ago

3afb969 addresses this issue server, while not a full background job, the other qualities get created asynchronously on upload. I.e., the user does not have to wait for them to be generated.

All thats left to do, I think, is adding support for the other qualities in the web application.

SilasPeters commented 10 months ago

With 12 original sized pictures in the viewport, a client has to load about 24 Mb on each pageview [...]

I am not quite aware to what extend this issue/feature has been addressed and implemented. However, I would just like to add that this estimation is quite optimistic, as with some (perhaps luxurious) camera settings, a single picture itself can be 24 Mb already. This feature might be more needed than expected.

TobiasDeBruijn commented 10 months ago

I've now fully implemented it in the frontend too. Using the four supermentor images from this year's Intro site, yields the following results:

Note the ~, the requests do not include only the pictures, also some metadata (but most if it is pictures).