How to Compress Images Without Losing Quality

The word “compression” makes many people nervous — they picture blurry photos and blocky artifacts. But not all compression degrades image quality. With the right techniques, you can dramatically reduce file sizes while keeping images looking virtually identical to the original. This guide explains the difference between lossy and lossless compression and walks through every major technique for preserving quality while shrinking file sizes.

Lossy vs. Lossless Compression: The Core Distinction

Understanding this fundamental difference is the starting point for choosing the right approach:

Lossy compression permanently discards some image data. The algorithm analyzes the image, identifies information that human eyes are less sensitive to (fine high-frequency details, subtle color gradients), and either removes or approximates that information. JPEG is the classic lossy format. The more aggressively you compress, the more noticeable the artifacts — typically manifesting as blocky “mosquito noise” around edges and loss of fine texture.

Lossless compression doesn’t discard any pixel data. Instead, it finds smarter ways to encode the same information. Think of it like replacing a sequence of “AAAAAAA” with “7×A” — the information is identical, just stored more efficiently. Decompress the file and you get back a bit-for-bit identical copy of the original.

For use cases requiring absolute fidelity — print production, product showcase photography, medical imaging — lossless is the only acceptable approach. For most web images, a well-tuned lossy compression is entirely sufficient.

PNG Lossless Optimization: pngquant and OptiPNG

PNG uses lossless compression (DEFLATE algorithm) by default. However, many PNG files aren’t optimally compressed and can be significantly reduced further.

pngquant (Visually Lossless Quantization)

Technically, pngquant applies lossy compression by reducing PNG color depth from millions of colors to 256 or fewer. But the algorithm is so precise that the visual difference is nearly imperceptible, while file sizes drop by 40–70%.

• Command-line usage: pngquant --quality=65-80 input.png
• Best for: PNGs with rich color detail, icons with transparency
• Avoid for: design files requiring exact color values, scientific or medical images

OptiPNG and Oxipng (Purely Lossless)

These tools recompress the DEFLATE data stream to find a more efficient encoding without changing any pixel values:

• optipng -o7 input.png (-o7 is maximum compression level)
• oxipng -o max input.png (built in Rust, significantly faster)
• Typically reduces PNG size an additional 5–20%

Lossless JPEG Optimization

JPEG is inherently a lossy format, but there are ways to shrink JPEG files without re-encoding — which means no additional quality loss.

Stripping EXIF and Metadata

Camera-captured JPEGs contain embedded metadata: GPS coordinates, camera model, aperture and shutter settings, ICC color profiles, and more. None of this information affects how the image looks on screen, but it can account for 10–30% of the total file size.

• jpegtran: jpegtran -copy none -optimize input.jpg > output.jpg
• ExifTool: exiftool -all= input.jpg (strips all metadata)
• Most online compression tools automatically remove EXIF data

Huffman Optimization and Progressive JPEG

jpegtran can also re-optimize the Huffman coding tables in a JPEG (using the -optimize flag) for a smaller file, and convert to progressive JPEG (-progressive), which loads as a low-resolution image that gradually sharpens — improving perceived performance without affecting final image quality.

WebP: Supporting Both Modes

WebP is a versatile format that supports both lossy and lossless compression, with better efficiency than JPEG and PNG respectively:

• WebP lossless: Approximately 26% smaller than equivalent PNG, suitable when transparency is needed and zero quality loss is required
• WebP lossy: 25–34% smaller than equivalent JPEG, suitable for general web photography
• Convert to lossless WebP: cwebp -lossless input.png -o output.webp
• Convert to lossy WebP at quality 80: cwebp -q 80 input.jpg -o output.webp

All modern browsers — Chrome, Firefox, Safari 14+, Edge — support WebP. Use the HTML <picture> element to serve WebP with a JPEG fallback for older browsers.

AVIF: Next-Generation Lossless Compression

AVIF (AV1 Image File Format) is currently the most compression-efficient image format available, derived from the open-source AV1 video codec:

• Lossless AVIF files are roughly 20% smaller than lossless WebP
• Lossy AVIF achieves 20–50% smaller files than WebP at equivalent perceptual quality
• Supports HDR and wide color gamut (P3 and Rec. 2020)
• Browser support: Chrome 85+, Firefox 93+, Safari 16+
• Encoding is slower than WebP, which matters when batch-processing thousands of images

Recommended Tools

Here are the best tools for different situations:

• Squoosh (squoosh.app): Google’s browser-based tool supporting WebP, AVIF, MozJPEG, and more. Real-time before/after comparisons make it the best choice for experimenting with formats and quality settings.
• TinyPNG / TinyJPG: The simplest interface for quick compression. Excellent PNG results, supports batch uploads, no account required.
• ImageOptim (Mac): Desktop app that automatically chains multiple compression tools. Drag-and-drop simplicity with lossless compression defaults.
• ShortPixel: Offers an API and WordPress plugin for automated large-site compression workflows.
• Cloudinary: Cloud image management platform that automatically serves images in the optimal format and size for each browser and device.

Measuring Quality Objectively

Beyond eyeballing the result, objective metrics can help you verify compression quality:

• SSIM (Structural Similarity Index): Values closer to 1.0 indicate higher similarity. A score above 0.95 is generally considered high quality.
• PSNR (Peak Signal-to-Noise Ratio): Higher is better. Above 40 dB typically means the difference is imperceptible to the human eye.
• Butteraugli: Google’s perceptual difference analyzer, more closely aligned with how human vision actually perceives quality differences.
• Squoosh includes built-in SSIM and Butteraugli analysis, making these metrics accessible without additional setup.

A Practical Compression Workflow

1. Determine the actual display dimensions and resize the image to match — don’t serve a 3000px image in a 600px container
2. For photographic content: try WebP lossy at quality 75–85 first; fall back to MozJPEG if WebP isn’t suitable
3. For images requiring transparency: try lossless WebP or pngquant-optimized PNG
4. Strip all unnecessary EXIF metadata
5. Validate results with Squoosh or Google PageSpeed Insights
6. Use the HTML <picture> element to serve AVIF or WebP with appropriate fallbacks

Conclusion

“Lossless” image optimization isn’t a single technique — it’s a combination of approaches: stripping unnecessary metadata, re-encoding with more efficient algorithms, and leveraging modern formats designed for better compression. For most web images, combining modern format support (WebP or AVIF) with well-tuned compression settings can achieve results that look identical to the original while loading in a fraction of the time.

Do it in your browser — the file never leaves your device: Image Optimize