The Best Image Format for the Web in 2024 (AVIF vs. WebP vs. JPG, GIF, & PNG)
Sooner or later every blogger will use the Google Page Speed Insights Tool, and will wonder why it’s complaining that you’re not using next gen image formats. What is a next-gen image format and why does it matter? Well, you’re about to find out.
What’s the Best Image Format in 2024
Over the next few years AVIF will become the dominant image format on the web and everywhere else. For a few reasons.
- AVIF is royalty free (AKA free)
- AVIF has superior compression (file-sizes) to any other free image format.
- AVIF supports transparency (like png files), multiple images strung together (like GIF files), HDR, wide color gamut, etc.
AVIF is just a significantly better free image format than everything else that currently exists. It’s not close, AVIF will win the image format war… Eventually.
Unfortunately, AVIF is currently not supported by all browsers (looking at you Safari). Nor is it officially supported in WordPress (you have to do some coding to get it to work). Nor is it supported by my favorite image tool Canva.
This will all change in the next few years. But, until then it makes moving everything over to AVIF quite a challenge. To the point where the juice probably isn’t worth the squeeze for you just yet (unless file sizes are critical to your website)
There is a WordPress plugin called ShortPixel that can convert your images to AVIF automatically. But, as of this writing that requires you to manually edit your WordPress configuration before it will work. Which will be a challenge for most non-technical folks out there.
So what should you do? Wait? Use another image format? Stick with png, jpg, and gif forever? Let’s answer that question.
What’s the Second-Best Next-Gen Image Format?
Your page speed tool likely mentioned all sorts of image formats (JPEG 2000, JPG XR, etc.). But, they’re all outdated You can safely ignore all formats that aren’t AVIF (mentioned above), HEIC or WebP.
HEIC
HEIC is notable because it’s Apple’s codec and it’s actually pretty great. It has all the same features as AVIF and Apple has been using it behind the scenes on their iPhones since iOS 11 released in September 2017. So this has been saving a lot of space on your iPhones for a long time now without you realizing it.
I hear you asking ”Wait, if an amazing image format has existed for 5+ years now then why hasn’t HEIC taken over the web already?”
Well, there are these patents… So HEIC is not exactly free.
Which probably explains why HEIC is currently officially supported by 0 browsers. You can safely ignore this format for the web
WebP
WebP will lose to AVIF because it just doesn’t offer the compression that HEIC or AVIF do. But, it has most of the other big features.
WebP is a single format that can do all the things that PNGs (transparency), GIFs (short vids), and JPGs (compression) can do. And to top it off in a best case scenario you might shave 25% off your file sizes if you’re going for compression.
Even better, WebP has a lot more support than AVIF currently does. Most major web browsers already support it, WordPress added support in June 2021, and ShortPixel can automatically convert your files to WebP without any crazy hacks.
So should you run out and convert all your images to WebP? There’s not a compelling reason not to if you badly want to save space or impress the ladies.
But, before you do that lets go ahead and visit our old friends PNG, GIF, and JPG and make the case for sticking with them.
The Case For Sticking With PNG, GIF, and JPG
So I’d argue if you’ve done the following that maybe there’s not a great reason to put a lot of effort into migrating your images to new formats.
- Properly size your images (in pixels) for the space you have on the web page.
- Use a CDN.
- Run you images through a compression plugin like ShortPixel or a tool like Canva before you upload to your site.
Why? Because you’re really not going to trim very much off of your image file sizes. At most you’ll save 25% with WebP, but that’s not a guarantee. Oftentimes it’ll be closer to 10% gains. Meaning if you served 200k worth of images previously, you’d now be serving 180k worth of images. That’s not going to impact your load times or network bill by all that much.
Worse, you’ll likely now have to keep track of multiple sets of images and serve them both up in the HTML in case you encounter a browser like Internet Explorer that doesn’t currently support WebP.
Next-gen formats are a lot of work for not a lot of gain at this exact moment in time. Made worse by the fact that once you finally get a nice WebP workflow going AVIF will quickly become the new standard.