Thumbnail sizes

What's the done thing these days with thumbnail sizes? How do you make the trade-off between serving images that are small enough to load quickly, but large enough to look good on ridiculously high resolution phones?

Currently, all of the DNA Lounge flyers are encoded at 1920px along the long edge, with thumbnails being 320px wide. Those smaller thumbs are what show up on the flyer index pages and on the calendar pages.

I picked that number 320px a long time ago, before the prevalence of desktop retina displays and the mobile resolution explosion, so it's probably no longer an ideal choice.

For an image to look sharp, you want to give the browser an image that is at least as large as it will be rendered on the screen in real hardware pixels, and those numbers are enormous these days. For example:

An iPhone 13 Pro Max has a 428x746 pixel viewport, but hardware pixels are 3x, so that's really 1284x2238. An iPhone 8 is 375x548 2x = 750x1096. And even my lowly 2013 iPad Pro is 1118×1232 2x = 2236×2464. On the calendar page it displays the flyer thumb desktop-style at 33% width, though, so it would only need a thumb that was.... 745px wide.

So I could just throw up my hands and serve the full-sized image all the time. But there's that pesky trade-off between quality and bandwidth. I would still like these pages to load fast over slow connections! Shitty wifi is still a concern! For that Halloween flyer, the big image is 573 KB and the small one is only 57 KB.

So what's the done thing?

(Don't say jQuery.)

BTW, a while back I made a page for testing img srcsets to see what sizes are actually getting loaded on what devices and to help figure out why, which is informative when thinking about this stuff.


Tags: , , , ,

Deep Nightmares


Previously, previously, previously, previously, previously, previously, previously, previously.

Tags: , , , , , , ,

  • Previously