How to use AVIF images in WordPress

AVIF images compress up to 50% smaller than JPEG files while maintaining the same visual quality. WordPress 6.5 added native AVIF support, allowing you to reduce page load times and improve user experience without sacrificing image clarity.

You will learn how to check your server’s AVIF compatibility, convert existing images to AVIF format and serve them automatically to supported browsers. Your site will load faster, use less bandwidth and deliver sharper images across all devices.

Why AVIF improves WordPress performance

AVIF delivers smaller file sizes than JPEG, PNG and WebP without visible quality loss. This reduces bandwidth consumption, speeds up page rendering and improves search engine rankings through faster load times.

The format supports transparency like PNG and high dynamic range imaging for professional photography. Modern browsers including Chrome, Firefox, Safari and Edge all render AVIF natively, covering over 90% of global web traffic.

• File sizes compress up to 50% smaller than JPEG at equivalent quality levels
• Images load 30% faster than WebP on average
• Transparency support matches PNG capabilities
• HDR support preserves detail in professional photography

Check AVIF compatibility on your server

WordPress requires the ImageMagick library to process AVIF files. You need to verify your server has this library installed and updated before uploading AVIF images.

1. Access the Site Health tool.
   Log into your WordPress admin area and navigate to Tools then Site Health. This displays your server’s technical capabilities.
2. Open the server information panel.
   Click the Info tab at the top of the Site Health page. This reveals detailed server configuration data.
3. Expand the media handling section.
   Scroll down to Media Handling and click to expand it. This section lists all image formats your server can process.
4. Verify AVIF support.
   Look for AVIF in the list of supported formats. If it appears, your server can process AVIF images. If it does not appear, contact your hosting provider to request ImageMagick installation or upgrade.

Your server is now confirmed as AVIF-ready. You can proceed to convert and upload AVIF images to your WordPress media library.

Convert images to AVIF format

You need to convert existing JPEG and PNG images to AVIF before uploading them to WordPress. This conversion can happen through desktop software or browser-based tools depending on your workflow preferences.

Using desktop image editors

GIMP supports AVIF export natively in recent versions. Open your image file, select File then Export As and choose AVIF from the format dropdown. Adjust quality settings between 50 and 90 for the best balance of file size and visual clarity.

Adobe Photoshop requires a third-party plugin for AVIF export. Install the AVIF plugin from the AV1 Image Format project, restart Photoshop and access AVIF export through the standard Save As dialogue.

Using browser-based conversion tools

Squoosh provides free AVIF conversion directly in your browser without uploading files to external servers. Visit squoosh.app, drag your image into the interface and select AVIF from the format options. Adjust quality settings in the right panel and download the converted file.

Alternative tools like Convertio and CloudConvert offer batch processing for multiple images. These services upload your files to their servers for conversion, so avoid using them for sensitive or confidential imagery.

Serve AVIF images with fallback support

Older browsers cannot display AVIF images. You need to configure automatic fallback to JPEG or WebP for visitors using unsupported browsers while serving AVIF to modern browsers.

Install an image optimisation plugin

Image optimisation plugins detect browser capabilities and serve the appropriate format automatically. This eliminates manual configuration and ensures all visitors see images regardless of browser support.

1. Choose a plugin with AVIF support.
   ShortPixel, Imagify, EWWW Image Optimizer and Optimole all handle AVIF conversion and delivery. Each plugin offers different features, so review their documentation before selecting one.
2. Install and activate the plugin.
   Navigate to Plugins then Add New in your WordPress admin area. Search for your chosen plugin, click Install Now and then Activate.
3. Configure AVIF conversion settings.
   Access the plugin’s settings page through the WordPress sidebar. Enable AVIF conversion and set quality levels between 75 and 85 for optimal results. Higher values preserve more detail but increase file size.
4. Process your existing image library.
   Most plugins offer bulk optimisation tools. Run this process to convert your entire media library to AVIF. This may take several minutes depending on library size.

Your WordPress site now serves AVIF images to supported browsers and falls back to JPEG or WebP for older browsers. Visitors experience faster page loads without compatibility issues.

Monitor server resource usage

AVIF conversion requires CPU and memory resources during processing. Large image libraries may exceed your hosting account’s resource limits during bulk conversion, causing temporary slowdowns or failed conversions.

We recommend processing images in batches of 50 to 100 files rather than converting your entire library at once. This prevents resource limit errors and allows your server to handle normal traffic during conversion. If you encounter memory errors, increase your WordPress memory limit to 256MB or higher.

AVIF images reduce ongoing bandwidth consumption after initial conversion. Smaller file sizes mean less data transfer per page load, which helps you stay within your hosting account’s resource limits during traffic spikes. Combine AVIF with WordPress acceleration features for maximum performance gains.

Further reading on image optimisation

Image optimisation extends beyond format selection. The Web.dev guide to image formats explains when to use AVIF versus WebP, JPEG or PNG based on image content and use case. Understanding these trade-offs helps you select the optimal format for each image type on your site.

Responsive images deliver different file sizes to different screen sizes, reducing bandwidth waste on mobile devices. The MDN responsive images guide covers the srcset and sizes attributes that control this behaviour. WordPress generates responsive image markup automatically, but understanding the underlying technology helps you troubleshoot issues and optimise delivery further.

Lazy loading defers image downloads until they enter the viewport, speeding up initial page loads. WordPress enables lazy loading by default for images below the fold. Review your theme’s implementation to ensure it works correctly with AVIF images and does not interfere with above-the-fold content rendering.

Wrapping up

Your WordPress site now serves AVIF images to supported browsers with automatic fallback for older browsers. You verified server compatibility, converted existing images and configured plugin-based delivery. Pages load faster, use less bandwidth and maintain visual quality across all devices.

Monitor your site’s performance over the next week using browser developer tools or services like PageSpeed Insights. Check that images load correctly across different browsers and devices. Review the WordPress FAQs for additional optimisation tips. Our managed WordPress hosting includes server-level optimisations that complement AVIF image delivery.

If you run into any trouble, get in touch and our team will be happy to help.