Images are consistently the largest contributor to web page size. On the median webpage, images account for more than half of total bytes transferred. An unoptimized photo can easily be 3–5 MB; the same image properly compressed and in the right format can be under 200 KB — a 15x reduction with no visible quality difference to the viewer.
Lossy vs. Lossless Compression
All image compression falls into one of two categories:
Lossy compression permanently discards some image data. The result is a smaller file, but the image cannot be restored to its original state. JPEG and WebP (in lossy mode) use lossy compression. The quality level you choose controls the tradeoff between file size and visual fidelity.
Lossless compression reduces file size by encoding data more efficiently, without discarding any image information. PNG and WebP (in lossless mode) use lossless compression. The image is bit-for-bit identical to the original after decompression.
For most web images, lossy compression is the right choice. The difference between a high-quality lossy image and the lossless original is rarely perceptible to a human viewer.
Choosing the Right Quality Level
For JPEG and lossy WebP, quality is typically set on a 0–100 scale. Higher quality means less compression and a larger file.
The visual return on investment diminishes sharply above 80–85%:
Quality 95: 300 KB (nearly identical to original)
Quality 85: 120 KB (visually identical at normal viewing)
Quality 75: 80 KB (slight artifacts at 100% zoom)
Quality 60: 50 KB (visible artifacts, acceptable for thumbnails)
A quality setting of 80–85% is a good starting point for most web images. Use a higher setting (90+) only for images that will be zoomed in or where fine detail is critical. Use a lower setting (60–75%) for thumbnails and preview images where smaller size matters more than pixel-level sharpness.
Use the Right Format
Format choice has as much impact as quality settings:
- Photographs: use WebP (lossy) instead of JPEG — typically 25–35% smaller at the same quality
- Graphics, logos, UI elements: use WebP (lossless) instead of PNG — typically 25% smaller
- Icons and illustrations: use SVG where possible — resolution-independent and often tiny
- Animated images: use WebP animation or a video element instead of GIF — dramatically smaller
Resize Before Compressing
Serving an image at 2000×1500 pixels when it's displayed at 400×300 is wasteful regardless of compression quality. The browser downloads all those extra pixels just to discard them.
Resize images to the maximum dimensions they'll actually be displayed at — ideally providing multiple sizes for different screen densities using srcset:
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description"
>
On a standard display, the 800px version loads. On a 2x (Retina) display, the 1600px version loads for sharpness. On mobile, the 400px version loads. Each user downloads only the image they need.
Strip Metadata
Photos taken with a camera or smartphone embed metadata in the file: GPS coordinates, camera make and model, shutter speed, timestamp, and more. This EXIF data can add 20–50 KB to an image file and is never visible to the viewer.
Strip EXIF data before publishing images to the web. This also protects user privacy when publishing photos taken by others.
Lazy Loading
Images below the fold don't need to load immediately. The loading="lazy" attribute on <img> elements tells the browser to defer loading until the image is close to entering the viewport:
<img src="photo.webp" loading="lazy" alt="Description">
This is a single attribute that can dramatically improve initial page load time on image-heavy pages.
Practical Compression Workflow
- Choose the correct format (WebP for almost everything)
- Resize to the display dimensions (plus 2x version for high-DPI)
- Compress at 80–85% quality for photos, lossless for graphics
- Strip EXIF metadata
- Add
loading="lazy"to images below the fold
To compress JPEG, PNG, or WebP images directly in your browser without uploading them to any server, use the Image Compressor. To convert images to WebP format, use the WebP Converter. To reduce SVG file sizes, use the SVG Optimizer.