A single uncompressed photo from a modern smartphone can be 8–15MB. A web page with 10 such images takes 80–150MB to load. On a 3G connection, that's over a minute of waiting. Image compression isn't optional for web performance — it's fundamental. But "compressing" an image means very different things depending on the format, content type, and intended use. This guide explains what actually happens when you compress an image and how to do it without visible quality loss.
Lossy vs. Lossless: Understanding the Difference
Lossless Compression
Lossless compression reduces file size by finding and eliminating redundant data patterns, without discarding any pixel information. Decompressing the file produces an exact copy of the original — byte-for-byte identical.
- Formats: PNG, GIF, BMP (with RLE), WebP (lossless mode)
- Typical savings: 20–50% for photos, up to 70% for simple graphics
- Best for: Screenshots, text overlays, line art, logos, images with sharp edges and limited colors
- Limitation: Can't achieve the dramatic size reductions that lossy compression can for photographic content
Lossy Compression
Lossy compression permanently discards visual information that the human eye is least sensitive to. The compression is irreversible — you cannot recover the original data.
- Formats: JPEG, WebP (lossy mode), AVIF
- Typical savings: 60–90% for photographs
- Best for: Photographs, complex illustrations, any image where minor quality loss is acceptable
- Artifacts: At high compression ratios, you'll see blockiness (JPEG), blurring, and color banding
Choosing the Right Format
JPEG — The Workhorse
JPEG has been the standard for photographic images on the web since the 1990s. It supports lossy compression with adjustable quality levels (typically 1–100). At quality 75–85, JPEG produces files 10–20x smaller than uncompressed images with minimal visible difference from the original. The format does not support transparency.
Rule of thumb: Quality 80 for web photos, quality 90+ for images that will be edited further. Never re-compress a JPEG — each save degrades quality further (generation loss).
PNG — For Sharpness and Transparency
PNG uses lossless compression and supports full alpha transparency. It's ideal for screenshots, UI elements, and images with text. For photographs, PNG files are typically 3–5x larger than equivalent JPEGs. PNG compression is deterministic — the same file always produces the same output.
WebP — The Modern Alternative
WebP (developed by Google) supports both lossy and lossless compression with transparency. In most benchmarks, WebP produces files 25–35% smaller than JPEG at equivalent quality, and 26% smaller than PNG for lossless mode. Browser support is now universal (97%+ globally). If you're not using WebP for web images, you're leaving performance on the table.
AVIF — The Next Generation
AVIF is based on the AV1 video codec and achieves 50% smaller files than JPEG at equivalent quality. Browser support is growing (Chrome, Firefox, Edge support it; Safari added support in 2024). It's worth adopting for new projects but keep JPEG/PNG fallbacks for older browsers.
Resolution: The Other Lever
Compression reduces file size per pixel, but reducing the number of pixels is often more effective. An image displayed at 400×300 pixels on a webpage doesn't need to be stored at 4000×3000 pixels.
- Thumbnail: 150×150 to 300×300 pixels
- Web article image: 800×600 to 1200×800 pixels
- Hero/banner: 1600×900 to 2400×1200 pixels
- Social media sharing: 1080×1080 (Instagram), 1200×630 (Facebook/LinkedIn)
- Print (300 DPI): 3300×2550 pixels for an 11×8.5 inch page
Halving the width and height of an image reduces the pixel count by 75%, which typically cuts the file size by 70–80% even before any compression is applied.
Real-World Optimization Workflow
For a typical web project, follow this workflow:
- Choose the right format: Photo → WebP or JPEG. Graphic/screenshot → PNG or WebP (lossless)
- Resize to display dimensions: Don't serve a 4000px image in a 800px container
- Apply compression: JPEG quality 75–80, or WebP quality 70–80
- Strip metadata: EXIF data (camera info, GPS coordinates) adds 10–100KB per image and is a privacy concern
- Use responsive images: Serve different sizes for different devices using the
<picture>element orsrcsetattribute
Common Mistakes
- Re-compressing JPEGs: Each save degrades quality. Always compress from the original, never from an already-compressed file
- Using PNG for photos: Unless you need pixel-perfect reproduction, JPEG or WebP produces dramatically smaller files for photographic content
- Ignoring responsive images: Serving a 2400px wide image to a 375px mobile screen wastes bandwidth and hurts load time
- Over-compressing: Below quality 50, JPEG artifacts become obvious. The file size savings from 50→30 are minimal, but quality degradation is severe
Conclusion
Image compression isn't one technique — it's a combination of format selection, resolution management, and quality tuning. The biggest wins come from choosing WebP over JPEG, resizing images to their actual display dimensions, and avoiding the common mistake of re-compressing already-compressed files. For quick compression without installing software, Risetop's image compressor handles format conversion, resizing, and optimization in your browser — your images never leave your device.