Image format choice by content type: JPEG vs WebP vs AVIF vs HEIC for photos, illustrations, and UI screenshots
“Just use WebP” or “AVIF is always smaller” oversimplifies. The same quality setting produces different perceptual results across content types. This article walks through how JPEG, WebP, AVIF, and HEIC differ in encoding, when each fits which use case, and the <picture> patterns that ship them all without breaking older browsers.
How they compress
| Format | Codec | Method | Strong on | Weak on |
|---|---|---|---|---|
| JPEG | JPEG (1992) | DCT + quantization | natural photos | edges, text |
| WebP | VP8-derived (2010) | prediction + transform | photos, lossless mode | thin edges (ringing) |
| AVIF | AV1 (2018) | advanced prediction | all uses, especially low bitrate | encode time |
| HEIC | HEVC (2013) | HEVC intra | mobile photos | not supported in browsers |
JPEG: photos’ classical default
DCT-based block transform; high-frequency components are coarsely quantized. Good on natural images, but produces block artifacts and mosquito noise near edges.
- 8x8 block boundaries.
- Mid-tier compression efficiency.
- No transparency.
- Progressive JPEG enables interlaced rendering.
WebP: a modern JPEG
Google’s VP8 video codec adapted for stills. 25-35% smaller than JPEG at equivalent quality (per Google’s study).
- Transparency.
- Lossless mode (PNG replacement).
- Animation (GIF replacement).
At very low bitrates, WebP tends to blur rather than block — a different aesthetic failure mode than JPEG.
AVIF: the low-bitrate champion
AV1 (next-gen video codec) used for stills. Often 50%+ smaller than JPEG at equivalent quality.
- 12-bit color depth.
- HDR support.
- Film grain synthesis preserves “noise feel” while compressing.
Costs:
- Encode time is 10–100× JPEG/WebP.
- Decode is heavier than JPEG.
- Some legacy CDN image pipelines lag in support.
HEIC: the iPhone format
Apple’s default photo format. Uses HEVC intra-coding. Compression efficiency comparable to AVIF.
But browsers don’t support it (Safari 17+ partial; Chrome and Firefox not at all). Web publishing requires conversion to JPEG/WebP/AVIF.
Same image, different formats
Typical sizes for the same source at standard quality (q=80):
| Source | JPEG q=80 | WebP q=80 | AVIF q=63 |
|---|---|---|---|
| Landscape photo, 2000×1500 | 350 KB | 250 KB (71%) | 130 KB (37%) |
| Flat illustration | 200 KB | 90 KB (45%) | 60 KB (30%) |
| UI screenshot | 180 KB | 60 KB (33%) | 50 KB (28%) |
| Logo with transparency | (JPEG can’t) | 30 KB | 20 KB |
q is each encoder’s internal quality knob — AVIF’s range can be inverted (lower = better) depending on tooling. Strict apples-to-apples requires perceptual metrics like SSIM or VMAF; raw q comparison only approximates.
By content type
Natural photos
Order: AVIF > WebP > JPEG
- AVIF degrades gracefully at low bitrates (residual noise instead of block artifacts).
- WebP is steady at mid bitrates.
- JPEG when interop wins over size.
Illustrations, logos, flat graphics
Order: WebP lossless > PNG > AVIF
- Lossless preserves crisp edges.
- AVIF can produce visible color banding on smooth gradients.
UI screenshots, code, text-rendered images
Order: PNG > WebP lossless > AVIF
- Lossy formats hurt text legibility.
- AVIF/WebP lossless modes are typically half the size of PNG.
Need transparency
WebP > PNG > AVIF
All three support transparency. WebP lossless transparency has the broadest support and good efficiency.
<picture> for layered delivery
The standard pattern for modern + legacy support:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="..." width="1200" height="800" />
</picture>Browsers walk top-down, picking the first format they understand. Ship AVIF/WebP with a JPEG fallback.
CDN-side automatic format selection (Cloudflare Polish, Fastly Image Optimizer, etc.) does this transparently via the Accept header.
Browser support (2026)
| Format | Chrome | Firefox | Safari | iOS Safari |
|---|---|---|---|---|
| JPEG | ✓ | ✓ | ✓ | ✓ |
| PNG | ✓ | ✓ | ✓ | ✓ |
| WebP | ✓ | ✓ (65+) | ✓ (14+) | ✓ (14+) |
| AVIF | ✓ (85+) | ✓ (113+) | ✓ (16+) | ✓ (16+) |
| HEIC | ✗ | ✗ | △ (17+ partial) | △ (17+ partial) |
WebP is effectively universal. AVIF has reached the major browsers; many sites now ship it without a fallback.
Encoding guidance
Using a CDN / auto-optimizer
Cloudflare Polish, Fastly Image Optimizer, Vercel, Cloudinary all serve the right format per request based on Accept. Don’t manually convert unless you need archival control.
Manual encoding
- Photos: AVIF q=50-60 (cqLevel) or WebP q=80.
- Illustrations / screenshots: PNG (PNG-8 if under 256 colors) or WebP lossless.
- Icons: SVG (resolution-independent, always wins).
Pitfalls
1. “AVIF halves file size” depends on content
The AVIF advantage at low bitrates is most pronounced on photos. For UI screenshots and flat graphics, AVIF’s win over WebP is small. Measure rather than assume.
2. Progressive JPEG fights HTTP/2
Progressive JPEG’s interlaced rendering benefit assumes slow HTTP/1.1 connections. Under HTTP/2 multiplexing, baseline JPEG often renders more predictably.
3. EXIF and color profiles
JPEG and HEIC carry EXIF (timestamps, GPS, camera model). Strip on web publish — mat2, exiftool -all= — or you leak location data.
Color profiles (anything other than sRGB) are trickier: Display P3 photos benefit from keeping the P3 profile attached. Don’t blindly strip.
Summary
Image format choice combines content type × browser support × encode time, not just file size. The 2026 defaults: photos → AVIF, illustrations / logos → WebP lossless or PNG, screenshots → PNG, maximum interop → JPEG. Layer formats with <picture>, or hand the problem off to a CDN’s automatic format negotiation.
For converting between formats and inspecting the result, the image format converter tool covers the common cases.