The Best Image Formats for Website Speed in 2023

Best Image Formats for Website Speed: WEBP, AVIF, JPEG 2000, JPEG XL and APNG.

Have you recently reviewed whether you are using the best image formats for website speed? If not, it is now well worth your while to do so. Here's why.

Modern image formats like WEBP, AVIF, APNG, JPEG2000 and JPEG XL offer substantial advantages over traditional JPEG, PNG and GIF formats. These newer formats generally provide better images in smaller file sizes, thereby speeding up your website and improving the user experience for your website's visitors.

Browser support for the newer image formats is advancing quickly and it's important you keep abreast of which are the best image formats for your website. Failure to do so may result in your competitors' websites loading faster than yours, and that in turn may see you slide down the search enging rankings.

The best image formats to choose right now are different than they were even a year ago, thanks to more people switching to browser versions that support the better, newer image formats.

What's more, switching your image formats is one of the fastest and simplest things you can do to reduce your web page load times and provide your website visitors with an improved experience.

To demonstrate the potential gains you can make by switching to modern image formats, we will convert the JPEG image below to some of the newer formats. As a baseline, this colorful flower image by Denise Chan is 150KB in JPEG format.

JPEG format: 150KB
JPEG format: 150KB 

WebP image format

Google developed the WEBP image format to display high-resolution images with smaller file sizes - the aim being to achieve faster page load times and reduced storage space.

Google's WEBP compression study found that WEBP images tend to be 25-34% smaller than JPEG images of similar quality, and 26% smaller than PNG images. This enables WEBP images to load quicker which lessen data transfer requirements, thus improving your website's performance.

In our example, a straight conversion of our 150KB JPEG flower image produced a 97KB WEBP image - a 35% reduction in size, with only a minimal loss in quality (if any).

WEBP format: 97KB
WEBP format: 97KB

With WEBP, you no longer need to worry about browser compatibility. As of December 2022, approximately 97% of web audiences use a browser that supports WEBP images.

WEBP supports both lossless and lossy compression. "Lossless" compression means that you don't lose any of the original detail in the image, whereas "lossy" compression tolerates some data loss.

WEBP also supports alpha transparency, meaning that images can have transparent or translucent areas, as well as animation.

Since WEBP is widely supported by browsers, and given that it provides such substantial size reductions compared with JPEG images, the time has come to convert all your JPEG images to WEBP format.  

AVIF image format

AVIF is an image format based on the AV1 video codec. Like WEBP, it's designed to contain high-quality images in a small file size. AVIF format provides even smaller file sizes than WEBP, so may eventually supersede WEBP format.

Compared with JPEG images of similar quality, AVIF format can reduce file size by approximately 60%, so there is significant potential for improving website performance by switching to AVIF format, especially for image-heavy websites.

For our flower example, converting our 150 KB JPEG flower image to AVIF format produced a file size of just 54KB - a saving of 64%.

AVIF Flowers Example
AVIF format: 54KB

Unfortunately, as of December 2022, there is a catch with AVIF format.

As it stands right now, the browser support for AVIF is more limited than for WEBP, with only 79% of web audiences using browsers that support the AVIF image format.  This is a situation that continues to evolve though - you may wish to bookmark this page as we will keep it updated with the latest figures.  A move to AVIF seems likely to be very worthwhile in the near future.

JPEG 2000 image format

JPEG 2000 is a modern alternative to the conventional JPEG format that offers enhanced image quality and compression. It employs a sophisticated compression algorithm that reduces file size without sacrificing its visual integrity. In fact, JPEG 2000 can compress images 20-200% more than traditional JPEG compression.

Unfortunately, your attempts to convert JPEG images to JPEG 2000 format using online tools may well result in a larger file size.

In any case, JPEG 2000 format is best avoided for now due to its low browser coverage, with only 18% of web users currently using a compatible browser.

APNG image format

APNG (Animated Portable Network Graphics) is a modern format for animated images and is preferable to GIF format for several reasons.

First, APNG format supports 24-bit colors and alpha transparency.  In contrast, GIF format only supports 256 colors and does not support alpha transparency.  

Second, APNG files tend to be substantially smaller than GIF files. APNG format can provide clearly superior image quality while also delivering a 34% reduction in file size compared with GIF format.

APNG is a drop-in replacement for GIF format and you should switch to it now, given it provides both superior image quality and has broad browser support, with approximately 97% of global audiences using a browser that supports APNG format.

JPEG XL

JPEG XL is an up-and-coming image file format that may replace WEBP and/or AVIF formats in future. Developed by the Joint Photographic Experts Group (JPEG), this innovative format is designed to provide improved image quality and compression, using a more advanced compression algorithm that can reduce the file size of an image without significantly impacting its quality.

According to Google, the file size for JPEG XL images is approximately half that of traditional JPEG images of similar quality, which is a little better than WEBP format but not as good as AVIF format.

However, Cloudinary conducted a large-scale study and concluded that JPEG XL images are 10-15% smaller than AVIF images of similar quality, while also being up to three times faster to process.

As of December 2022, JPEG XL is not yet supported by any major browsers, but this is likely to change in the near future, so watch this space!

Conclusion

Recent advancements in image formats for the web mean that the time has come for you to move to modern image formats.  Doing so is a straight-forward method of improving your website speed.  For now, we recommend replacing your JPEG and PNG images with WEBP images, and switching any GIF images to APNG format.  Keep a close eye on developments with AVIF format though - it will not be long before that is the best option for maximizing website speed.

Web & UI StyleFaster Websites