Compress
Image

JPG is the workhorse for photographs. It uses DCT-based lossy compression that is tuned for natural images with smooth gradients (skin, sky, foliage) and can shrink a 6 MB RAW-export down to 200–400 KB at quality 80 with no visible difference. It is a poor choice for screenshots, logos, or anything with sharp edges and flat colors because ringing artifacts appear around hard transitions.

PNG is lossless and ideal for UI screenshots, icons, line art, and any image that needs a transparent background. Its compression is based on DEFLATE, which works well on large flat areas but cannot exploit the perceptual tricks JPG uses on photos. A 4000 × 3000 photo saved as PNG can be 20× larger than its JPG equivalent at quality 85.

WebP supports both lossy and lossless modes in one container, with transparency in both. Lossy WebP beats JPG by roughly 25–35 % at the same perceptual quality; lossless WebP beats PNG by 20–25 %. It is supported in every modern browser since 2021 and is the safe default for new web assets.

AVIF is newer (AV1 still-frame), produces files 40–50 % smaller than JPG, and supports HDR plus wide gamut. The trade-off is slower encode speed and slightly less compatibility with older email clients and image editors. For hero images, OG cards, and product photos delivered to modern browsers, AVIF wins on size. For email attachments and editor compatibility, stick with JPG or WebP.

Most encoders expose a 0–100 quality scale that is non-linear: dropping from 100 to 90 often halves the file size for almost no perceptual loss, while dropping from 50 to 40 barely shrinks the output and introduces visible blockiness. The sweet spot lives between 75 and 85 for almost every photographic use case.

For JPG, quality 80 is the canonical web setting — it is what most CMS pipelines (Cloudinary, imgproxy, Next.js Image) default to. Go to 85 for hero photos and portraits where skin tones matter; drop to 70 for thumbnails and grid views where size matters more than perfect detail.

For WebP, quality 75 produces a file roughly equivalent to JPG quality 85 in perceptual terms, so you can be more aggressive than with JPG. For AVIF, quality 50–60 is comparable to JPG 80 because AVIF's quality scale is calibrated differently. Always preview side-by-side at 100 % zoom before locking a quality for a batch.

If you serve responsive images, compress each size with the quality budget appropriate to its viewing distance. A 320-pixel-wide thumbnail tolerates quality 60 because no one inspects it closely; a 2560-pixel-wide hero on a 4K monitor needs quality 85+ to avoid visible chroma noise.

Lossy compression discards perceptual information that the human eye cannot easily recover — high-frequency detail, subtle color variation, fine noise. It is irreversible: once you save at quality 70, the information is gone, and re-saving at quality 100 will not restore it. Use lossy for any photograph delivered to end users.

Lossless compression rearranges bytes so the file is smaller but the pixels are bit-for-bit identical when decoded. Use lossless for source masters you will re-edit, for screenshots of text and UI where every pixel matters, for charts and diagrams with sharp lines, and for any image that will be re-encoded multiple times in a pipeline (each lossy re-save compounds artifacts).

A common workflow mistake is treating every image the same. Keep a lossless master (PNG or WebP-lossless), then export lossy delivery copies (JPG/WebP/AVIF) sized for each use case. That way you can always re-export at a different size or quality from the master without generation loss.