Article
Image Optimisation for Faster Websites: WebP, AVIF and Lazy Loading
On most small business websites, images make up the largest share of page weight. A single unoptimised photo straight from a modern phone or camera can be several megabytes, larger than the rest of the page combined. On mobile networks, that means slow pages and impatient visitors.
Image optimisation is one of the highest-impact, lowest-effort performance improvements available. This guide covers the techniques junior developers should use by default and business owners should ask for.
Resize Before Anything Else
The biggest win is serving images at the size they are displayed. A photo shown at 800 pixels wide does not need to be 4000 pixels wide. Resize images to a sensible maximum for their layout position, with a larger version only for high-density screens.
Many content management systems generate multiple sizes automatically when you upload an image. Check that your theme actually uses the right size, rather than loading the full original and shrinking it in the browser.
For business owners uploading photos themselves, a simple rule helps: resize photos before uploading, or ask your developer to set automatic limits so huge files are reduced on upload. Our design-focused post on image compression for owners who upload from WhatsApp has non-technical tips.
Choose Modern Formats
- WebP: widely supported in modern browsers, typically much smaller than JPEG or PNG at similar quality.
- AVIF: often even smaller than WebP, with growing browser support, though encoding can be slower.
- JPEG: still fine as a fallback for photos.
- PNG: useful for graphics needing transparency, but often too heavy for photos.
- SVG: ideal for logos and icons, scalable and tiny.
Use the HTML picture element to offer modern formats with a fallback, or rely on an image CDN or plugin that serves the best format each browser supports.
Compression level matters as much as format. Test a few quality settings on typical photos and pick the lowest setting where the difference is not noticeable on a phone screen. Product photos usually tolerate stronger compression than you might expect.
Responsive Images With srcset and sizes
Different devices need different image sizes. The srcset and sizes attributes let the browser choose the most appropriate file for the screen width and pixel density. A phone downloads a smaller image, while a large desktop screen gets a sharper one.
Getting sizes right matters. If sizes is missing or wrong, browsers may download larger images than needed. Test by checking which file is actually loaded in browser developer tools at different screen widths.
Tip: always set width and height attributes on images. This lets the browser reserve space and prevents layout shift while images load.
Background images set in CSS do not benefit from srcset in the same way. For important visuals, consider using a real image element so the browser can choose sizes and you can control loading priority.
Lazy Loading the Right Images
Lazy loading delays loading images until they are about to scroll into view. Modern browsers support it natively with the loading="lazy" attribute. This saves data and speeds up the initial page load, especially on long pages with many images.
- Lazy-load images below the fold, such as gallery items and blog images further down.
- Do not lazy-load the hero image or main product image at the top; it delays the most important content.
- Consider fetchpriority="high" for the main above-the-fold image.
- Test that lazy-loaded images still appear correctly when scrolling quickly.
These choices directly affect Largest Contentful Paint; see Core Web Vitals explained.
Automate It So It Stays Fixed
Manual optimisation fails as soon as someone uploads a new banner. Build optimisation into the workflow: automatic resizing and format conversion in the CMS, an image CDN, or a build step for static sites. Set maximum upload sizes and compression levels as defaults.
Add descriptive alt text too. It helps visitors using screen readers, appears when images fail to load and gives search engines context. Write what the image shows, not keyword lists.
Finally, audit image weight periodically. Sort pages by size in a performance tool and look for any images above your agreed budget. A few minutes each month keeps the site fast as content grows.
FAQ
Will WebP reduce image quality?
At sensible compression settings, the difference is usually not visible, while file sizes drop significantly.
Is lazy loading bad for SEO?
Native lazy loading is supported by search engines. Just avoid lazy-loading important above-the-fold images.
Should I use an image CDN?
For image-heavy sites such as ecommerce, an image CDN that resizes and converts automatically can save a lot of effort.
Image optimisation is the easiest way to make most websites faster. Resize to display size, serve modern formats, use srcset and sizes, lazy-load below the fold, set dimensions and automate the process so it stays optimised.