AVIF vs WebP vs JPG: which is better for a website, measured
For a website, serve AVIF first with a WebP or JPG fallback. We ran our reference photo, a screenshot of our pricing page and a piece of flat art through one engine and kept the bytes. AVIF made the smallest file on all three, 55% under the JPG on the photo, and WebP came second each time. Part of the image converter.
By Sahadat HusainUpdated 8 min readFormats
Is AVIF better than WebP and JPG? The short answer
- Photos: AVIF wins by a wide margin. Our 576.8 KB reference photo, one of our photographs, is 273.9 KB recompressed as JPG, 218.9 KB as WebP and 123.9 KB as AVIF: 55% under the JPG. Our camera photo, also a JPEG, came out 52% under the JPG as AVIF.
- Screenshots and flat art: AVIF wins again. Our 1,121.1 KB screenshot of our pricing page is 72.3 KB as AVIF, 109.6 KB as WebP and 193.2 KB as JPG. The saving still depends on the picture.
- WebP is never the smallest here, and it is still the safe default. Nearly every browser in use reads it, and it beat JPG on all three of our files.
- For a website: serve AVIF with a WebP or JPG fallback. The image converter makes all three from one original. For a file you send to a person: JPG or PNG, which open everywhere.
AVIF vs WebP vs JPG file size, measured on 3 images
Three sources, one engine, the automatic quality on each output. The figures are the engine’s own, written into this page from its output on our reference files, so what you read is what our converter does with the same files.
Screenshot, 1,121.1 KB PNG
- JPG193.2 KB
- WebP109.6 KB
- AVIF72.3 KB
Reference photo, 576.8 KB JPEG
- JPG273.9 KB
- WebP218.9 KB
- AVIF123.9 KB
Flat art, 7.4 KB PNG
- JPG2.9 KB
- WebP1.3 KB
- AVIF0.8 KB
| Source | Original | JPG | WebP | AVIF | PNG |
|---|---|---|---|---|---|
| Reference photo (JPEG) | 576.8 KB | 273.9 KB | 218.9 KB | 123.9 KB | 994.3 KB |
| Screenshot (PNG) | 1,121.1 KB | 193.2 KB | 109.6 KB | 72.3 KB | 213.1 KB |
| Flat art (PNG) | 7.4 KB | 2.9 KB | 1.3 KB | 0.8 KB | 1.6 KB |
On the screenshot, AVIF leads clearly: it is 63% smaller than JPG and 34% smaller than WebP. Flat art is the same story at a smaller scale: 0.8 KB against 2.9 KB for JPG. On our reference photo, AVIF is 55% under the JPG and 43% under the WebP.
AVIF vs JPG on a photo: does the JPEG source matter?
Barely. Our reference photo arrived as a JPEG, so its AVIF is a second lossy save. On Auto it landed 55% under the recompressed JPG. We ran the same photo saved as PNG as well: 123.9 KB as AVIF against 273.9 KB as JPG, 55% under. The gap did not move, so the JPEG source did not shrink the saving.
Our camera photo shows a similar gap. It is a 9,804.3 KB JPEG, and at Auto it became 288.0 KB as AVIF against 605.5 KB as JPG, 52% under. The saving still depends on the picture, so measure your own before you pick: JPG to AVIF and PNG to AVIF show the bytes for each file.
AVIF vs WebP: what each does better
| AVIF | WebP | |
|---|---|---|
| Bytes on our reference photo | 123.9 KB | 218.9 KB |
| Bytes on our screenshot | 72.3 KB | 109.6 KB |
| Transparency | Yes | Yes |
| Animation | Yes, in current browsers | Yes, everywhere WebP is |
| Lossless mode | Yes | Yes |
| 10-bit colour and HDR | Yes | No, 8-bit only |
| Largest image | 65,536 × 65,536 per coded picture, larger as grids | 16,383 pixels a side |
| Browsers, caniuse, 30 September 2026 | 95.35% of users | 96.74% of users |
One of those rows decides more projects than the bytes do. WebP cannot hold an image over 16,383 pixels on a side, so a panorama or a print file goes AVIF or JPG.
AVIF vs WebP browser support in 2026
- JPG and PNG: everything, since the beginning.
- WebP: every current browser. Safari joined last, in version 14 (2020).
- AVIF: Chrome since 85 (2020); Firefox since 93 for still images and 113 for animation; Safari since 16 for still images and 16.4 (March 2023) for all of it; Edge since 121 (January 2024). What is left out is old software: iPhones that cannot update past iOS 15, old Android WebViews, and some mail clients and image viewers.
The percentages in the table are caniuse’s global figures, from its data of 30 September 2026: 95.35% of users for AVIF and 96.74% for WebP. They are close, and the gap is the long tail of old devices, which is why AVIF still wants a fallback and WebP mostly does not.
How to serve AVIF with a fallback
One element. The browser walks the sources from the top and takes the first type it can decode, so a 2020 phone gets the JPG and everything newer gets the AVIF, with no script and no server logic.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="A hillside at dusk" width="1200" height="800">
</picture>On WordPress and most site builders the same thing happens through an image plugin or the host’s CDN, which stores the three files and writes this element for you. Convert the originals once, in bulk, with the AVIF converter, and let the site pick.
Should you use AVIF or WebP on a website?
| Image | For a web page | To send to a person |
|---|---|---|
| A photo, from the camera or already a JPEG | AVIF, JPG as the fallback | JPG |
| A screenshot | AVIF, WebP as the fallback | PNG |
| A logo or flat art | AVIF or WebP; SVG if you have it | PNG |
| Anything with transparency | AVIF or WebP | PNG |
| An animation | WebP | GIF, or a video file |
| A panorama over 16,000 pixels | AVIF or JPG | JPG |
Read the full guide: Best image format: JPG, PNG, WebP, AVIF, HEIC and GIF explained.
Questions
- Is AVIF better than WebP?
- On bytes, yes on all three of our files: our reference photo was 123.9 KB as AVIF against 218.9 KB as WebP, 43% smaller. WebP opens in slightly more browsers, which is why AVIF first and WebP as the fallback is the usual pairing.
- Is AVIF better than JPEG?
- Smaller, yes, by an amount that depends on the picture. Our camera photo, a JPEG, came out 52% smaller as AVIF than as JPG at Auto, and our reference photo 55%. From the same photo saved as PNG the gap was 55%, so the image sets the saving, not the source format.
- Is WebP better than JPEG?
- Smaller, on every file we measured. On our reference photo, WebP was 218.9 KB against 273.9 KB for JPG. On our screenshot it was 109.6 KB against 193.2 KB, and on flat art 1.3 KB against 2.9 KB. The saving depends on the image, and JPG still opens in more places, mail clients included.
- Should I use AVIF or WebP?
- Use both on a website: AVIF first in a picture element, WebP or JPG as the fallback, so each browser takes the smallest file it can read. For a file you send to a person, use JPG or PNG, which open everywhere, mail clients and old viewers included.
- Is AVIF supported by all browsers?
- Every current browser renders AVIF: Chrome since 85, Firefox since 93, Edge since 121 and Safari fully since 16.4. In caniuse’s data of 30 September 2026, 95.35% of users worldwide can see it. What cannot is old software: phones stuck on iOS 15, old Android WebViews, some mail clients. Serve a WebP or JPG fallback on a page.
- Does Safari support AVIF?
- Yes. Safari shows still AVIF images from version 16 and full AVIF, animation included, from 16.4, released in March 2023, on the Mac and on iPhone and iPad. iPhones that cannot update past iOS 15 cannot show it, which is the main reason a page keeps a WebP or JPG fallback.
- Is WebP still worth using now that AVIF exists?
- Yes, as the fallback and often as the only format. WebP opens for 96.74% of users in caniuse’s data of 30 September 2026, and holds animation everywhere. Its ceiling is 16,383 pixels a side. For most sites AVIF first and WebP second is the whole strategy.
- Which is better for images with transparency, AVIF or WebP?
- Both keep an alpha channel. Our soft-edged logo was 9.4 KB as WebP and 7.0 KB as AVIF: under its 18.1 KB lossless PNG, over the 4.2 KB PNG at Auto, which cut the edge to 7 alpha levels. On a 512 × 512 hard-edged logo, WebP won, 1.4 KB against 2.9 KB. Measure your own.
