Image Compression Guide: Reduce File Size Without Losing Quality

Images are the single largest contributor to page weight on most websites. A single unoptimised hero image can be 3–5 MB. Multiply that by a few product shots, blog thumbnails, and background images, and you have a page that takes eight seconds to load on a mid-range mobile connection - and eight seconds is an eternity. Google's PageSpeed Insights flags oversized images as one of the most common performance failures, and Core Web Vitals - particularly LCP (Largest Contentful Paint) - are directly harmed by slow-loading images. This guide explains how image compression actually works and how to use it without degrading visual quality.

Image compression splits into two categories that work fundamentally differently. Lossless compression reduces file size without discarding any image data. Every pixel in the decompressed image is identical to the original. PNG uses lossless compression (DEFLATE), as does WebP in its lossless mode. Lossy compression achieves much higher compression ratios by selectively discarding image data that the human eye is unlikely to notice. JPEG is the classic lossy format. WebP's lossy mode, and the newer AVIF format, offer better lossy compression than JPEG at the same visual quality - meaning smaller files for equivalent appearance.

• JPEG (lossy) - Best for photographs, complex colour gradients. Quality 75–85 is usually indistinguishable from 100 at half the file size.
• PNG (lossless) - Best for screenshots, logos, images with transparency, and anything where pixel-perfect accuracy matters.
• WebP (lossy or lossless) - Google's format. 25–35% smaller than JPEG at equivalent quality. Supported in all modern browsers.
• AVIF (lossy) - The newest format. Even smaller than WebP. Browser support now at ~93% globally.
• SVG - Vector format, not pixel-based. Best for icons, logos, and illustrations that must scale to any size.

JPEG and WebP quality settings (0–100) control the aggressiveness of lossy compression. At 100, almost no data is discarded - the file is near its maximum size. At 0, maximum data is discarded - the image is tiny but heavily degraded. The non-obvious fact is that the relationship is not linear. Moving from quality 100 to 85 cuts file size dramatically while the visual difference is essentially invisible. Moving from 85 to 75 cuts size further with minimal perceptible degradation. Below 70, artefacts - blocky compression noise, colour banding - start to appear. For web use, quality 75–80 for photographs and 85–90 for UI screenshots is a good starting point. Always test visually at 100% zoom on the actual content.

The biggest image performance mistake is not compression quality - it is serving images at the wrong dimensions. If your column layout is 800px wide, there is no reason to serve a 3000px-wide photograph. The browser downloads the full 3000px image and then scales it down in CSS. The fix is responsive images: serve different sizes for different viewport widths using the HTML `srcset` attribute, or use a CDN image transformation service that resizes images at the edge. Resizing alone (before any compression) can reduce file sizes by 60–80%.

1. Open the Image Compressor at seosearchlight.com/tools/image-compressor
2. Drop your image file (JPG, PNG, WebP, or GIF) into the upload area
3. The tool compresses automatically using the best settings for your file type
4. Adjust the quality slider if you want to balance file size vs. visual quality
5. Compare the before and after previews side-by-side
6. Download the compressed image - your original file is never stored on any server

Compression runs entirely in your browser using WebAssembly. Your image files never leave your device - important if you are compressing customer photos, internal documents, or any image containing sensitive content.

Google has confirmed that page speed is a ranking signal, and images are the most common cause of slow pages. Properly compressed images directly improve your Core Web Vitals scores, particularly LCP (the time until the largest content element is visible). A page that was scoring 'Poor' on LCP because of a 2 MB hero image can move to 'Good' simply by converting and compressing that image to WebP at quality 80, reducing it to 180 KB. That is a 91% reduction in bytes that the browser has to download before the user sees meaningful content.

AVIF offers the best compression of any image format currently in wide use - typically 20–30% smaller than WebP at the same visual quality. Browser support reached 93% globally in 2025 and is now sufficient for most production use. The trade-off is encoding speed: generating an AVIF is computationally expensive compared to JPEG or WebP. For high-volume image pipelines, WebP remains more practical. For static assets that are compressed once and served many times, AVIF is worth the extra encoding time.