Muhammad Afan
Most format advice boils down to "use WebP, it's smaller". That's often true, but not always, and the exceptions are where people waste time. So instead of repeating the usual table, we ran the conversions ourselves and wrote down the numbers.
The test
We used three images:
- Photo A: a 12-megapixel (4032 × 3024) landscape, originally a 1.71 MB JPG.
- Photo B: another 12 MP photo with more fine texture, originally a 2.48 MB JPG.
- Screenshot: a 1440 × 900 capture of a web page with text, buttons and flat colours, saved as a 137 KB PNG.
Each was converted with our image converter using the same browser encoders anyone would get. WebP and AVIF were set to quality 80. The screenshot's JPG used quality 85.
Results for photos
| Format | Photo A | Photo B |
|---|---|---|
| PNG (lossless) | 20.4 MB | 27.3 MB |
| JPG (original) | 1.71 MB | 2.48 MB |
| WebP, quality 80 | 1.51 MB | 2.50 MB |
| AVIF, quality 80 | 1.15 MB | 1.88 MB |
Three things stand out.
PNG is the wrong choice for photos. The same picture was 12 times bigger than the JPG. PNG keeps every pixel exactly, which a photo doesn't need and your visitors' data plans will notice.
AVIF was the smallest both times, about 33% under the original JPG for Photo A and 24% under for Photo B, with no visible difference at normal viewing size.
WebP didn't always win. For Photo B it came out slightly bigger than the JPG we started from. That's because the JPG was already well compressed, and re-encoding a compressed file can't recover savings that are gone. WebP shines when you start from a high-quality original, such as a camera file or a PNG, not when you convert a JPG that's already been squeezed.
Results for a screenshot
| Format | Size | What we saw at 200% zoom |
|---|---|---|
| PNG | 137 KB | Exact original |
| WebP lossless | 124 KB | Exact original |
| JPG, quality 85 | 72 KB | Faint ringing around letters |
| WebP, quality 80 | 34 KB | Subtle background texture slightly smoothed |
| AVIF, quality 80 | 19 KB | Very close to the original |
Screenshots behave differently from photos. Large flat areas compress well, but sharp edges around text are exactly what JPG handles worst. At normal size our JPG looked fine, but zoomed in there was faint ringing around the letters, and it gets worse at lower quality settings. The surprise was AVIF: a seventh of the PNG's size and hard to tell apart from it. If the screenshot is for documentation or a bug report, keep it lossless: PNG or lossless WebP. If it's a decorative image on a web page, lossy WebP or AVIF at quality 80 is a quarter of the size and good enough.
Which format should you use?
Photos you're sending to people or uploading to forms: JPG. It isn't the smallest, but it opens everywhere, including the government portal that rejects everything else.
Photos on your own website: AVIF, with WebP or JPG as a fallback if your platform supports it. Every current browser displays both AVIF and WebP, but some CMS plugins and email clients still don't.
Screenshots, diagrams, logos: PNG, or lossless WebP if you control where it's shown. Only use lossy formats when you've checked that small text still reads cleanly.
Anything with transparency: PNG, WebP or AVIF. JPG cannot store transparent areas and fills them with a solid colour.
Favicons and app icons: ICO for favicon.ico, PNG for everything else. The favicon generator makes the full set.
A note on quality settings
"Quality 80" doesn't mean the same thing in every format. AVIF at 80 throws away less than JPG at 80. When comparing, look at the images side by side at 100% zoom instead of trusting the number. The image compressor shows a before-and-after slider for exactly this reason.
And if you need a specific file size rather than a specific quality, for an upload form with a 200 KB limit for example, use the target-size mode. It searches for the highest quality that fits, which beats guessing.
Frequently asked questions
Is WebP better than JPG?
Usually smaller for the same visual quality, when converting from a good original. Converting an already-compressed JPG to WebP can save little or nothing, as our second photo showed. JPG still has the widest compatibility.
Should I convert all my website images to AVIF?
For photos, it's worth it: AVIF gave the smallest files in every test. Encoding is slower than WebP, so for very large batches WebP is a reasonable middle ground.
Does converting JPG to PNG improve quality?
No. PNG stores exactly what it's given, including the compression damage already in the JPG. You get a much larger file that looks the same.
Why is my PNG so large?
PNG is lossless, so photos saved as PNG keep every pixel. For photos, convert to JPG or WebP. For graphics, a lossless WebP is often around 10% smaller than the PNG.
