AVIF vs WebP vs SVG: Image Format Guide
Not all image formats are created equal. A practical guide to choosing between AVIF, WebP, SVG, PNG, and JPEG for your website.
A client asked me last Tuesday what format their product images should be in. WebP? AVIF? Good old JPEG? I opened my mouth, realized I wasn’t sure, and mumbled something about “it depends.” So I spent my weekend testing. One photo, five formats, a spreadsheet, and way too much coffee later, I had actual numbers instead of guesses.
Here’s what I learned.
The Five Formats You’ll Encounter
JPEG has been the default for photographs since the 90s. It uses lossy compression, meaning it discards some data to keep files small. Works everywhere. No transparency support. You’ve probably saved thousands of these without thinking about it.
PNG is the go-to for anything that needs pixel-perfect sharpness or a transparent background. Screenshots, logos, icons. Lossless, so nothing gets thrown away. Downside is that files can get really big, especially for photos with lots of color variation.
WebP is what Google pushed as the JPEG killer. Supports both lossy and lossless modes, handles transparency, and typically produces files 25 to 35% smaller than JPEG at the same visual quality. Pretty much every browser supports it now.
AVIF is the newest one. Based on the AV1 video codec. It compresses even harder than WebP, sometimes 50% smaller than JPEG. The catch is that encoding is slower and some older browsers still choke on it.
SVG is not a raster format at all. It’s vector based, meaning it stores shapes and lines as math instead of pixels. Infinite scaling, tiny file sizes, perfect for logos and icons. Useless for photographs.
Same Photo, Five Formats
I took a 4000 by 3000 pixel landscape photo from my camera roll and exported it to every format. Quality was set to 80 for lossy formats. PNG was lossless (because that’s the point). SVG is excluded here since you can’t meaningfully convert a photo to vector.
| Format | File Size | Quality (my rating) | Browser Support |
|---|---|---|---|
| JPEG | 1.84 MB | 8/10 | 99.9% |
| PNG | 11.2 MB | 10/10 | 99.9% |
| WebP (lossy, q80) | 1.16 MB | 8/10 | 97% |
| AVIF (q80) | 742 KB | 7.5/10 | 92% |
Some takeaways that jumped out at me.
AVIF crushed the file size. 742 KB for a photo that was 1.84 MB as JPEG. That’s a 60% reduction. I zoomed to 200% and noticed slightly softer details in the grass area compared to JPEG, but at normal viewing distance on a phone or laptop, I honestly couldn’t tell.
WebP landed right in the sweet spot. Over a third smaller than JPEG, and the quality looked identical to my eyes.
PNG was ridiculous. 11.2 MB for one photo. That’s six times larger than JPEG for an image that looks the same on screen. Lossless is great in theory, but nobody needs to serve an 11 MB file on a mobile connection.
How to Pick the Right Format
Here’s the mental model I use now after running all these tests.
For photographs on a website: WebP is the safe bet. Small files, good quality, near universal support. If you want to push further and your audience skews modern browser, go AVIF.
For logos and icons: SVG, hands down. A logo that’s 45 KB as PNG drops to 2 KB as SVG and looks sharp at any size. There’s no reason to use raster for simple graphics.
For screenshots: PNG if you need every pixel crisp (documentation, bug reports). WebP if you’re publishing to the web and want smaller files.
For email: JPEG or PNG. Email client support for WebP and AVIF is still spotty. Outlook, for instance, doesn’t render WebP inline. Learned this the hard way when half my newsletter showed broken image icons.
For print: PNG or TIFF. You want lossless. This is not the time to optimize for web.
Where Browser Support Stands Right Now
I looked this up on caniuse.com while writing this, so these numbers are fresh as of March 2025.
WebP support sits at roughly 97% globally. Safari joined the party in iOS 14 (2020), and that was the last major holdout. You can serve WebP without a fallback at this point and be fine.
AVIF is at about 92%. Chrome, Firefox, Edge, and Opera all handle it. Safari added support in iOS 16 and macOS Ventura, which launched in late 2022. The gap is closing fast, but I’d still use the <picture> element with a WebP fallback if you go all in on AVIF.
SVG is universally supported for inline display. Has been for years. The only thing to watch for is that SVGs can contain scripts, so if you’re letting users upload SVGs, sanitize them server side.
Here’s a quick fallback template if you want to use AVIF with safety nets:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Your image description">
</picture>Browsers pick the first format they understand. Modern Chrome grabs the AVIF. Older Safari gets the WebP. Ancient browsers fall back to JPEG. Everyone sees something.
Converting Your Images
You can do all of this without installing anything. I use the image format converter on ImgPrism for quick jobs. Drop in a file, pick your output format, adjust the quality slider, and download. Everything runs in your browser. Your images never touch a server.
I converted all five versions of my test photo in about 90 seconds total. Batch mode handles multiple files at once too. I ran 24 images through it last week for a client project and the whole thing took maybe three minutes.
If you’re doing a full site migration, convert a few test images first. Check them on your phone, on a tablet, on a laptop. Make sure the quality is where you want it before you do everything at once. I skipped this step once and had to redo 60 product photos. Not fun.
What I Actually Use Day to Day
After all this testing, here’s my workflow. WebP at quality 80 for all web photos. SVG for every logo and icon. AVIF as an optional enhancement with a WebP fallback. PNG only for screenshots that need to be pixel perfect. JPEG almost never, unless I’m sending something to someone who explicitly needs it.
The numbers made the decision easy. When AVIF cuts your page weight by 60% and WebP by 37%, and both formats look fine on screen, there’s no reason to stick with JPEG for web delivery. Switch your images, watch your Lighthouse score climb, and move on with your life.
Related Tools and Reading
- Convert images between formats for switching JPEG, PNG, WebP, and AVIF
- Compress images to squeeze even more out of your file sizes
- Resize images before converting to avoid serving oversized files
- JPEG vs PNG vs WebP comparison for a deeper dive into those three formats