Images are the single largest contributor to page weight on most websites. According to HTTP Archive data, they account for roughly 50% of the average page's total byte size — and on e-commerce or photography sites, that share is even higher. Every unnecessary kilobyte slows your page, hurts your search rankings, and drives visitors away. The good news is that image optimisation is one of the highest-return improvements you can make, and most of it costs nothing but a few minutes.
Format choice is the single most impactful decision in image optimisation. Use WebP for almost everything on the web. WebP produces files 25–35% smaller than equivalent JPG at the same visual quality, and it supports transparency like PNG. All modern browsers support it. If your visitors use modern browsers — which is the overwhelming majority of web traffic — WebP should be your default for every web image.
Use JPG for photographs when WebP is not an option. Use PNG only when you genuinely need transparency or pixel-perfect accuracy — logos, icons, screenshots. Never use PNG for photographs; the files are unnecessarily large with no visible quality benefit. Avoid GIF for anything other than short animations, and even then, consider whether a short looping MP4 video would serve the purpose at a fraction of the file size.
There is no benefit to serving a 4000 × 3000 px image when it will be displayed at 800 × 600 px on a page. The browser downloads the full file, then discards the extra pixels as it scales the image down for display. You are forcing every visitor to download data that will be thrown away.
Before compressing, resize each image to its intended display size — or at most twice the display size for sharp rendering on Retina screens. This step alone can reduce file sizes by 80–90% for photos taken on modern smartphones. Check your CSS or your CMS to find out the actual display dimensions for each image placement on your site, and resize accordingly.
The correct order is always: resize first, then compress. Resizing reduces pixel count; compression reduces the data per pixel. Do both and the savings multiply.
Once your image is the right format and dimensions, compress it. The goal is the lowest quality setting at which the image still looks acceptable at its display size. Start at 80% quality for JPG or WebP, compare the before and after at the actual display size — not zoomed in — and only go lower if you genuinely need a smaller file. Artifacts that look severe when zoomed are often invisible at normal viewing size. For most web images, 75–80% quality produces files that are 60–80% smaller than the original with no visible difference.
Image optimisation for SEO is not just about file size. Search engines use file names and alt text to understand what images show. Rename files descriptively before uploading — red-ceramic-coffee-mug.webp signals content clearly; IMG_4872.jpg signals nothing. Write meaningful alt text for every image: alt="Red ceramic coffee mug on white marble surface" helps both screen readers and search crawlers. Skip the alt attribute only for purely decorative images that add no information.
Lazy loading defers images below the fold until the user scrolls close to them, reducing the amount of data loaded on initial page render. In modern HTML this is a single attribute: loading="lazy". Add it to every image that is not immediately visible on page load. For the first image — the one that affects Largest Contentful Paint, a Core Web Vitals metric — use loading="eager" or omit the attribute entirely so it loads immediately. The lazy attribute alone can shave seconds off perceived load time for long pages.
A visitor on a 390 px mobile screen does not need the same 1440 px image as a visitor on a 27-inch monitor. The srcset attribute lets you provide multiple image versions at different sizes, and the browser automatically picks the most appropriate one. Providing a 400 px, 800 px, and 1600 px version of the same image, combined with a sizes attribute describing the layout, means mobile visitors download a fraction of what desktop visitors download — without you having to detect devices or write any JavaScript.
Images rarely change. Once a visitor has downloaded your logo or hero image, they should not have to download it again on their next visit — it should load instantly from their browser cache. Configure your server or CDN to send long cache lifetimes for image assets. When an image does change, update the file name or add a version parameter to the URL so browsers treat it as a new resource rather than serving the stale cached version.
After optimising, run your pages through Google PageSpeed Insights. The tool flags unoptimised images specifically, gives you estimated savings, and scores your Core Web Vitals — the speed metrics Google uses as a direct ranking signal. Aim to eliminate all image-related warnings before moving on to other performance work. Images are usually the biggest opportunity, and fixing them first makes everything else more effective.