When we audit a slow website, images are the first thing we check, and they're the problem far more often than not. Last week we looked at a restaurant's site where the homepage hero image was a 6.8 MB photo straight from a DSLR. On a phone, it was displayed at about 400 pixels wide.
Fixing images is the cheapest performance win there is. Here's how we approach it.
The formats, in plain language
JPEG is the old reliable. Works everywhere, good for photos, but files are larger than they need to be.
PNG is for graphics with sharp edges or transparency, like logos and icons. Terrible for photos, which come out huge.
WebP is supported by every modern browser and is usually 25 to 35 percent smaller than an equivalent JPEG. It handles transparency too, so it can replace PNG in many cases.
AVIF is newer and usually smaller again, sometimes by half compared to JPEG at similar quality. Browser support is now very good across Chrome, Firefox and Safari. Encoding takes longer, which matters if you're converting thousands of images.
SVG is for logos, icons and simple illustrations. It's code rather than pixels, so it stays sharp at any size and is often tiny.
What we actually use
For most client sites in 2025:
- Photos: AVIF with WebP fallback, or just WebP if the workflow is simpler.
- Logos and icons: SVG.
- Screenshots with text: WebP or PNG, depending on how it looks.
The HTML <picture> element lets you offer several formats and the browser picks the best one it supports.
Size matters more than format
Format is only half the story. An AVIF file that's 3000 pixels wide is still too big for a 400-pixel slot on a phone. Use the srcset and sizes attributes so the browser downloads an image that matches the screen. A typical setup has three or four sizes of each image, say 480, 800, 1200 and 1600 pixels wide.
Don't forget the basics
- Always set width and height on images, or use CSS
aspect-ratio. This stops the page jumping around as images load, which helps your Cumulative Layout Shift score. - Lazy load images below the fold with
loading="lazy". But never lazy load the main hero image, because that delays your Largest Contentful Paint. - Write useful alt text. Describe what's in the image for people using screen readers. "Team meeting in our Ahmedabad office" is better than "image1".
- Compress sensibly. Quality settings around 75 to 82 for photos are usually indistinguishable from the original.
Tools that make it easy
If you're on WordPress, a good image optimisation plugin will handle conversion and resizing automatically. For custom sites, we usually process images on upload so editors don't have to think about it. For one-off conversions, free tools like Squoosh in the browser work well.
The result
On that restaurant site, converting and resizing the images took the homepage from 9.4 MB to just under 900 KB. Load time on 4G went from about eleven seconds to under three. Same photos, same design. Customers just stopped waiting.
