Image Compression: Shrink Files Without Quality Loss
Good image compression can cut a file to a fifth of its size with no difference your eye can detect, and it is the single biggest lever you have for faster-loading pages. The trick is matching the right format and settings to the image: photographs, flat graphics, and screenshots each compress best in different ways. This guide explains how compression actually works, then gives you concrete settings for each format so you stop guessing.
Compression is one piece of a broader workflow. If you want the foundations first, our photo editing basics guide covers resizing, color, and export before this stage. Here we focus purely on getting the smallest possible file at acceptable quality.
Lossy vs Lossless: The Core Distinction
Lossy compression permanently discards image data the human eye is least likely to notice, mostly subtle color and high-frequency detail. JPEG, WebP (lossy mode), and AVIF work this way. You trade a small, controllable amount of quality for a large drop in file size. Lossless compression (PNG, WebP lossless, GIF) rebuilds the original pixels exactly; it shrinks the file by encoding redundancy more efficiently, but never throws data away.
The practical rule: use lossy for photographs and complex imagery, where minor detail loss is invisible, and lossless for graphics with flat color, sharp edges, and text, where lossy compression creates ugly artifacts. Choosing the wrong category is the most common reason files end up either bloated or visibly degraded.
Choosing the Right Format
Format choice matters more than any slider. The format is tied to how the image was made, which is why it pays to understand the trade-offs. Our companion piece on image file formats explained goes deeper, but here is the working summary:
| Format | Best for | Transparency | Notes |
|---|---|---|---|
| JPEG | Photographs | No | Universal support; lossy; avoid for text/graphics |
| PNG | Logos, screenshots, flat graphics | Yes | Lossless; large for photos |
| WebP | Almost everything on the web | Yes | 25-35% smaller than JPEG at similar quality |
| AVIF | Photos where size is critical | Yes | Smallest files; slower to encode |
| SVG | Icons, logos, line art | Yes | Vector; scales infinitely; tiny |
For the modern web in 2026, WebP is the sensible default: broad browser support and meaningfully smaller than JPEG or PNG. Reach for AVIF when you need the absolute smallest photo files and can tolerate slower encoding.
The Quality Slider: Where to Set It
JPEG and WebP quality runs 0-100, but the relationship is not linear. The visible difference between 100 and 80 is usually negligible, while the file size drop is large. For web photography, quality 75-82 is the sweet spot for most images. Below about 60, you start to see blocky artifacts in smooth gradients like skies.
The right number depends on content: images with large flat areas tolerate lower quality, while busy textures and fine detail need a few points higher. Always compare the compressed version against the original at 100% zoom before settling on a setting, do not judge by the thumbnail.
Resize Before You Compress
The most overlooked step: an image displayed at 800 px wide does not need to be 4000 px wide. Resizing to the actual display dimensions (with a 2x version for high-density screens) often saves more bytes than any compression setting. Compress only after resizing, downscaling a photo discards detail that compression would otherwise waste bits preserving.
If you are also cutting out a subject, do the resize and compression last, after the cutout, so you are not optimizing pixels you are about to delete. Our walkthrough on how to remove an image background covers that step.
Tools That Do It Well
- Squoosh (free, browser): Google’s tool with side-by-side preview and every modern format, including AVIF. Best for learning what settings do.
- TinyPNG / TinyJPG (free tier): batch lossy compression for PNG and JPEG; smart palette reduction.
- ImageOptim (free, Mac): drag-and-drop lossless stripping of metadata and redundant data.
- Photoshop “Export As”: built-in WebP and PNG export with a live quality preview.
For a fuller list of editors that include export and optimization features, see the best free photo editors roundup.
Strip Metadata and Automate
Photos carry EXIF metadata, camera model, GPS, color profiles, that adds kilobytes and can leak location data. Most compression tools strip it automatically, but verify it is enabled. For a site with many images, automate compression in your build pipeline or CMS rather than doing it by hand; tools like sharp (Node) or an image CDN compress on the fly and serve the best format per browser.
Frequently Asked Questions
What is the best image format for web performance?
WebP is the best all-around choice for 2026: it supports transparency, handles both photos and graphics, and is typically 25-35% smaller than JPEG or PNG at the same visual quality. Use AVIF when you need the smallest possible photo files and can accept slower encoding.
Does image compression always reduce quality?
No. Lossless formats like PNG and WebP lossless shrink files without discarding any pixels. Lossy compression does remove data, but at sensible settings (quality 75-82) the loss is invisible at normal viewing sizes while the file shrinks dramatically.
Should I resize or compress first?
Resize first. Scale the image down to the dimensions it will actually be displayed at, then apply compression. Compressing a needlessly large image wastes bytes preserving detail nobody will see, so resizing first gives you a much smaller final file.
How much can I realistically shrink a photo?
A typical camera JPEG resized to web dimensions and saved as WebP at quality 80 commonly drops to 15-25% of its original size with no visible difference. Results vary by content, but a 70-80% reduction is routine for web-bound photos.
