WebP and AVIF are modern image formats that usually make smaller files than JPEG and PNG at a similar visual quality. Smaller images mean fewer bytes for every visitor to download, which is why they are worth serving wherever you can. How much smaller depends on the picture and the settings used to make the copy, so measure your own pages rather than trusting a headline figure.
Why image formats matter for performance
Images are the heaviest assets on most web pages. Serving a lighter copy of the same picture is one of the few optimisations that needs no change to your content or your theme.
WebP supports lossy and lossless compression, transparency and animation, and current versions of the major browsers display it. AVIF is newer and can compress further still; current versions of Chrome, Edge, Firefox and Safari display it too. A browser that cannot display either format should still receive the original JPEG or PNG.
How to serve WebP and AVIF on WordPress
Two jobs are involved: making the copies, and getting each browser the right one.
- Make the copies. An image conversion plugin creates WebP and AVIF copies of your uploads, either as you upload them or in bulk for the existing library. Some CDNs can create them at the edge instead, which needs no plugin but does need a CDN plan that offers it.
- Serve the right copy. Each browser should get the newest format it supports, and every other browser the original. That has to hold on cached pages too: a page cached for one browser must never be handed to a browser that cannot show its images.
Caching Out Pro does the second job, and leaves the first to the converter you already trust for a whole library. When WebP and AVIF copies exist on your server, it gives each browser the newest format that browser announces, keeps a separate cached copy of the page for each format, and gives everyone else the original. It recognises the copies made by most conversion plugins, never uses a copy that is larger or older than its original, and never sends your images anywhere. For a single heavy image, Pro can also compress it on your own server and make its copies – one image at a time, with a before / after view and one-click restore. Safari supports both formats but does not announce them, so it may receive the original images.
Image formats and lazy loading
A lighter format makes each image smaller; lazy loading stops images below the fold from downloading until a visitor scrolls to them. The two act on different images and add up, which is why image-heavy pages such as product galleries gain the most from both.
Further reading: Lazy Loading Images: The Right Way, the companion technique for the images a visitor never scrolls to.