Optimising images on the web

Published on May 3, 2022

Optimised image elements

I feel as though images are largely neglected, but there’s a lot of benefits to be had by optimising images. They’re a key factor to page loads and can decrease core web vitals significantly if used correctly.

Firstly, the img element is dead* Not really

While we can use srcset to load different content sources, we can have much more fine grained control using a picture element.

The picture element allows us to configure multiple sources. This will enable us to reference different source images based on media queries.

We do this by creating multiple sources and a single img within picture element. Each source’s media attribute is evaluated, and the first to match true will be used as a source for the picture

		media="(min-width: 800px)"
		srcset="image.webp?w=100 100w, /image.webp?w=200 200w" 
		alt="A way you'd describe this image to someone over the phone"
		srcset="image.jpg?w=100 100w, /image.jpg?w=200 200w"
		sizes="(max-width: 400px), 95vw, 50vw"
		style="width: 100%; aspect-ratio: 1/1"