If you’re trying to decide between WebP vs AVIF for WordPress, the good news is that both are a big step up from JPEG and PNG, and either one will make your pages lighter. The differences matter at the margins: file size, image quality at small sizes, encoding speed, and how your host and plugins handle each one. This guide compares the two in plain terms and gives you the setup I use on client sites.
What WebP and AVIF are
Both are modern image formats designed to replace JPEG and PNG on the web. They handle photos like JPEG and transparency like PNG, in files that are usually much smaller for the same visual quality.
- WebP was developed by Google and has been supported by all major browsers for years. WordPress has accepted WebP uploads since version 5.8.
- AVIF is newer and based on the AV1 video codec. It’s supported by current versions of Chrome, Edge, Firefox and Safari. WordPress has accepted AVIF uploads since version 6.5, as long as the server’s image library supports it.
How they compare
File size
For photos, AVIF usually produces smaller files than WebP at the same visible quality, sometimes much smaller. For simple graphics, logos and screenshots, the difference is smaller, and occasionally WebP wins. The only way to know for a given image is to compare both.
Image quality
At aggressive compression, AVIF tends to smooth out fine texture such as skin, fabric and grass, rather than showing blocky artifacts. That looks clean in thumbnails but can make product photos look slightly plastic. WebP at high compression shows more traditional blurring and blocking. At sensible quality settings, most visitors can’t tell either one from the original.
Encoding speed
AVIF is slower to create. That does not affect your visitors, but it affects your server. Converting a large media library to AVIF on cheap shared hosting can take a long time and hit resource limits. Many optimization services do the conversion on their own servers to avoid this.
Support and compatibility
Browser support is no longer a real concern for either format. Compatibility issues today come from elsewhere: older email clients, some social preview generators, a few page builder features and hosting setups that can’t process AVIF.
What about animated GIFs?
If your site uses animated GIFs, they’re often the heaviest images on the page by a wide margin. Both WebP and AVIF support animation, but for anything longer than a few seconds, a short, muted, looping MP4 or WebM video is usually far lighter. Replace GIFs before you fine-tune anything else.
WebP vs AVIF for WordPress: my recommendation
For most business sites I serve AVIF where the browser accepts it, with WebP as the fallback, and keep the original JPEG or PNG on the server as the master copy. If that setup isn’t practical on your host, WebP everywhere is a perfectly good choice. The gap between WebP and AVIF is much smaller than the gap between either one and an oversized JPEG. If you would rather have it handled end to end, it is part of my WordPress speed optimization service.
A few practical points matter more than the format:
- Dimensions first. A 4,000-pixel AVIF is still too big for a 600-pixel slot. Resize before you worry about format.
- Check how the plugin serves images. Some plugins wrap images in a picture element with modern formats as sources. That works for normal images but not for CSS background images, which Elementor uses heavily. Server rewrite rules or CDN conversion catch those as well.
- Don’t double-optimize. Run one image optimization tool, not your host’s tool plus a plugin plus a CDN feature all compressing the same files.
- Keep originals. Store the original files so you can regenerate at different settings later.
How to set it up and confirm it works
The usual setup is an image optimization plugin or your CDN converting images automatically. Some caching plugins, such as LiteSpeed Cache with its image service, include this. Choose one route and configure it to create both formats if you want AVIF with a WebP fallback.
Start with a test before converting the whole library. Pick ten typical images, such as a hero photo, a team portrait, a product shot, a screenshot and a logo, convert them at your chosen settings, and look at them side by side with the originals on a phone and a large monitor. Faces and fabric show problems first. If they look right, roll the settings out to everything.
Then check it actually worked. Open a page in Chrome, open DevTools, go to the Network tab, filter by images and look at the Type column. You should see avif or webp, not jpeg or png. Check a section background image too, not just inline images, and check a product page if you run a store. On WooCommerce sites with large catalogs I convert in batches, often overnight, so the server isn’t overloaded. That kind of setup is part of my WooCommerce development work.
Quick checklist
- Resize images to their display size before thinking about format.
- Pick one tool to convert: a plugin or your CDN.
- Serve AVIF with a WebP fallback, or WebP everywhere if that’s simpler.
- Make sure background images are converted too.
- Spot-check product and portrait photos for over-smoothing.
- Confirm formats in the DevTools Network tab.
- Keep the original files as backups.
You might also find these useful: how to run a WordPress plugin audit for speed, step by step and why Elementor excessive DOM size happens and how to fix it.
Questions people ask me
Is AVIF always smaller than WebP?
For most photos, yes. For simple graphics and screenshots, the difference is small and WebP is sometimes smaller. Compare on your own images.
Do I still need JPEG fallbacks?
For browsers, rarely. But keep the originals on your server, and remember that some email tools and social preview systems still expect JPEG or PNG.
Will converting to AVIF improve my Core Web Vitals?
It can improve LCP when the LCP element is an image, by making it download faster. It will not fix slow servers or render-blocking scripts.
Can I upload AVIF files directly to WordPress?
Yes, from WordPress 6.5, if your host’s image library supports AVIF. If uploads fail or thumbnails are missing, ask your host to update the server’s image library.
Does WordPress convert my JPEG uploads to WebP automatically?
Not by default. WordPress accepts WebP and AVIF uploads, but converting JPEG and PNG uploads needs a plugin, such as the Modern Image Formats plugin from the WordPress performance team or a dedicated image optimization plugin.
Not sure your images are being served in a modern format at all? Get a free website review and I’ll check your formats, sizes and the setup behind them.
