sizing images

I’m currently in the midst of building a site for my band, the Astronauts.

Band websites seem to be very image-heavy, and ours is no exception. We’ve got a hero image, background images, album art images, show photos… the list goes on.

With the site mostly done, I decided to try and optimize. I ran my site through Lighthouse.

And oh. My. God.

Performance was abysmal, in the 50% range (sometimes even dipping into the 40s 🤮). Google kept complaining that my images were not sized properly: by this, they mean that a rendered image must be within 4kiB of its actual size.

Another complaint I kept seeing from Lighthouse was “images don’t have explicit height and width”, or something to that effect.

It turns out, Google wasn’t complaining for nothing: I was loading huge images, only to display them as thumbnails. So, my first step was to figure out what the max dimensions of my thumbnails were (and I found they never got bigger than 640px). Next, I would have to do a bit of extra work: process the thumbnails, add a column in the database for the thumbnail files (I don’t have a CDN 😭) Then, I set height=640 and width=640 on my img tags.

With this, Lighthouse is markedly happier. I get 83% on mobile and 99% on desktop (though it seems to fluctuate a fair bit). It’s still unhappy that I’m not using “next-gen” image formats (I’m using .mozjpeg and not .webp, get off my case)

I’ve learnt a couple of things:

• Working with images is tedious and rough
• Image sizes really don’t need to be that big. 300kb is plenty for a thumbnail (some go all the way down to 60kb and look totally fine!). Compressed images only need to be a few hundred kb and still look good expanded
• I could really do with a CDN

Also, I need to look into srcset at some point, but that’s a problem for another day.