Image Compression and Quality: Understanding the Trade-offs

JPEGs use a mathematical trick called DCT (Discrete Cosine Transform) to break images into small 8×8 pixel blocks. Each block is converted into a mathematical formula that represents its color and brightness variations. The magic happens next: high-frequency details (fine textures, sharp edges) are thrown away, keeping only the low-frequency components (smooth color transitions) that your eye notices most.

This is where quality settings come in. A quality of 95 discards less data; a quality of 70 discards more. The JPEG encoder uses quantization tables—mathematical rules that determine what to keep and what to discard. At quality 95, the quantization is gentle; at quality 50, it's aggressive. The encoder then compresses the remaining data with lossless algorithms for even smaller file sizes.

PNG, WebP, and TIFF use lossless compression: no data is thrown away, only redundant information is removed. If you compress a PNG at quality 9 (maximum), it's still pixel-perfect; 'quality' means how long the compression takes, not how much data is discarded. This is why PNG files are larger but safer for repeated editing.

The most visible JPEG artifact is blockiness: the 8×8 pixel blocks become visible as little squares, especially around sharp edges or high-contrast areas. At quality 75, blockiness is barely noticeable on most images; at quality 40, it's obvious and ugly. Text edges are where you see this worst—a logo compressed at quality 60 looks pixelated and mushy.

Ringing artifacts appear around sharp edges as dark or light halos. Compress a black line on a white background at quality 60, and you'll see a faint dark outline around the line. This happens because DCT compression assumes smooth transitions; sharp boundaries confuse it. Increasing quality to 80+ reduces ringing dramatically.

Color smearing happens when JPEG uses chroma subsampling—storing color information at lower resolution than brightness. A bright red line next to blue might bleed into purple. This is usually only visible at quality <70 or with very saturated colors. It's why high-quality JPEGs for graphics-heavy images should use quality 85+.

PSNR (Peak Signal-to-Noise Ratio) and SSIM (Structural Similarity Index) are mathematical metrics that measure how different a compressed image is from the original. A PSNR of 40 dB sounds impressive, but humans don't perceive quality linearly with PSNR. An image at PSNR 35 dB might look acceptable to you, while PSNR 28 dB looks like garbage, but the difference in 'noise level' is much larger numerically.

SSIM better correlates with human vision than PSNR because it considers local structure. An SSIM of 0.95 generally means the image looks nearly identical to the original; 0.85 is good; 0.75 is acceptable for web use; 0.60 is noticeably degraded. But even SSIM doesn't perfectly match human perception—a slightly blurry image might have high SSIM if it's structurally similar, but you'd notice the blur.

The best approach: test your own images at different quality levels using side-by-side comparison tools. What looks acceptable for a hero image (quality 85+, SSIM >0.90) might be overkill for a thumbnail (quality 70, SSIM 0.80). Trust your eyes, not the metrics.

Web hero images and product photos: quality 80–90. These are large and prominent; visitors are looking at them directly. JPEG artifacts become obvious at lower quality. WebP achieves similar quality at 75–80, so you can save 20–30% file size. A 4MP product photo at quality 85 is typically 150–250 KB.

Thumbnails and gallery images: quality 70–75. Smaller size means compression artifacts are less visible. Visitors scroll past these, not staring at them. Quality 70 WebP is often indistinguishable from quality 80 JPG. File sizes drop to 30–80 KB per thumbnail.

Archival and print: quality 95 or PNG. If you're storing original images for future editing or printing, use maximum quality or lossless PNG. A 300 DPI print from a web-quality JPEG looks bad; you need quality 95+ JPEG or PNG. This is the only case where file size is secondary.

Social media: quality 60–70. Most platforms compress anyway; your high-quality JPEG still loses data passing through Instagram or Facebook's servers. Save upload time and bandwidth with quality 65 JPEG. The platform will re-compress it; don't do extra work.

Email attachments: quality 50–60 for photos, PNG for graphics. Email clients vary widely in how they display images. Recipients on slow connections benefit from smaller file sizes. A quality 55 JPEG thumbnail is 20–40 KB; quality 75 is 100+ KB. Email is not the place for perfection.

Some image editors let you save at 'maximum quality' or '100%', which sounds like no compression. In JPEG, 'quality 100' still uses DCT and quantization; it just uses the gentlest quantization tables. A JPEG at quality 100 is still lossy and still smaller than the original uncompressed image. It's roughly lossless, but not actually lossless.

PNG at 'compression 9' (maximum) is truly lossless—every pixel is preserved, but the file is compressed with ZIP-like algorithms. A PNG at compression 9 is smaller than uncompressed pixel data but larger than a JPEG at quality 95. If you need pixel-perfect preservation, use PNG, not JPEG at quality 100.

Uncompressed image formats (TIFF, RAW) store every pixel exactly as captured, with zero compression. These files are 10–50× larger than JPEG but perfect for archival or further editing. They're not suitable for web delivery or sharing, only for professional workflow and long-term storage.

Saving a JPEG multiple times multiplies the damage. Compress an image to quality 90, then open it in an editor and re-save at quality 90 again. Each save applies DCT quantization and discards a little more data. After 3–5 saves, artifacts compound: edges blur, colors shift, and the image looks progressively worse. This is called generation loss.

Never edit JPEG files directly. Always keep your source in PNG or uncompressed format (TIFF, RAW). Edit the original, then save as JPEG when you're done. A single save from a lossless original at quality 85 looks far better than a JPEG edited, re-saved, and edited again.

The same applies to WebP: avoid multiple saves. Use your editing workflow on PNG, then convert to WebP as the final step. Some tools automate this—upload PNG, get WebP + JPEG automatically—so you never re-save. This preserves quality and saves you from the compounding artifact problem.

JPEG can store color (chroma) information at lower resolution than brightness (luma). This is called 4:2:0 chroma subsampling—color is stored at 1/4 the resolution of brightness. For photographs with soft, gradual colors, this is invisible; the human eye is less sensitive to color detail than brightness detail. File size drops 10–20% with no visible quality loss.

4:2:0 subsampling causes noticeable color smearing on high-contrast edges: a sharp red line next to blue will have a blurry, purple transition between them. If your image has saturated colors, sharp lines, or logos with solid colors meeting, use 4:4:4 chroma (no subsampling) or choose WebP, which handles this better.

When choosing JPEG quality and chroma subsampling, photographers can usually use quality 75 with 4:2:0 and get excellent results; graphic designers should use quality 85+ with 4:4:4. Web tools often default to 4:2:0 for smaller files, but you can usually adjust this setting. Know what you're doing and choose accordingly.