Use WebP for photos on the web. In our test it was 45–50% lighter than JPG with no visible loss, and 96.7% of browsers support it. Keep PNG for screenshots, logos and graphics with transparency. Keep JPG for email, print and legacy systems. Below are the numbers from one image run through our converter.
How WebP, JPG and PNG differ
WebP is an image format from Google that supports lossy and lossless compression, transparency and animation. JPG (the 1992 JPEG standard) is lossy only and has no alpha channel. PNG is lossless and keeps transparency: every pixel is stored exactly, so files get big.
Lossy compression throws away detail the eye barely sees. On a photo you will not notice it. On a screenshot with small text, artifacts show up around the letters. So you pick a format per image type, not one format for the whole site.
| Feature | JPG | PNG | WebP |
|---|---|---|---|
| Compression | Lossy | Lossless | Both |
| Transparency | No | Yes | Yes |
| Animation | No | No (APNG is separate) | Yes |
| Browser support | All | All | 96.7% per caniuse |
| Best for | Email, print, old CMSs | Screenshots, logos | Photos and graphics on the web |
The test: one image, four formats
The source is a photorealistic 4096×4096 portrait. We saved it as JPG at quality 85 (sips on macOS) and as lossless PNG. Then we ran the JPG through our converter to WebP and AVIF with default settings. The second run used the same image scaled to 1600×1600, a size that actually ships on a page.
| Format | 4096×4096 | 1600×1600 | vs JPG |
|---|---|---|---|
| JPG, quality 85 | 3.93 MB | 663 KB | — |
| PNG | 20.78 MB | 3.17 MB | 5.3× and 4.8× heavier |
| WebP | 1.96 MB | 362 KB | −50% and −45% |
| AVIF | 2.44 MB | 440 KB | −38% and −34% |
We checked quality with SSIM, where 1.0 means a perfect match with the source. At 1600×1600, WebP scored 0.990 and AVIF 0.995. You cannot see the difference. AVIF came out heavier than WebP here: with default settings our converter keeps more detail in it. Results depend on the image and the encoder settings, so test your own files.
Which format to pick for each job
The short rule: anything shown on a page goes out as WebP. Keep JPG and PNG for places that do not accept WebP. By image type:
- Photos, banners, product cards — WebP: 45–50% less weight in our test
- UI screenshots, diagrams, logos with small text — PNG or lossless WebP, so sharp edges stay clean
- Graphics with transparency — PNG or WebP; JPG has no alpha channel
- Email, print, uploads to old CMSs and marketplaces — JPG, because everything accepts it
- Large photos where every kilobyte counts — compare WebP and AVIF on your own file
JPG is still a good fallback. Every app opens it, and phones and cameras decode it in hardware. But at low quality JPG shows blocks and halos, and it fills transparent areas with a solid color.
Try it on your own image
Drop any photo into the mini converter below. It saves the file as WebP and shows the size before and after. The full tool also offers AVIF and a quality slider. Free, no sign-up.
Serving WebP with a JPG fallback
You do not have to choose one format. The <picture> element lists the options, and the browser takes the first one it can show. An old browser skips the source tags and loads the JPG from img.
<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>Always set width and height on img. The browser uses them to reserve space before the file loads, so the layout does not jump. That keeps CLS, one of the Core Web Vitals, low. If a CDN serves your images, it can pick the format from the Accept header, and the markup stays a single img.
The cheapest performance win on most sites is re-encoding the ten heaviest images.
Moving a site to WebP in 4 steps
- Find the heaviest images: the Network tab in DevTools with the Img filter, or our SEO audit, which checks image weight and formats
- Scale them to the size they really take on the page — a 4096 px photo in an 800 px block wastes bandwidth
- Convert to WebP and keep the originals: each new lossy pass costs a bit more quality
- Serve WebP via <picture> or your CDN, then measure again — page weight should drop
FAQ
Is WebP better than JPG?
For the web, yes. At the same visual quality WebP is smaller: 45–50% in our test and 25–34% in Google data. JPG only wins on compatibility outside the browser.
Do all browsers support WebP?
Almost all: caniuse puts it at 96.7% of users. Chrome shows WebP since version 32, Firefox since 65, and Safari on iOS since 14. For the rest, serve a JPG through <picture>.
Do I lose quality converting JPG to WebP?
A little, since it is another lossy pass. In our test the WebP SSIM against the source was 0.990, and the eye sees no change. Keep your originals and convert from them, not from compressed copies.
Should I use WebP or AVIF?
Start with WebP: support is wider and encoding is faster. Try AVIF on large photos and compare sizes. In our run with default settings AVIF came out heavier than WebP but closer to the source by SSIM.
Tools and sources
The converter and the compressor are free, no sign-up. Sources for the format and browser numbers:
Join the discussion
Comments are coming to the App-Kit blog soon. Got a correction or a question?
Send feedback