AVIF vs WebP vs JPG: Which Image Format Should You Use?
AVIF vs WebP vs JPG compared on file size, quality, browser support, transparency and speed, with a worked example and a simple rule for choosing a format.
By Awais, Founder and editor-in-chiefPublished
For photos on a website, AVIF usually gives the smallest files, WebP comes a close second and works in every current browser, and JPG is the safe choice when an image has to open anywhere, including email, forms and older software. A practical rule: serve AVIF or WebP on your own site, and send JPG when you share a file with other people or upload it somewhere else.
Here is what each format is, how they compare, and when each one is the right pick.
The three formats in brief
JPG (JPEG) dates from the early 1990s and is still the universal photo format. It uses lossy compression: it throws away detail your eye is unlikely to notice. It has no transparency and no animation, but every camera, phone, browser, printer and office app can open it.
WebP was created by Google. It handles lossy and lossless compression, transparency and animation in one format. Google states that lossy WebP images are 25–34% smaller than comparable JPEGs at equivalent quality, and lossless WebP images are 26% smaller than PNGs (Google for Developers). Its maximum size is 16,383 × 16,383 pixels.
AVIF is based on the AV1 video codec from the Alliance for Open Media. Like WebP it supports lossy and lossless compression, transparency and animation, and it can also store HDR and wide colour. It usually compresses photos even better than WebP, but it is slower to encode.
Side-by-side comparison
| JPG | WebP | AVIF | |
|---|---|---|---|
| Compression | Lossy | Lossy or lossless | Lossy or lossless |
| Typical file size for a photo | Largest | Smaller | Usually smallest |
| Transparency | No | Yes | Yes |
| Animation | No | Yes | Yes |
| HDR and wide colour | Limited | Limited | Yes |
| Encoding speed | Fast | Fast | Slow |
| Opens in current browsers | Yes | Yes | Yes |
| Opens in older software and forms | Yes | Often not | Often not |
Browser support in 2026
All three formats now work in every major browser, which was not true a few years ago. According to MDN’s image format guide:
| Format | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| JPG | All versions | All versions | All versions | All versions |
| WebP | All current versions | All current versions | All current versions | 14 and later (macOS Big Sur or later) |
| AVIF | 85 and later | 121 and later | 93 and later | 16.1 and later |
The weak spot is not browsers but everything else. Upload forms, email clients, older photo editors, printing services and some social apps still reject WebP and AVIF files, or convert them badly. That is why so many people search for ways to turn a downloaded WebP back into a JPG.
A worked example
To show the kind of difference you can expect, here is an illustrative example, not a benchmark. Imagine one detailed outdoor photo resized to 1,600 × 1,200 pixels and saved at settings that look about the same on screen:
| Format and setting | Example file size | Compared with JPG |
|---|---|---|
| JPG, quality 80 | 320 KB | baseline |
| WebP, quality 80 | 230 KB | about 28% smaller |
| AVIF, quality 60 | 160 KB | about 50% smaller |
Real results depend heavily on the picture. Smooth skies, studio portraits and product shots on plain backgrounds compress very well in AVIF. Fine textures such as grass, gravel and fabric shrink less. Quality numbers also don’t line up between formats: AVIF at 60 is not “worse” than JPG at 80, because each encoder uses its own scale. Always compare by eye at 100% zoom.
You can try this with your own photos in Compress Image, which can save JPG, WebP and AVIF in your browser and shows the new file size before you download it.
When to use each format
Use JPG when…
- You are sending a photo to someone else, by email or chat.
- A form, portal or printer asks for JPG, or doesn’t mention the format.
- The image must open on older computers or in office software.
- You need the fastest possible encoding, for example in bulk exports.
Use WebP when…
- You publish images on your own website and want smaller files with no compatibility worries in browsers.
- You need transparency but a PNG is too big. Lossy WebP with transparency is often far smaller than a PNG.
- You want a simple animated image that is lighter than a GIF.
Use AVIF when…
- Page speed matters and you can spend more time encoding, for example for a hero image or product photos that are created once and viewed many times.
- You want the smallest file at a given quality, especially for photos with smooth areas.
- You publish HDR or wide-colour images.
What about PNG?
PNG is lossless. Keep it for logos, icons, screenshots and diagrams with sharp edges and few colours. For photos, PNG files are usually several times larger than a JPG of the same picture.
How to serve modern formats safely on a website
You don’t have to choose just one. The HTML picture element lets the browser pick the best format it supports and fall back to JPG:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Lake at sunrise" width="1600" height="1200">
</picture>Many content management systems and image CDNs do this automatically. Always set width and height on the image so the page doesn’t jump while it loads.
Converting between formats
- Got a WebP or AVIF file that won’t open or upload? Convert it with WebP to JPG or AVIF to JPG.
- Got iPhone photos in HEIC? See how to convert HEIC to JPG.
- Need a photo under a strict KB limit for a form? See how to reduce image size in KB.
Each conversion of a lossy file loses a little detail, so convert from the best original you have, and don’t convert the same image back and forth.
What about JPEG XL?
JPEG XL is another modern format with strong compression and a lossless way to repack existing JPGs. Safari has supported it since version 17, and support has only recently started to arrive in the newest versions of Chrome, Edge and Firefox. Until it works everywhere, treat it as an extra option behind a fallback, not a replacement for JPG.
FAQ
Is AVIF better than WebP?
For file size, usually yes: AVIF tends to produce smaller photos at the same visual quality. WebP encodes faster and is supported by more non-browser software. Both are good choices for websites.
Does converting JPG to WebP or AVIF improve quality?
No. Converting can make the file smaller, but it can’t bring back detail the JPG already lost. Start from the original photo when you can.
Why won’t my WebP image upload to a form?
Many forms only accept JPG or PNG. Convert the WebP to JPG first, and the upload should work.
Should I still use JPG in 2026?
Yes, for sharing and uploading. JPG remains the format that opens everywhere. On your own website, WebP or AVIF will usually load faster.