WebP vs JPG vs PNG vs AVIF — which format to use when (2026)
Tomoda HinataTool author & maintainerPublished Apr 26, 202613 min read
JPG for photos that go everywhere. PNG for graphics that need transparency or lossless edges. WebP for the web today (every browser since Safari 14). AVIF when ~30% extra savings beat the loss of Outlook support. This guide cross-compares the four formats by file size, browser support, and use-case fit, with measurements you can verify with the browser-side comparator on your own image.
Tools used in this guide
The four formats at a glance
JPG (1992) is lossy, no transparency, universal — every email client, every printer, every camera writes JPG natively. PNG (1996) is lossless with full alpha, perfect for logos and screenshots, but ~5× larger than JPG for photos. WebP (2010, Google) combines lossy + lossless + alpha, ~25–35% smaller than JPG with the same quality. AVIF (2019, AV1 codec) is the newest, ~20–30% smaller than WebP, with the strongest compression but the narrowest legacy support.
When should I pick JPG?
Pick JPG when the destination is anything older than 'modern web' or where universal compatibility matters more than the last 30% of byte savings: email attachments (Outlook desktop ignores WebP), print delivery (every printer driver speaks JPG), Word/PowerPoint embeds, anything you hand to a non-technical recipient. Quality 78 is the sweet spot for photos; quality 90 for screenshots with text.
When does PNG actually win?
PNG wins three things JPG cannot: transparency (logos on coloured backgrounds), pixel-perfect edges (UI screenshots, code mockups, diagrams with thin lines), and lossless (any image that will be edited again later). For photos, PNG is wasteful — a 1080p photo as PNG is ~5× the JPG byte count for no visible benefit. PNG-8 (palette mode) is great for icons and simple graphics; PNG-24 with alpha for logos and complex transparency.
Why WebP is the modern web default
Every modern browser decodes WebP natively (Chrome 32+, Firefox 65+, Safari 14+, Edge — that's >98% of global traffic since 2022). WebP photos are 25–35% smaller than JPG at the same visual quality; WebP for graphics+text in lossless mode is ~25% smaller than PNG. The single Achilles heel is Outlook desktop email rendering; for everything else WebP is the right default in 2026.
When does AVIF earn its complexity?
AVIF (AV1 image format) reaches another 20–30% size reduction over WebP using the AV1 video codec's intra-frame compression. That extra savings is significant for greenfield content sites with high-resolution hero images. The cost: Outlook desktop, some Microsoft apps, and a long tail of mobile browsers (older Android Webview, very old Safari) cannot decode. Use AVIF behind a `<picture>` element with WebP fallback, or skip until your audience analytics show <2% legacy traffic.
Decision tree
Will the file be opened in Outlook desktop, attached to email, or printed? → JPG (photos) or PNG (graphics with transparency). Is it a web asset on a site with modern audience? → WebP photos at quality 82, lossless WebP for screenshots. Is your audience >98% modern browsers AND you want the smallest possible LCP? → AVIF with WebP fallback via `<picture>`. Does the asset need transparency on the web? → WebP (alpha) or AVIF (alpha + smaller); skip PNG for new web work.
| Format | Photo (1920×1280) | UI screenshot (1920×1080) | Logo + transparency | Browser support |
|---|---|---|---|---|
| JPG quality 82 | 245 KB | (no transparency) | (no transparency) | 100% |
| PNG | 1.65 MB | 92 KB | 11 KB | 100% |
| WebP quality 82 | 165 KB | 55 KB (lossless) | 8 KB | 98% |
| AVIF quality 60 | 115 KB | 48 KB | 6 KB | 92% |
Frequently asked questions
Which format has the best browser support?
JPG and PNG (100%, every browser ever). WebP is at ~98% (every browser since Safari 14, 2020). AVIF is at ~92% (Safari 16.4+, all major modern browsers, but missing on older Android Webview).
Is WebP smaller than AVIF?
No — AVIF is typically 20–30% smaller than WebP at the same visual quality. WebP is the wider-support default; AVIF is the smaller-file power option behind a fallback.
Why is HEIC not in this comparison?
HEIC is the iPhone's internal storage format, not a web format. No browser decodes HEIC natively, no email client renders it inline, and Apple licenses HEVC per device. For the web, convert HEIC to JPG/WebP/AVIF.
Should I use lossless WebP or lossy WebP?
Lossy WebP for photos (quality 82 is the sweet spot). Lossless WebP for screenshots, logos, and graphics with text — it beats PNG by ~25% at zero quality cost.
What about TIFF?
TIFF is a desktop / print / archival format, not a web format. Use TIFF for camera RAW intermediates and large-format print delivery; for everything else convert to JPG/WebP/AVIF.
Can I just use one format everywhere?
If you need one universal answer: JPG for photos and PNG for graphics with transparency. Both work everywhere and compress reasonably well. WebP and AVIF are optimisations on top — meaningful for high-traffic web pages, less so for occasional uploads or attachments.
Try it now
Encode one image in all five modern formats in parallel — size + time side by side
Modern Image Format Comparator (PNG / JPEG / WebP / AVIF / JXL)