images
PNG vs JPG vs WebP vs AVIF: Which Format to Use and When
A practical breakdown of the four main web image formats — PNG, JPG, WebP, and AVIF — covering lossless vs lossy, alpha transparency, compression efficiency, browser support in 2026, animation, encode/decode cost, and a clear decision guide for developers.
You’re exporting an image and your tool gives you six format options. You pick JPG because that’s what you always do. Then the design-system screenshot looks fuzzy, the transparent icon has a white box behind it, and Lighthouse docks you for oversized images. Sound familiar?
Format choice matters — not because one format is universally better, but because each one solves a different problem. Here’s the practical breakdown.
The formats at a glance
| PNG | JPG | WebP | AVIF | |
|---|---|---|---|---|
| Compression | Lossless only | Lossy only | Lossless or lossy | Lossy (lossless option) |
| Alpha / transparency | ✓ | ✗ | ✓ | ✓ |
| Animation | ✗ (use APNG) | ✗ | ✓ | ✓ |
| Typical file size vs JPG | Larger for photos | Baseline | ~25–35% smaller | ~40–50% smaller |
| Browser support (2026) | Universal | Universal | Universal | ~97% |
| HDR / wide-gamut | ✗ | ✗ | ✗ | ✓ |
| Encode cost | Low | Low | Medium | High |
PNG — lossless, pixel-perfect, large
PNG uses lossless compression: every pixel you put in comes back out unchanged. That makes it ideal for screenshots, UI elements, icons, logos, and anything where sharp edges or exact colors matter. It also carries a full alpha channel, so transparency works correctly without hacks.
The tradeoff is file size. A PNG of a photograph is often 3–5× larger than a JPG of the same image. For photographic content, that’s a poor trade — you’re paying a huge size penalty for losslessness that photographs don’t need.
Reach for PNG when:
- You’re working with UI screenshots, diagrams, or code screenshots
- The image has transparent areas (icons, logos, overlays)
- You’re keeping a working copy you’ll re-export later (never repeatedly re-encode a lossy file from itself)
JPG — the universal baseline
JPG achieves strong compression by discarding high-frequency details the human eye is less sensitive to. At mid-to-high quality settings the visual difference from the original is minimal for photographs.
The hard constraints: no alpha support (transparent areas get baked to a flat background color, usually white), and quality degrades on every re-encode. Load a JPG, tweak a slider, save — the quality notches down. Always keep lossless originals and export to JPG only as a final step.
Where JPG still earns its place: compatibility. Every browser, OS, and image pipeline built in the last 25 years understands JPG without question. When you need a photograph to work absolutely everywhere and have no transparency, JPG is the reliable fallback.
WebP — the pragmatic modern choice
Google introduced WebP in 2010, and by 2026 it has full universal browser support. It supports both lossless and lossy modes, full alpha transparency, and animation. File sizes beat JPG by roughly 25–35% at equivalent quality, and lossy WebP also beats PNG for many UI-graphic use cases when you don’t need pixel-perfect losslessness.
Encode is noticeably slower than JPG, though fast enough that it’s rarely a bottleneck in practice. Decode performance is comparable to JPG on modern hardware.
For most web projects today, WebP is the sensible default for new images:
- Lossy WebP replaces JPG for photos with better compression and no compatibility concerns
- Lossless WebP replaces PNG for UI graphics when exact pixel fidelity isn’t strictly required
The one gap: WebP doesn’t support HDR or wide-gamut color, and at very high quality settings its compression starts to trail AVIF.
AVIF — excellent compression, newer but nearly universal
AVIF is derived from the AV1 video codec’s intra-frame compression. The results speak for themselves: typically 40–50% smaller than JPG at comparable visual quality, and 20% smaller than WebP. It supports alpha transparency, animation, and full HDR/wide-gamut color — features no other web image format can claim together.
Browser support reached roughly 97% globally in 2025. Chrome, Firefox, Safari, and Edge all support it. The remaining ~3% is mostly older Android WebViews and very old mobile browsers — acceptable for most production sites, especially with a <picture> fallback.
The real cost is encode time. AVIF encoding is significantly slower than WebP, which is in turn slower than JPG. For a build pipeline processing hundreds of images, CPU-bound AVIF encoding can be 5–10× slower than JPG at equivalent quality. Use it deliberately for images that matter for page weight; don’t apply it blindly as a batch setting without accounting for CI time.
Decoding is fine on modern hardware. Mobile CPUs from roughly 2021 onward handle AVIF without issues.
Browser support in 2026
All four formats have effectively universal support for display:
- PNG / JPG: 100% — every browser including IE.
- WebP: Universal since late 2020, when Safari added support in iOS 14.
- AVIF: ~97% globally — Chrome 85+, Firefox 93+, Safari 16.1+, Edge 121+. Missing: very old iOS Safari and some Android WebViews.
For <img> tags targeting broad audiences, WebP with a JPG fallback is conservative and safe. For modern stacks, AVIF → WebP → JPG via <picture> gives maximum compression with full coverage.
Animation
Animated WebP and animated AVIF both work. But for short UI animations or product clips, short <video> (MP4/WebM) beats both: smaller files, hardware-accelerated decode, and proper scrubbing controls. For looping graphics where an image format is required, animated WebP is the practical choice today — browser support is universal and tooling is solid.
Decision guide
Photos and real-world imagery
- Best: AVIF (smallest, best quality-per-byte, HDR-capable)
- Good: WebP lossy (25–35% smaller than JPG, universal support)
- Fallback: JPG (100% compatible)
UI, screenshots, logos, icons
- Has transparency → WebP lossless or PNG (never JPG)
- No transparency, sharp edges → PNG or WebP lossless
- No transparency, lossy acceptable → WebP lossy
Animation
- Short video-like loops → MP4 or WebM
<video> - Looping graphic as image format → animated WebP
- Maximum compatibility → GIF (use reluctantly; file sizes are painful)
Serving multiple formats with <picture>:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="…" width="800" height="600">
</picture>This sends AVIF to browsers that support it, WebP as the mid-tier, and JPG to everything else — no JavaScript, progressive enhancement by default.
Testing your image pipeline
Before wiring up format conversion in a build pipeline, it helps to verify that your renderers and tooling handle formats correctly. The Sample File Generator lets you generate real, valid PNG, JPG, WebP, GIF, and BMP files at exact sizes right in the browser — no upload, no signup. Create a known-good 500 KB WebP or 1 MB PNG to sanity-check your optimization pipeline before feeding it real production assets.
For interactive one-off conversion between PNG, JPEG, and WebP, the Image Format Converter runs entirely in your browser — nothing leaves your machine.
The short version
- AVIF: Best compression, HDR, ~97% support — serve as first choice in
<picture> - WebP: Best all-rounder, universal, both lossless and lossy, alpha, animation
- PNG: Go-to for UI/graphics/transparency when lossless matters
- JPG: Reliable fallback for photos, 100% compatible, no transparency
Pick the format that matches what your image actually is — photograph, UI graphic, logo, or transparency element — then let <picture> handle the fallback logic.