JPEG vs PNG vs WebP vs AVIF: Which to Use?
Compare JPEG, PNG, WebP, and AVIF for photos, screenshots, transparency, animation, compatibility, and real output size before choosing a format.
Updated: September 29, 2026
Short answer: Photos → WebP or AVIF with a JPEG fallback. Screenshots and exact graphics → PNG or lossless WebP. Transparency → PNG/WebP/AVIF, never JPEG. Email and upload forms → JPEG or PNG. Resize first: dimensions save 80-90%, format saves 25-50%.
The wrong question is "which format is best." The right one is "which format fits this image, this destination, and this pipeline." A camera photo, a UI screenshot, and an email attachment have different correct answers — and the answers are stable enough to put in one table.
The Use-Case Table
| Job | Use | Fallback / master | Why |
|---|---|---|---|
| Website photo, article image | WebP (AVIF for heroes) | JPEG | 25-34% / 40-50% below JPEG |
| Screenshot with text | PNG or lossless WebP | PNG | Lossy codecs blur type |
| Chart or diagram | SVG if vector; else PNG/lossless WebP | PNG | Sharp lines, scalable |
| Logo, simple icon | SVG | PNG | Scales to any density |
| Transparent product cut-out | Lossy WebP (q85) or AVIF | PNG | 90% smaller than PNG |
| Photo with text overlay | WebP q80+ | JPEG | Check text at 100% |
| Thumbnail under 10KB | JPEG or PNG | — | Container overhead kills modern formats |
| Email newsletter | JPEG (photos), PNG (graphics) | — | Clients reject WebP/AVIF unpredictably |
| Upload forms, portals, MLS | JPEG | — | Extension validation, period |
| Print or archive master | TIFF/RAW/PSD | — | Delivery formats are not archives |
| Animation, short | Video (MP4/WebM) | Animated WebP | Motion compresses far better as video |
| Animation, simple loop | Animated WebP | GIF only if required | GIF's 256 colors bloat files |
Two destinations overrule everything else on this table: email and upload portals. Both predate modern formats and both validate by extension, so WebP and AVIF are non-starters there no matter how good the bytes look.
Measured: One Image, Four Formats
The same 1600×1067 photograph and the same 1440×900 screenshot, encoded from identical masters:
| Photo (1600px) | Screenshot (1440px) | |
|---|---|---|
| JPEG q80 | 348 KB | 296 KB |
| PNG | 2.9 MB | 214 KB |
| WebP q80 | 196 KB | 88 KB |
| AVIF q60 | 162 KB | 84 KB |
Read the columns together and the table above stops being opinion. On photos, PNG is catastrophic (8x JPEG) because lossless storage cannot discard photographic detail; the lossy formats order themselves AVIF < WebP < JPEG. On screenshots the order flips toward PNG: lossless storage of flat colors is cheap, and the lossy formats' advantage shrinks to single-digit percents while putting small text at risk.
Google's published numbers bracket the same picture: WebP 25-34% below JPEG at equal SSIM, lossless WebP about 26% below PNG. Our PNG-to-WebP test set shows the same pattern across seven asset types.
The Capability Matrix
| JPEG | PNG | WebP | AVIF | |
|---|---|---|---|---|
| Lossy | Yes | No | Yes | Yes |
| Lossless | No | Yes | Yes | Yes |
| Transparency | No | Yes | Yes | Yes |
| Animation | No | No (APNG aside) | Yes | Yes |
| HDR / 10-bit+ | No | Limited | Limited | Yes |
| Browser support (2026) | Universal | Universal | ~97% | ~93-94% |
| Encode speed | Fastest | Fast | Fast | 10-40x slower than WebP |
| Non-browser acceptance | Universal | Universal | Patchy | Poor |
Support and encode speed — the bottom rows — are what actually eliminate candidates. AVIF's encoding cost is why it belongs in build pipelines and not request handlers; WebP's patchy email support is why newsletters still ship JPEG.
Decide in Four Steps
- Name the destination. Browser page, email, upload portal, or print? The last three usually decide the format on the spot (JPEG/PNG, JPEG/PNG, JPEG/original).
- Classify the content. Photographic, text-heavy, transparent, or vector? Photographic goes lossy; text-heavy goes lossless; vector goes SVG.
- Resize to the display width before anything else. No codec recovers bytes wasted on pixels the layout never shows.
- Pick the modern layer and ship a fallback when the destination is a browser:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" width="1600" height="900" alt="A product shown on a desk" />
</picture>
The browser takes the first <source> it can decode; the JPEG <img> covers everyone else and carries width/height for layout stability.
Converting an Existing Library
The advice above assumes new exports. Most sites instead have five thousand legacy JPEGs and PNGs that need modern delivery copies — a job Google's format guides conspicuously skip.
Do it in one batch, locally. LessMB converts folders between JPEG, PNG, WebP, and AVIF in your browser with WebAssembly: nothing uploads to a server, there is no account or queue, and a target-size mode pins outputs to an exact KB ceiling where your CMS has one. Point it at a copy of the originals, generate the WebP layer first (broadest benefit), and add AVIF for the top-traffic pages only. The image compressor is free.
Keep the originals. Delivery copies are disposable; masters are not — you will re-export them at new widths, new formats, and new quality targets for years.
For the SEO half of the decision — how format choice flows into Core Web Vitals and rankings — see How to choose the best image format for SEO.
FAQ
Which image format is best for website photos?
WebP as the default, AVIF where its extra 15-20% saving justifies slower encoding — both with a JPEG fallback. JPEG alone remains fine for small sites that want zero complexity.
Should screenshots be PNG or WebP?
PNG or lossless WebP. Lossy formats blur small text and one-pixel UI edges. Lossless WebP typically cuts 25-45% from PNG on these assets.
Which formats support transparency?
PNG, WebP, and AVIF — not JPEG. For web delivery, lossy WebP with alpha runs about 90% smaller than PNG on photo-like cut-outs; inspect edges on the real background first.
Is AVIF worth it over WebP?
On large, high-traffic photographs, usually: 10-25% smaller files. On screenshots, tiny images, and request-time pipelines, no — WebP encodes 10-40x faster and the gap narrows to single digits.
Do any of these formats affect SEO directly?
No format receives a ranking bonus. The chain is indirect: format → smaller files → faster loading → better Core Web Vitals. Dimensions, alt text, and stable layout contribute more than the extension.
Related LessMB Guides
- How to choose the best image format for SEO
- AVIF vs WebP: which should you use in 2026?
- WebP vs JPEG: which is better for website images?
Sources
Try it now — 100% in your browser
No upload, no sign-up, no watermark. Your files never leave your device.