PNG vs JPG vs WebP vs AVIF: how to pick and when to convert
“PNG, JPG, WebP, AVIF — which one do I use?” is the perennial question in web design and image optimization. This article compares the four formats and offers practical guidance for picking and converting.
Comparison table
| Format | Compression | Transparency | Animation | Size at equal quality | Browser support |
|---|---|---|---|---|---|
| PNG | Lossless | Yes (alpha) | No | 100 (baseline) | Universal |
| JPG / JPEG | Lossy | No | No | 30–50 | Universal |
| WebP | Both | Yes (alpha) | Yes | 25–40 | All modern (not IE) |
| AVIF | Both | Yes (alpha) | Yes | 15–30 | Major modern browsers (as of 2025) |
The size column is “relative bytes for the same perceived quality.” AVIF tends to be smallest, PNG largest.
Strengths and weaknesses
PNG (Portable Network Graphics)
- Strengths: Lossless (no quality loss), full alpha transparency, works everywhere
- Weaknesses: Large files, poor for photos
- Best for: Logos, icons, UI elements, screenshots, text-heavy images
JPG / JPEG
- Strengths: Excellent compression for photos, universal support, mature implementation (since 1992)
- Weaknesses: Lossy (degrades on re-save), no transparency, sharp edges and text get fuzzy
- Best for: Photos, gradient-heavy images
WebP (Google, 2010)
- Strengths: Replaces both JPG and PNG, both lossless and lossy modes, alpha transparency
- Weaknesses: No IE support (irrelevant in 2025), older editing software lags
- Best for: General web use, especially mobile (bandwidth savings)
AVIF (AV1 Image Format, 2019)
- Strengths: Highest compression ratio, HDR / wide-gamut support, both lossless and lossy, alpha
- Weaknesses: Slow to encode (CPU-heavy), limited editor support, Safari only since 16
- Best for: High-resolution photo delivery, hero images, performance-critical sites
Use cases
Photo blog / portfolio (high-res delivery)
Master: PNG or RAW (archival)
Delivered: WebP (primary) + JPG (fallback) + AVIF (premium delivery)The standard pattern is the <picture> tag with AVIF → WebP → JPG fallback:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="..." />
</picture>Logos and icons
- Vector-friendly shapes: SVG (resolution-independent)
- Raster required: PNG (for transparency)
- For delivery, converting PNG to WebP / AVIF can shrink further
Screenshots
- Local save: PNG (preserve original)
- Posting on a blog: convert to WebP, often 30–50% smaller
- For code screenshots, keep PNG — text legibility matters more than size
Social media
- Twitter / X: JPG dominant; PNG uploads typically get re-encoded to JPG server-side
- Instagram: JPG (4:5 recommended)
- LINE: JPG / PNG / GIF / WebP
When to convert
At save time
Keep masters in lossless formats (PNG, TIFF, RAW). If you save originals as JPG, repeated edits accumulate degradation.
At delivery time
CDNs (Cloudflare, Imgix, Cloudinary) increasingly auto-deliver WebP / AVIF based on request headers. For manual delivery, use the <picture> element to specify fallbacks.
Format conversion of received images
- Send PNG / JPG to systems that don’t accept WebP
- Convert AVIF to JPG for legacy receivers
This is where the image-format converter on this site is useful.
Common pitfalls
1. JPG degrades on re-save
JPG is lossy, so repeatedly opening and saving accumulates micro-degradation. Keep masters as PNG / TIFF / RAW; treat JPG as delivery-only.
2. WebP is larger after conversion
Converting a small PNG to lossless WebP can produce a larger file. Try lossy WebP, or compare both and pick the smaller.
3. Transparency disappeared
PNG → JPG fills the transparent area with white (JPG lacks alpha). Use WebP / AVIF / PNG to preserve transparency.
4. AVIF won’t display
Older CMSes (legacy WordPress, etc.) and older image-processing libraries (ImageMagick) may not support AVIF. Verify the destination supports it.
5. iOS HEIC
iPhones save photos as HEIC (a sibling of AVIF using AV1-style compression). Sending to a PC often auto-converts to JPG, but HEIC isn’t a viable web format. Convert to PNG / WebP / JPG before publishing.
Real-world size impact
For a 1920×1080 photo:
| Format | Typical file size | Perceived quality |
|---|---|---|
| PNG (lossless) | 2–4 MB | Perfect |
| JPG (quality 90) | 400–600 KB | Near-perfect |
| WebP (quality 80) | 300–500 KB | Indistinguishable |
| AVIF (quality 50) | 150–300 KB | Indistinguishable |
PNG → WebP / AVIF realistically yields 70–90% size reduction. The win for web performance is real.
Summary
- Lossless / transparency: PNG (or WebP / AVIF lossless mode)
- Photos: JPG (compatibility) → WebP (balance) → AVIF (max efficiency)
- Save: lossless format (PNG / RAW); convert at delivery
- Deliver:
<picture>with AVIF → WebP → JPG fallbacks
To convert formats locally, the image format converter on this site (PNG / JPG / WebP) runs entirely in the browser — no upload needed, so confidential images stay local.