Concept
Image Compression Explained: Lossy vs Lossless
Image compression reduces file size by encoding image data more efficiently — lossy compression trades quality for size, while lossless compression preserves every pixel exactly.
What is image compression?
Image compression is the process of reducing the amount of data required to represent an image. The goal is to make files smaller for faster transfer, less storage, and lower bandwidth costs — ideally without perceptible quality loss.
Compression works by finding and removing redundancy in the image data. Natural images contain enormous amounts of redundancy: adjacent pixels are usually similar in color, large areas are often uniform, and human visual perception is less sensitive to certain types of detail than others. Compression algorithms exploit these patterns to represent the same visual content with fewer bits.
Lossy compression
Lossy compression permanently discards image data that the algorithm determines is least important to visual quality. Once encoded as lossy, the discarded information cannot be recovered.
The key insight behind lossy compression is that the human visual system is imperfect. It is more sensitive to luminance (brightness) than chrominance (color), more sensitive to low-frequency detail (broad tones) than high-frequency detail (fine textures), and poor at detecting certain types of error in complex textures. Lossy codecs exploit these weaknesses to discard data that the viewer is unlikely to notice.
Formats using lossy compression: JPEG, WebP (lossy mode), AVIF (lossy mode), HEIC (lossy mode)
Typical use cases: Photographs, product images, hero images, any complex natural imagery for web delivery.
At low quality settings (high compression), lossy artifacts become visible:
- JPEG blocking: 8×8 pixel block patterns, especially visible in uniform areas and around sharp edges
- Ringing: Ghosting or halo effects around high-contrast edges
- Color banding: Stepped transitions in smooth gradients instead of smooth blending
- Chroma bleeding: Color smearing around fine detail
Lossless compression
Lossless compression reduces file size without discarding any image data. The compressed file can be decompressed to produce a bit-for-bit identical copy of the original. Save the same lossless file 1,000 times — it will always decompress to the same pixels.
Lossless algorithms work by finding patterns in the data and encoding them more efficiently — run-length encoding (sequences of identical values), dictionary coding (repeated sequences stored as references), and entropy coding (assigning shorter codes to more common values).
Formats using lossless compression: PNG (always lossless), WebP (lossless mode), GIF (LZW, though limited to 256 colors), TIFF (LZW or ZIP), BMP (usually uncompressed)
Typical use cases: Logos, icons, screenshots, UI graphics, master/archive files, anything where pixel accuracy is required.
Lossless compression ratio depends on image content. Flat colors and simple graphics compress very well. Photographic content (high frequency detail) compresses poorly — a lossless PNG of a photograph will be much larger than a lossy JPEG of the same image.
How modern codecs compress images
Modern image codecs use several techniques in combination:
- Color space transformation: Convert RGB to YCbCr (luminance + chrominance), then compress chrominance channels more aggressively (chroma subsampling) since the eye is less sensitive to color detail.
- Block-based transforms: Divide the image into blocks (8×8 for JPEG, larger for modern codecs) and apply a mathematical transform (DCT for JPEG, MDCT or similar for AV1/VP9). The transform separates low-frequency (important) from high-frequency (less important) components.
- Quantization: For lossy codecs, reduce the precision of high-frequency components. The quality setting controls how aggressively this is done.
- Prediction: Modern codecs predict each block from nearby already-encoded blocks, then only encode the error (difference). Better prediction = smaller residual = smaller file.
- Entropy coding: The final step — use Huffman coding, arithmetic coding, or ANS to assign shorter bit sequences to more common values in the compressed data.
Quality settings explained
Lossy codecs expose a quality setting (typically 0–100) that controls the tradeoff between visual quality and file size. Higher quality = more data retained = larger file.
| Quality range | Use case | Visible artifacts? |
|---|---|---|
| 90–100 (JPEG/WebP) | Print, archival, maximum quality | No |
| 80–90 | Web hero images, product photos | No (WebP); very subtle (JPEG) |
| 70–80 | Standard web delivery | Rarely visible |
| 50–70 | Thumbnails, low-priority images | Possible on fine detail |
| Below 50 | Previews, very low bandwidth | Yes, visible artifacts |
Note: WebP quality scales differently from JPEG. WebP at 80 typically looks similar to JPEG at 90. AVIF quality scales even more aggressively — AVIF at 60 can match JPEG at 90 on photographic content.
Practical guidance
- Web delivery (photos): Lossy WebP at quality 80–85. Use AVIF with WebP fallback for maximum savings.
- Web delivery (logos, UI, icons): Lossless WebP or SVG. Never JPEG for these — artifacts on flat colors are immediately visible.
- Archival / master files: Lossless PNG or TIFF. Save your originals losslessly, export lossy only for delivery.
- Print: TIFF (LZW lossless) or JPEG at quality 90–95.
- Animated content: MP4 (H.264) for video loops, WebP animation for short loops with transparency, GIF only for email.
Frequently asked questions
What is the difference between lossy and lossless compression?
Lossy compression permanently discards some image data to achieve smaller files. The discarded data cannot be recovered. JPEG, WebP lossy, and AVIF use lossy compression. Lossless compression encodes all image data and can be decompressed to exactly recreate the original. PNG, WebP lossless, and GIF use lossless compression. The tradeoff: lossy is much smaller for photographs; lossless preserves every pixel at the cost of larger files.
How do quality settings work in JPEG and WebP?
Quality settings (typically 0–100) control how aggressively the encoder discards data. Higher quality = less data discarded = larger file = closer to the original. The scales are not linear: the difference between quality 90 and 100 is much larger in file size than the visual difference suggests. For web delivery, 80–85 is typically the sweet spot — good visual quality with significant file size savings over 95–100.
Does compressing an image multiple times degrade quality?
Yes, for lossy compression. Each time you open a lossy-compressed image (JPEG, lossy WebP) and re-save it with lossy compression, the codec runs its algorithm on already-compressed data. Artifacts accumulate across generations. Always keep your original uncompressed or losslessly compressed master file, and export to lossy only once for delivery.
What compression format should I use for web images?
Lossy WebP at quality 80–85 for photographs. Lossless WebP for logos, icons, and graphics. AVIF (with WebP/JPEG fallback) if you want the absolute smallest files and can handle the slower encode time. For maximum compatibility with legacy systems, fall back to JPEG for photos and PNG for graphics.