Guide
PNG vs JPEG vs WebP vs AVIF: which image format to use
How the four main web image formats differ in compression, transparency, animation and browser support, and a practical way to choose.
The short version: use AVIF or WebP for photos on the web with a JPEG fallback, PNG (or lossless WebP) for screenshots and graphics with sharp edges, and SVG for logos and icons. The rest of this guide explains why, with sample files you can compare yourself.
At a glance
| Format | Compression | Transparency | Animation | Best for |
|---|---|---|---|---|
| JPEG | Lossy | No | No | Photos where compatibility matters most |
| PNG | Lossless | Yes | APNG | Screenshots, UI, text, line art |
| WebP | Lossy or lossless | Yes | Yes | Photos and graphics on the web |
| AVIF | Lossy or lossless | Yes | Yes | Photos where size matters most |
Compression
JPEG discards detail the eye is least likely to miss. At quality 80–85 photos look good and stay small, but hard edges and text get “ringing” artifacts. Compare the same image at quality 10, 50 and 100.
PNG is lossless, so it is exact but large for photos: our 1920×1080 PNG is about ten times the size of the JPEG. WebP is typically 25–35% smaller than JPEG at similar quality, and AVIF (based on the AV1 video codec) is usually smaller again, at the cost of slower encoding. Compare the WebP and AVIF versions of the same test image.
Transparency and animation
JPEG has no alpha channel. PNG, WebP and AVIF do — see the transparent PNG. For animation, GIF is limited to 256 colors. Animated WebP and APNG are better replacements, and short videos (MP4/WebM) are often smaller still.
Browser support
JPEG, PNG and GIF work everywhere. WebP and AVIF are supported by all current versions of Chrome, Edge, Firefox and Safari; very old browsers need a fallback. HEIC (iPhone photos) displays only in Safari and JPEG XL has limited support, so convert those on upload.
Serving several formats
Let the browser choose with <picture>:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" width="1600" height="900" loading="lazy">
</picture>The browser uses the first source it supports. Always set width and height to prevent layout shift.
Testing tips
Test your pipeline with more than one kind of image: a CMYK JPEG, a 16-bit PNG, EXIF-rotated photos and an extremely wide image all break naive image code. The image processing use case collects them.