How to Compress Images Without Losing Visible Quality

All image compression works by one of two approaches: lossless or lossy.

Lossless compression reduces file size without discarding any image data. The decompressed image is bit-for-bit identical to the original. PNG and GIF use lossless compression. The trade-off: lossless compression achieves modest size reductions — typically 10-30% for photographic content, though much better for graphic content with large flat-colour areas.

Lossy compression permanently discards image data that is considered less important to visual quality. JPEG and WebP (by default) use lossy compression. The discarded information is typically high-frequency detail (fine texture, subtle colour transitions) that the human visual system is relatively insensitive to. The trade-off: once discarded, this information cannot be recovered. But the compression ratios are dramatic — a JPEG at 80% quality is typically 70-80% smaller than an uncompressed equivalent with minimal visible degradation.

The key insight is that 'visible quality' and 'data quality' are different. A JPEG compressed to 85% quality has permanently lost image data, but to the human eye, the image looks essentially the same. This is the practical basis for all web image optimisation.

JPEG is best for photographs and complex, continuous-colour scenes. JPEG compression exploits the fact that human vision is less sensitive to colour detail than to luminance (brightness) detail — it compresses colour channels more aggressively than the brightness channel. This works perfectly for natural photographs but produces visible 'ringing' artefacts around sharp edges (like text on a coloured background). Never use JPEG for logos, screenshots with text, or graphics with sharp edges.

PNG is best for screenshots, logos, icons, graphics with flat colours, and any image that requires transparency. PNG's lossless compression is excellent for images with limited colour ranges (large areas of the same colour, sharp edges). Using PNG for photographs produces unnecessarily large files — switch to JPEG for any photographic content.

WebP is a modern format that provides both lossy and lossless modes, producing 25-30% smaller files than JPEG and PNG at equivalent quality. It's supported by all modern browsers and is increasingly the preferred format for web images. Use WebP when file size is critical and you're targeting modern platforms.

SVG is best for logos, icons, and illustrations that are defined as shapes and paths rather than pixels. SVG files scale to any size without quality loss and are typically tiny. Use SVG for all vector artwork.

JPEG quality is typically expressed as a percentage (0-100) or a scale of 1-12. Here's what each range actually delivers in practice:

100% quality: Near-lossless, maximum file size. Used only for archival masters. Typically produces files 3-5× larger than 85% quality with no perceptible visual improvement.

85-95% quality: Professional standard for print and high-quality web use. Virtually indistinguishable from the original at normal viewing distances. This is the right choice for product photos, editorial photography, and portfolio images.

70-85% quality: Standard web quality. Clear to trained eyes at 100% zoom but imperceptible at typical viewing sizes. Google PageSpeed typically rates images as 'acceptable' at 75-80% quality. This is the sweet spot for most web images.

50-70% quality: Noticeably degraded at close inspection, but acceptable for thumbnails and preview images where file size is the priority.

Below 50% quality: Visible degradation at any viewing size. Appropriate only for tiny thumbnail previews or cases where the absolute smallest file size is the only priority.

For most practical purposes, starting at 85% quality and reducing until you see visible degradation at 100% zoom is the right approach.

For PNG images, reducing the colour depth is the most powerful optimisation. PNG-24 uses 24-bit colour (16 million colours). Most screenshots and graphic images look identical at PNG-8 (256 colours) with a 70-80% size reduction. The conversion isn't always acceptable — gradients and photographs may show 'banding' at reduced colour depth — but for UI screenshots, logos, and flat-colour graphics, PNG-8 is far more efficient.

PNG metadata (EXIF data, ICC colour profiles, creation timestamps) adds 5-50KB to many PNG files. Stripping this metadata saves space with zero visual impact for web use.

Removing the alpha (transparency) channel from PNG images that don't actually use transparency converts them to PNG-24 without alpha, reducing size. Many PNGs have an alpha channel by default even if every pixel is fully opaque.

One of the biggest image optimisation gains comes from something that isn't technically compression: resizing the image to the dimensions it will actually be displayed at.

Uploading a 4000×3000 pixel photograph to a website where it displays at 800×600 pixels wastes 25× more bandwidth than necessary, regardless of compression. The browser downloads all 4000×3000 pixels, then scales it down in software for display. Resize images to their display dimensions before compressing.

For responsive websites where the same image displays at different sizes on different screen sizes, generate multiple versions (800px, 1200px, 1600px wide) and use the HTML srcset attribute to serve the appropriate version.