Images are usually the heaviest thing on a web page, so the format you choose has a real effect on load time — and on your Core Web Vitals and SEO. Here is how to pick the right one.
We measured this ourselves. And the result was that there is no single “smaller format”. One converter, default settings, two pictures: the photo lost 85% of its size while the UI screenshot gained 142%. Which format wins depends far more on what the picture contains than on the format itself. see the full measurements
One format won on all four of our test images. PNG → WebP, measured on our own converter: photo 1.88 MB → 303.1 KB (-84%), UI screenshot 18.0 KB → 7.3 KB (-59%), flat illustration 34.7 KB → 10.2 KB (-71%), transparent logo 28.8 KB → 7.5 KB (-74%) with transparency intact. No other target managed that across all four. The honest caveat is on the Conversion Lab page: from a GIF source WebP actually grew by 27%, so “WebP always wins” is a shortcut, not a law.
Quick answer by use case
- Photos: WebP (with a JPEG fallback). WebP is ~25–35% smaller than JPEG at the same quality. Reach for AVIF if you want the absolute smallest and your audience is on modern browsers.
- Logos, icons, simple graphics: SVG — it’s tiny and stays sharp at any size.
- Screenshots, images with text, transparency: PNG (or WebP, which also supports transparency).
- Animation: a short video (MP4/WebM) beats a heavy GIF; for simple cases, animated WebP.
Our own measurements back that table. PNG → WebP on four different kinds of image: photograph 1.88 MB → 303.1 KB (-84%), UI screenshot 18.0 KB → 7.3 KB (-59%), flat illustration 34.7 KB → 10.2 KB (-71%), transparent logo 28.8 KB → 7.5 KB (-74%) with alpha intact. One format won on all four, which is exactly why the recommendation is boring.
Why format matters for speed
Every kilobyte counts toward your Largest Contentful Paint. Serving a 2 MB JPEG where a 400 KB WebP would do slows the page, hurts mobile users, and drags ranking signals. The fix is usually: right format + right dimensions + sensible compression.
The honest exception is worth knowing before you write a blanket rule. Our 4.3 KB transparent GIF came out 5.4 KB as WebP (+27%) — against a tiny palette image a modern codec has nothing left to reclaim. “Convert everything to WebP” is right on average and wrong on files that are already small and already lossy.
A simple workflow
- Pick the format from the list above.
- Resize to the largest size the image is actually displayed at — not the camera’s full resolution.
- Compress to trim the last bytes.
For the format details, compare AVIF vs WebP vs JPEG and read What is WebP.
Do it free, in your browser
- Convert to WebP — the everyday win for web photos.
- Compress an image and resize an image — cut bytes further.
- PNG to SVG — vectorize a logo so it never pixelates.
The short version: WebP for photos, SVG for logos, PNG for transparency, and always resize + compress before you ship.
Format cheat sheet
| Format | Best for | Transparency | Animation | Compression |
|---|---|---|---|---|
| JPEG | Photographs | No | No | Lossy |
| PNG | Screenshots, flat graphics | Yes | No | Lossless |
| WebP | Photos and graphics alike | Yes | Yes | Lossy + lossless |
| AVIF | Smallest photos | Yes | Yes | Lossy + lossless |
| SVG | Logos, icons, line art | Yes | Yes (CSS) | Vector |
| GIF | Legacy animation only | 1-bit | Yes | Palette |
Read the table by what the image contains, not by habit. A flat logo saved as PNG might be 40 KB; the same logo as SVG is often under 5 KB and stays razor-sharp at any size. A photo saved as PNG, by contrast, can be several times larger than the JPEG or WebP version, because lossless compression can’t discard the subtle tonal detail a photo is full of. If you’re torn between the two classics, PNG vs JPG breaks it down.
The compatibility trade-off
Newer formats win on size but cost you reach. AVIF gives the smallest files, yet older browsers and some email clients still can’t display it. WebP is safe almost everywhere today. The professional move isn’t to pick one format globally — it’s to offer the modern format with a fallback and let each browser take the best it understands.
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Product hero" width="1200" height="800" />
</picture>The browser tries AVIF first, then WebP, then falls back to the JPEG. The width and height attributes reserve space so the layout doesn’t jump while the image loads — another Core Web Vitals win.
The compatibility trade-off has a price tag, and it is the cost of the fallback you ship alongside the modern format. Converting our WebP illustration back to the older formats:
| Conversion | WebP in | Result | Change |
|---|---|---|---|
| WebP → JPG | 10.8 KB | 23.7 KB | +119% |
| WebP → PNG | 10.8 KB | 94.0 KB | +769% |
| WebP → JPG | 7.6 KB | 16.5 KB | +118% |
The JPG fallback costs 23.7 KB (+119%) and the PNG one 94.0 KB (+769%) for the same picture. That is what <picture> with two sources actually weighs when the browser picks the wrong branch — so the honest question is not “is WebP supported” but “how much does my fallback cost the visitors who get it”.
When the choice isn’t obvious
- Photo that needs transparency? WebP or AVIF — they’re the only raster formats offering both strong compression and an alpha channel.
- Icon that must scale? SVG first; drop to PNG only if the art is too detailed to vectorise cleanly.
- Animation? Prefer an MP4/WebM video. A 10-second clip as a GIF can be several megabytes; as video it’s often tens of kilobytes.
FAQ
Is WebP always smaller than JPEG?
For photos, almost always — roughly 25–35% at the same visual quality. The gap narrows on very small images, and a heavily optimised JPEG can occasionally compete, so test when every byte counts.
Should I delete my JPEGs and PNGs?
No. Keep them as fallbacks and as masters. Converting to WebP from the original source gives a cleaner result than converting from an already-lossy JPEG.