Why Image Optimisation Matters for Web Performance
Images account for the largest share of bytes on most web pages. A single unoptimised photograph can easily weigh 2-5 MB, more than the entire HTML, CSS, and JavaScript of a well-built site combined. When images are too large, pages load slowly, users bounce, and search engines penalise your rankings. Compressing and resizing images often reduces total page weight by 50% or more with no visible loss in quality.
Google's Core Web Vitals - the metrics that directly affect search rankings - are heavily influenced by image loading. Largest Contentful Paint (LCP), the metric that measures how quickly your main content appears, is frequently dominated by the hero image or the largest image on the page. Optimising that single image can be the difference between a "good" and "poor" LCP score.
Lossy vs Lossless Compression
There are two fundamental approaches to image compression, and understanding the difference is key to choosing the right strategy for your images.
Lossy compression permanently removes image data that the human eye is unlikely to notice. This is how JPEG and lossy WebP work. By discarding subtle colour gradations and fine detail, lossy compression can reduce file sizes by 60-80% while maintaining visually indistinguishable quality. The trade-off is that each re-compression degrades quality further, so always work from the original source file.
Lossless compression reduces file size without removing any data - the decompressed image is identical to the original, pixel for pixel. This is how PNG and lossless WebP work. The savings are smaller (typically 10-30%), but there is zero quality loss. Lossless compression is essential for images where every detail matters, such as logos, screenshots, technical diagrams, and UI assets.
When to Use PNG vs JPEG vs WebP
Choosing the right format depends on the content of the image and where it will be displayed:
- JPEG: Best for photographs and complex images with many colours and gradients. It does not support transparency. Use JPEG when you need broad compatibility and the image is a photo.
- PNG: Best for images that require transparency, sharp edges, or lossless quality - logos, icons, screenshots, and illustrations with flat colours. PNG files are larger than JPEG for photographs, so avoid it for photos.
- WebP: The best of both worlds. WebP supports lossy and lossless compression, transparency, and animation, all at smaller file sizes than JPEG or PNG. With universal browser support, WebP should be your default choice for web images.
Image Optimisation and SEO
Image optimisation is not just about speed - it directly impacts your search engine visibility. Google uses page speed as a ranking signal, and images are usually the biggest contributor to slow page loads. Beyond file size, ensure your images have descriptive alt text, use semantic file names, and are served at the correct dimensions. Responsive images using the srcset attribute let browsers download only the size they need, avoiding wasted bandwidth on mobile devices.
You can check how your images and other meta tags appear when shared on social platforms using the social share preview tool, which validates your Open Graph image tags and shows exactly how your pages will look on Twitter, Facebook, and LinkedIn.
Best Practices for Web Images
Follow these guidelines to ensure your images are fully optimised:
- Compress every image before uploading. Use the tool above to reduce file sizes without visible quality loss.
- Serve images in WebP format with JPEG or PNG fallbacks for maximum compatibility and minimum file size.
- Use responsive images with
srcsetandsizesattributes so browsers load the right size for each viewport. - Lazy-load images below the fold using the native
loading="lazy"attribute to prioritise above-the-fold content. - Set explicit width and height attributes on
<img>tags to prevent layout shift (Cumulative Layout Shift, or CLS). - Use a CDN with automatic image optimisation and format negotiation for production sites.
Frequently Asked Questions
- What image format is best for the web?
- WebP is the best general-purpose format for the web in 2026. It offers 25-35% smaller file sizes than JPEG at comparable quality and supports both lossy and lossless compression, transparency, and animation. Browser support is now universal across Chrome, Firefox, Safari, and Edge. Use JPEG as a fallback for older systems, PNG when you need lossless transparency (logos, icons), and SVG for vector graphics. AVIF is an emerging option with even better compression, but browser support is still catching up.
- How much can I compress an image without losing quality?
- With lossy compression, you can typically reduce JPEG file size by 60-80% before quality degradation becomes noticeable to the human eye. A JPEG quality setting of 75-85 (out of 100) is the sweet spot for most web images - it delivers significant size savings with imperceptible quality loss. For PNG, lossless compression can reduce file size by 10-30% without any quality loss at all. WebP achieves even better ratios, often producing files 25-35% smaller than equivalent JPEGs at the same perceptual quality.
- What is WebP and should I use it?
- WebP is an image format developed by Google that provides superior compression for web images. It supports both lossy compression (like JPEG) and lossless compression (like PNG), as well as transparency and animation. WebP images are typically 25-35% smaller than their JPEG or PNG equivalents at the same quality level. With universal browser support as of 2023, there is no reason not to use WebP for web images. Most modern image CDNs and build tools can automatically convert and serve WebP with JPEG or PNG fallbacks.
- How do images affect website performance?
- Images are typically the largest assets on a web page, accounting for 40-60% of total page weight. Unoptimised images directly hurt Core Web Vitals - particularly Largest Contentful Paint (LCP), which measures how quickly the main content loads. A page with a 3 MB hero image will load significantly slower than one with a 200 KB optimised version. Slow image loading increases bounce rates, reduces user engagement, and negatively impacts search engine rankings. Google uses page speed as a ranking signal, so image optimisation is both a performance and an SEO concern.
- What is the ideal image size for a website?
- There is no single ideal size - it depends on how the image is used. For hero images and full-width banners, aim for 1200-1920 pixels wide and under 200 KB. For content images within articles, 800 pixels wide and under 100 KB is a good target. Thumbnails should be 300-400 pixels wide and under 30 KB. Always serve responsive images using srcset so the browser loads the smallest version needed for the user's screen. As a general rule, no single image on your page should exceed 200 KB after compression.
More Performance Tools
Image optimisation is one part of a broader web performance strategy. Explore my full collection of free engineering tools to improve every aspect of your site, from social sharing previews to system design planning.