Images account for more than half of the total data transferred on a typical webpage, and oversized images are the single most common reason a site scores poorly on performance tests. Unlike JavaScript or CSS, which require careful engineering to optimise, image optimisation follows clear rules that apply consistently across almost every website. Get the format, resolution, and compression right and most pages will load noticeably faster for every visitor.
Why web image optimisation matters beyond page speed
Google's Core Web Vitals programme has made page loading speed a direct ranking factor in search results. The Largest Contentful Paint metric, which measures how long it takes for the main visible content of a page to appear, is almost always determined by the hero image or the first large image in the page. An oversized hero image that takes three seconds to load will hurt your LCP score and, by extension, your search ranking.
Beyond SEO, image loading speed directly affects whether visitors stay on a page. Studies consistently show that mobile users abandon pages that take more than two to three seconds to load. Given that more than half of web traffic comes from mobile devices on variable connections, serving appropriately sized images is a basic requirement for keeping visitors engaged.
Data costs are also a real consideration. A visitor on a metered mobile plan who downloads your 8MB homepage of unoptimised photos is being charged for your oversight. Many users in markets with expensive mobile data have trained themselves to close pages that load slowly.
Choosing the right format
The format decision has a larger impact on file size than any compression setting. Getting this right first makes everything else easier.
JPEG is the right format for photographs and any image with continuous colour gradients. JPEG uses lossy compression that achieves excellent file sizes for photographic content because the compression algorithm is designed around how the human visual system processes colour. A correctly compressed JPEG photograph at 80 percent quality is visually indistinguishable from the original in most viewing conditions while being five to ten times smaller than the uncompressed version.
PNG is the right format for screenshots, interface elements, logos, icons, and any image that requires transparency. PNG uses lossless compression that preserves every pixel exactly. For photographic content, PNG produces files that are significantly larger than JPEG with no quality advantage. Using PNG for photographs is one of the most common web image mistakes and can make a single image three to five times larger than necessary.
WebP is a modern format developed by Google that outperforms both JPEG and PNG in most scenarios. For photographs, WebP at equivalent visual quality produces files approximately 25 to 30 percent smaller than JPEG. For graphics and transparent images, WebP produces files comparable to or smaller than PNG. Browser support for WebP is now universal in modern browsers, making it the best default choice for web images in 2026.
AVIF is a newer format that achieves even better compression than WebP, often producing files 40 to 50 percent smaller than JPEG at equivalent quality. Browser support is growing but is not yet universal enough to use as the primary format without a fallback.
Resolution: the most overlooked factor
The resolution of an image determines how many pixels it contains. A 4000 by 3000 pixel photo contains 12 million pixels. When displayed in a 800 pixel wide column on a website, those extra pixels add file size without adding any visual quality, because the browser is scaling the image down anyway.
The goal is to match the displayed size of the image as closely as possible. For a hero image displayed at 1400 pixels wide, serving an image at 1400 pixels wide (or 2800 pixels for high-density screens) is sufficient. Serving a 4000 pixel image for this purpose wastes roughly eight times the necessary file size.
For thumbnail images, blog post cards, and product listings displayed at 300 to 400 pixels wide, serving images at 600 to 800 pixels wide (to account for high-density screens) is enough. Images larger than this provide no visible benefit but increase page load time.
Use the Image tools to resize images to the appropriate dimensions before uploading to your CMS or image hosting service. Resize first, then compress.
Compression settings for different use cases
For photographic content destined for web use, JPEG quality between 70 and 85 percent typically provides the best balance between visual quality and file size. Below 70 percent, compression artefacts become noticeable in areas of uniform colour and smooth gradients. Above 85 percent, the file size grows significantly with no visible quality improvement in most viewing conditions.
For WebP, similar quality settings apply. Many tools convert the JPEG quality scale directly to an equivalent WebP quality, making the transition straightforward.
For PNG images used as graphics, applying lossless compression through an optimisation tool like the Compress Image tool can reduce file size by 20 to 40 percent without any quality change. If the image does not genuinely require transparency, converting it to JPEG or WebP will usually produce a significantly smaller file.
Lazy loading: delivering images only when needed
Lazy loading delays the loading of images that are not currently visible in the viewport. A long page with 20 images does not need to load all 20 images when the visitor first arrives. With lazy loading enabled, only the images visible in the initial viewport load immediately. As the visitor scrolls down, additional images load just before they enter view.
The HTML loading attribute makes lazy loading easy to implement without JavaScript. Adding loading="lazy" to any image tag below the fold enables native browser lazy loading, which is supported in all modern browsers. The hero image and any images visible without scrolling should not be lazy loaded, as this would delay the most important visual content.
Responsive images: serving the right size for each device
A desktop visitor viewing a full-width banner at 1400 pixels wide and a phone visitor viewing the same banner at 390 pixels wide should receive different sized images. Serving a 1400 pixel image to the phone visitor wastes the visitor's data and slows their page load with no benefit.
The HTML srcset attribute tells the browser about multiple versions of an image at different resolutions so the browser can choose the most appropriate one based on the device and screen density. Implementing srcset requires generating multiple versions of each image, but the performance improvement on mobile devices is significant.
Many CMS platforms including WordPress, Squarespace, and Shopify handle responsive image generation automatically if you upload a sufficiently large source image. Check your platform's documentation to understand what sizes it generates and whether WebP conversion is included.
Common mistakes in web image handling
- Uploading camera-direct files to a CMS without resizing or compressing. A 12 megapixel phone photo uploaded directly to a WordPress site will be served to visitors at full resolution until a plugin or theme handles resizing, and many do not.
- Using PNG for photographs. For any photographic content without genuine transparency requirements, JPEG or WebP will be significantly smaller.
- Compressing images inside the CMS rather than before uploading. Most CMS image compression features are basic. Compressing properly before upload gives you more control over the result.
- Not testing performance after changes. Use Google PageSpeed Insights or similar tools to measure the actual impact of your image optimisation. The "Serve images in next-gen formats" and "Properly size images" suggestions in PageSpeed specifically call out images that need attention.