WebP and AVIF: why modern images make websites faster
Photos are usually the heaviest part of a small-business website. Modern formats like WebP and AVIF make them much smaller with no visible loss in quality. Here's what they are and why they matter.
Here's something that surprises many business owners: on most small-business websites, the photos take up far more space than everything else put together. The text, the design and the code are light. A single photo straight from a phone or camera can be heavier than all of them.
That's why images are usually the first thing to fix when a website is slow. And it's why modern image formats, called WebP and AVIF, make such a difference. This post explains them in plain language.
A quick word on image formats
Every image on a website is saved in a format, a way of storing the picture as data. You've probably seen some of these at the end of file names:
- JPG (or JPEG): the classic format for photos, used for decades
- PNG: good for logos and graphics, but often very large for photos
- WebP: a newer format developed by Google, much smaller for the same quality
- AVIF: an even newer format, often smaller still
The picture looks the same to a visitor. What changes is how much data their phone has to download to show it.
Why smaller images matter
Faster pages
Smaller images arrive faster, so pages appear sooner. This directly improves the main loading measure in Core Web Vitals, and the Performance score in Lighthouse.
Less mobile data
Many customers browse on mobile data, sometimes with a weak signal. Lighter pages load more reliably and use less of their data.
Better for customers, better for Google
Faster pages keep visitors from giving up, and page speed is part of what Google considers. See how a slow website quietly loses customers.
How much smaller?
It depends on the photo, but modern formats are often a tenth of the size of the original file, with no visible loss in quality. A photo that would take several seconds to load on a slow connection can appear almost instantly.
Size matters as much as format
A photo from a modern phone is often several thousand pixels wide. A phone screen shows a few hundred. Sending the full-size photo wastes most of it.
A well-built website prepares several sizes of each image and sends the right one: a small version to a phone, a larger one to a big computer screen. Combined with WebP or AVIF, this is where the dramatic savings come from.
What about logos and icons?
Photos benefit most from WebP and AVIF. Logos, icons and simple graphics are often better as SVG, a format that describes shapes rather than pixels. SVG files are tiny, stay perfectly sharp at any size and can be recoloured easily. If your website shows a blurry logo, it may simply be a small photo-style file stretched too large.
Do all browsers support them?
Modern versions of the major browsers, including Chrome, Safari, Firefox and Edge, support WebP, and AVIF is widely supported too. Well-built websites handle the rare exception automatically, by offering a fallback to older browsers. Visitors never need to do anything.
Other image habits that help
- Lazy loading: images further down the page load only as the visitor scrolls towards them, so the top of the page appears faster
- Reserved space: each image has its space set aside before it loads, so the page doesn't jump around
- Blurred previews: a tiny, blurred version appears instantly while the full image loads, so there's never an empty box
- Good photos to begin with: compression can't fix a dark, blurry photo. See why real photos beat stock photos.
How to check your own website
Run your site through PageSpeed Insights. If you see suggestions like “Serve images in modern formats” or “Properly size images”, your photos are probably slowing your site down. These are usually among the easiest and most effective fixes.
If you use WordPress or Shopify
Many WordPress plugins and Shopify itself can convert and resize images automatically. On WordPress, check that it's actually switched on and working, and that very large original photos aren't still being sent to phones.
Uploading photos yourself
If you add photos to your own website, a few simple habits help:
- Don't upload photos straight from your camera at full size if your website doesn't resize them automatically
- Crop photos to show what matters before uploading
- Use clear, simple file names, like sweet-shop-counter.jpg, rather than IMG_4821.jpg
- Add a short description (alt text) for each image, for accessibility and search. See website accessibility.
How we handle images
Every website we build serves images in modern formats, WebP and AVIF, at the right size for each screen, with space reserved and a blurred preview while they load. Our own site does the same. It's one of the reasons our sites are tuned to score 90+ on Lighthouse. See how we build.
In short
- Photos are usually the heaviest part of a website, so they're usually the first thing to fix.
- WebP and AVIF are modern formats, often a tenth of the size with no visible loss in quality.
- Serve the right size for each screen, reserve space for images and load them as visitors scroll.
