Preparing images properly: size, format and load order
Images are the most common reason a site is slow. There are three things to do before you upload a photo, and each takes a few minutes.
On almost any site, images are the heaviest thing. Text weighs a few kilobytes and images a few megabytes, so this is where speed work pays off most for the least effort.
There are three things to do.
1. Resize to the right dimensions
The photo your phone takes is 4000 pixels wide, but on your site it takes up 1200 pixels at most. The rest is data downloaded for nothing.
Measure the width the image will take up on the site, double it for high-resolution screens and resize to that. For a full-width hero, 2400 pixels is plenty. For an image inside an article, 1400 is plenty.
2. Convert to WebP
JPEG and PNG are old formats. WebP stores the same picture in about 30% less space and every current browser supports it. A 3 MB photo can drop to 120 KB with no visible difference.
You don't need an expensive tool. squoosh.app runs in the browser and is free. The admin panel on this site also converts every uploaded image to WebP automatically.
3. Delay what's off-screen
An image at the bottom of the page shouldn't download until the visitor scrolls down to it. This is called lazy loading and browsers now do it themselves. Adding loading="lazy" to the image is enough.
The one exception is the image you see when the page first opens. Don't delay that one. Load it with priority, because it usually decides your LCP.
Don't skip alt text
Every image needs alt text. Screen readers read it out for blind visitors, it shows in place of the image if the image fails to load, and Google uses it to understand what the picture shows.
Don't write "image1". Write a sentence that describes what's in the picture, like "Handmade leather bag on a wooden counter". For purely decorative images, leave the alt text empty so screen readers skip them.
How much difference does it make?
Last month I fixed only the images on a restaurant site. Fourteen photos went from 18 MB to 900 KB in total, and mobile load time fell from 5.1 seconds to 1.8. I didn't change a single line of code.