Using AVIF or WebP to Optimize Web Performance

All web performance experts point to images as the main reason for a poor user experience on a website. In reality, it is also the easiest problem to fix in web performance, since images account for an average of 50% of a web page's total weight.

In addition to sizing images to their displayed dimensions and adding responsive images to serve optimized media on mobile devices, it is essential to use modern image formats such as WebP or AVIF.

The WebP Format: A Major Shift

Google launched the WebP format in 2010 to speed up website loading times. The WebP format allows images to be displayed at high quality with smaller file sizes than the most well-known formats: JPG and PNG.

Lossless WebP images are up to 34% lighter than PNGs.

The AVIF Format: The Revolution in Online Images

AVIF is a new image format based on the AV1 video codec. The AVIF format offers even greater compression than WebP (which speaks for itself compared to PNG or JPG).

While it is difficult to estimate the size reduction precisely — as it depends on the media content, export settings, and target quality — the observed gain is around 26% compared to PNG, and 25 to 34% lighter than JPG.

Format support expanded significantly in 2023 with Safari's adoption. According to Can I Use, approximately 96% of global users support the AVIF format as of late 2024. This effectively means that all users likely to browse your website will see an image in AVIF format if one is provided.

The Importance of Offering Multiple Image Formats

There is no need to choose a single format to serve your users — using the picture tag allows you to offer as many formats as you wish.

By providing AVIF, WebP, and JPG (or PNG if transparency is required for the visual in question), you ensure that users can always see your image, and that the lightest format compatible with their browser is used.

In March 2024, Google indicated that GoogleBot (used to crawl your website's pages) does not support the AVIF format — a statement that reaffirms the importance of continuing to serve as many formats as possible.

Image optimization will significantly improve your website's web performance. If applicable, also consider optimizing your videos by offering WebM and AV1 formats in addition to MP4.

How to Serve WebP Images on WordPress?

On WordPress, plugins such as Imagify can be used to optimize your images in bulk and convert them to WebP.

In order to serve the format without modifying your site's source code, Imagify dynamically modifies the page's DOM. A caching plugin such as WP Rocket will be essential to avoid slowing down your server response time.

As a web performance consultant, I can handle the installation and configuration of these WordPress plugins dedicated to improving WordPress web performance.

How to Convert Images to WebP or AVIF Online?

Many online tools allow you to convert a PNG or JPG image to AVIF or WebP format. Personally, I use the free website Online Convert Free, though many free alternatives exist.

For larger players, it is also possible to work with companies specializing in image delivery (such as Akamai or Cloudinary), which handle on-the-fly optimization of your media stored in buckets using parameters (weight, size, format, crop, etc.) in your site's media URLs.

How to Export Images in WebP with Photoshop?

If you create visuals or images using Adobe Photoshop, it is possible to export images directly in WebP format from the software.

To do so, use the File menu, select Save a Copy (or use the shortcut Alt + Ctrl + S), choose your desired location, and select WebP from the dropdown menu. Test the different quality settings to find the one that suits you — everyone's requirements may vary.