If you want fast-loading pages and small files, the format you pick matters a lot. Here is the short version, then the details, then a comparison table you can actually use when deciding.
The quick answer
- AVIF gives the smallest files at a given quality, typically 40 to 50% smaller than JPEG and about 20% smaller than WebP. Support is now good in current browsers but older phones and desktops may not decode it.
- WebP is a bit larger than AVIF but has wider, more mature support and encodes several times faster. A safe default for the web.
- JPEG is the most compatible format ever shipped. Use it when something must open absolutely everywhere, including email clients, old office software and upload forms that check the extension.
Side-by-side comparison
Size figures below are what you should expect for a typical photograph at matched visual quality. Flat graphics, screenshots and images with text behave differently, and for those a lossless format is usually the right call.
| Feature | JPEG | WebP | AVIF |
|---|---|---|---|
| File size, same visual quality | Baseline (100%) | About 65 to 75% of JPEG | About 50 to 60% of JPEG |
| Transparency (alpha) | No | Yes, 8-bit alpha | Yes, 8-bit alpha |
| Animation | No | Yes | Yes (image sequences) |
| Lossless mode | No (in practice) | Yes, usually smaller than PNG | Yes, but rarely worth it |
| HDR and 10-bit colour | No, 8-bit only | No, 8-bit only | Yes, 10 and 12-bit, HDR |
| Progressive loading | Yes | No | No |
| Blink (Chrome, Edge, Opera, Android) | Yes | Yes | Yes |
| Gecko (Firefox) | Yes | Yes | Yes |
| WebKit (Safari, every iOS browser) | Yes | Yes since Safari 14 | Yes since Safari 16, fuller in 16.4 |
| Encode speed | Fastest | Moderate | Slowest, often 5 to 10 times WebP |
| Decode cost | Very low | Low | Noticeably higher |
| Maximum dimensions | 65535 x 65535 | 16383 x 16383 | Very large, in practice tiled |
Two rows deserve a comment. WebP's 16383 pixel ceiling sounds academic but it does bite on panoramas and print scans, which simply fail to encode. And the lack of progressive loading in WebP and AVIF means a large hero image appears all at once rather than sharpening gradually, so on slow connections a well-sized JPEG can feel faster even when it is bigger.
File size and quality in practice
At the same visual quality, AVIF usually wins on size, WebP is in the middle, and JPEG is the largest. For photos, both AVIF and WebP keep detail better than JPEG at low file sizes, because JPEG shows blocky 8x8 artifacts sooner while AVIF tends to smooth fine texture instead. That smoothing is also AVIF's weakness: at aggressive settings it can make skin, grass and fabric look slightly plastic even though the file has no obvious blocks.
Quality numbers are not comparable across formats. Quality 75 in JPEG, WebP and AVIF are three different things. Our image compressor maps the same 20 to 95 slider onto each codec's own scale (for AVIF it is translated to the encoder's constant-quality level) so the slider means roughly "how much to keep" whichever format you choose. The default of 65 is a good balance for photos on the web; go up to 80 for anything people will look at closely.
Transparency and animation
WebP and AVIF support transparency, JPEG does not. If you convert a transparent PNG to JPEG the background is flattened to solid white, which is what our tools do deliberately rather than leaving it black. Both WebP and AVIF also support animation, which can replace heavy GIFs at a fraction of the size, though for anything longer than a few seconds a muted looping video is smaller still.
Browser support
WebP is supported in essentially all current browsers, and any device that cannot show it is many years old. AVIF is supported in current Chrome, Firefox, Safari and Edge, but the Safari support landed later, so iPhones and Macs that have not been updated may still show a broken image. Because every browser on iOS uses WebKit, "does Safari support it" is the same question as "does iOS support it". When in doubt, ship WebP, or provide a JPEG fallback.
Which one to pick
- Photos on a website you control: AVIF, with a WebP or JPEG fallback in a picture element. If you do not want to manage fallbacks, WebP alone.
- Photos sent to other people, uploaded to forms, attached to email: JPEG. Compatibility beats a 30% saving when the recipient cannot open the file.
- Logos, UI graphics and anything with transparency on the web: lossless WebP, or PNG if the site must work in very old browsers.
- Screenshots with text: PNG or lossless WebP. Every lossy format, AVIF included, smears text edges.
- HDR photography or 10-bit content: AVIF is the only option of the three.
- Batch converting thousands of images: WebP, unless you have time to spare, since AVIF encoding is much slower.
What to do in practice
Convert your images to WebP or AVIF and keep quality around 60 to 80 for photos. You can do this privately, without uploading anything, with our image compressor or the dedicated PNG to WebP and JPG to WebP converters. To go smaller still, try PNG to AVIF or JPG to AVIF. If you need maximum compatibility, convert back with WebP to JPG or AVIF to JPG. For the quality settings and target sizes to aim for, see how to compress images for the web.