Images are the lifeblood of most modern websites. They grab attention, communicate brand personality, and keep visitors engaged. But they also tend to be the heaviest assets on a page, which means they can have a big impact on load times and performance. The good news is image compression has come a long way since the early days of the web, and there are some new options that can make a serious impact on your site’s speed, SEO, and conversion rates.
So, let’s dig into what you should know about next-gen image file types, and how they compare to the classics.
What to Consider When Choosing an Image File Format
Not all image formats are created equal. Before you decide which one to use, weigh these factors:
- Performance / Speed Smaller file sizes mean faster page loads, which means happier users (and better SEO rankings).
- Quality / Aesthetics Compression shouldn’t destroy your visuals. Crisp, high-quality images are especially important for products, photography, and brand identity.
- Browser Compatibility Even the sleekest new format won’t help if your users’ browsers don’t support it. Always check compatibility before rolling out a new standard across your site.
Next-gen Image File Formats
Most of us are familiar with the “big four”: GIF, PNG, JPG, and SVG. These formats aren’t going anywhere anytime soon. PNGs and JPGs still make sense in plenty of cases, and SVGs are unbeatable for logos and icons since they scale without losing sharpness. Even GIFs occasionally have their place for simple animations (though less so today).
But there’s a new wave of formats designed for the modern web: WebP, AVIF, and JPEG XL.
WebP
Developed by Google, WebP is widely supported across browsers and can make your images 25–34% smaller than JPEGs at the same quality.
Example of WebP image compression. Source: https://developers.google.com/speed/webp/gallery1
When to use it: If you’re only going to adopt one next-gen format, start here. It usually makes sense to use it over JPEG and PNG when AVIF isn’t an option.
AVIF
AVIF supports transparency and even animations, while delivering amazing compression. File sizes can be 50% smaller than JPEG and 20-30% smaller than WebP.
Example of AVIF image compression. Source: https://squoosh.app
When to use it: If you are willing to manually convert your images, this is almost always a better choice over JPEG, and sometimes over PNG (we recommend testing for this).
JPEG XL
JPEG XL is a newer format designed to replace JPEG, and has even better compression than AVIF.
When to use it: Honestly, don’t. As of now, browser support is minimal and development momentum has slowed (Chrome has already removed support for it). Unless things change, it’s sadly not worth investing in.
Want to dig deeper? Check out the MDN guide to all image file formats.
How to Convert to Next-gen Image File Formats
Converting your images doesn’t have to be a hassle. Here are your options:
- Cloudflare Polish: Our preferred method. It automatically converts images on the fly and compares the original vs. optimized version to ensure you always deliver the best-performing option. No manual work required.
- WordPress Plugins: Plugins from ShortPixel or Imagify can automatically convert and optimize your images for you.
- Manually: Use software like Photoshop or free online converters to save images as WebP or AVIF. This gives you control but can be time-consuming if you have a lot of images.
Conclusion
File formats are just one piece of the performance puzzle. Other techniques like lazy-loading, responsive image sizing, and a solid CDN setup can make just as much of a difference. If you’re not sure which format to go with, try testing your site using Lighthouse or DebugBear. And if you’d rather not stress about it, we’re always here to help you figure out the best approach for your site.