Why image format choice matters
Images typically account for 50–70% of a web page's total file size. Choosing the right format for each image type can reduce that by 30–80% without any visible quality loss. On mobile connections and in regions with slower internet, the difference between a 500KB page and a 2MB page is the difference between a user staying and a user leaving.
JPEG (JPG)
Best for: Photographs and images with complex colour gradients.
How it works: JPEG uses lossy compression — it permanently discards visual data to achieve smaller file sizes. The compression works by breaking the image into 8×8 pixel blocks and averaging colour information within each block. This works well for photos where the human eye can't detect small discrepancies, but creates visible artefacts on text, line art, and sharp edges.
When to use it: Photos, hero images, product photography, any image with lots of colours and gradients. Use quality settings of 80–92% — anything higher creates files almost as large as uncompressed without visible improvement; anything lower creates visible artefacts.
When to avoid it: Screenshots, logos, icons, images with text, images requiring transparency.
PNG
Best for: Screenshots, logos, icons, images with text, and anything needing transparency.
How it works: PNG uses lossless compression — every pixel is preserved exactly. This means perfect quality but larger files than JPEG for photographs. PNG supports full alpha transparency (256 levels), making it the right choice when you need elements to layer over different backgrounds.
When to use it: UI screenshots, product images with transparent backgrounds, logos, graphics with sharp edges and text.
When to avoid it: Full-resolution photographs (use JPEG instead — PNG photos are 3–10× larger with no visible quality improvement).
WebP
Best for: Almost everything on the web in 2026.
How it works: Developed by Google, WebP supports both lossy and lossless compression, plus transparency. Lossy WebP is typically 25–35% smaller than JPEG at equivalent quality. Lossless WebP is typically 20–30% smaller than PNG. Browser support is now universal (Chrome, Firefox, Safari, Edge all support it).
When to use it: Default choice for all web images — photographs (use lossy WebP) and graphics/icons (use lossless WebP with transparency).
When to avoid it: When the receiving end might not support WebP (email clients, some image editing tools). Always keep a JPEG or PNG original.
AVIF
Best for: Maximum compression when browser support is acceptable.
How it works: AVIF is derived from the AV1 video codec. It achieves 40–60% better compression than JPEG at equivalent quality — smaller even than WebP. It also supports HDR, wide colour gamuts, and transparency.
When to use it: As the preferred source in a picture element with WebP and JPEG fallbacks. Encoding is slow, but serving is fast.
When to avoid it: When you need broad compatibility without fallbacks.
The decision framework
- Photograph for the web? → WebP (with JPEG fallback) or AVIF (with WebP + JPEG fallback)
- Logo or icon? → SVG if vector, lossless WebP or PNG if raster
- Screenshot or UI image? → PNG or lossless WebP
- Image with transparency? → WebP or PNG
- iPhone photo to share universally? → Convert HEIC to JPEG using my converter
- Email attachment? → JPEG (universal compatibility)