Skip to main content

How to serve AVIF images

AVIF is an image format that is usually smaller than WebP at the same visual quality. The Google Page Speed Optimizer extension can create an AVIF copy of every JPEG and PNG image and show it on the storefront instead of the original.

warning

Browsers without AVIF support do not display these images. The extension does not fall back to WebP or the original image for them.

1. Install avifenc​

The extension converts images with the avifenc tool from the libavif library.

  • Install it with your system package manager:

    # Ubuntu / Debian
    sudo apt-get install libavif-bin

    # CentOS / RHEL (from the EPEL repository)
    sudo yum install libavif-tools

  • Check that the extension finds it:

    bin/magento mirasvit:optimize-image:validate

    avifenc must be listed as installed.

note

Older avifenc versions (before 1.0, as shipped with Debian 12 and Ubuntu 22.04) are supported as well.

2. Send AVIF files with the right content type​

Browsers display an AVIF image only when the web server sends it with the image/avif content type. Older web server configurations do not know the format and send .avif files as application/octet-stream.

  • Nginx: make sure /etc/nginx/mime.types contains the line below, then reload Nginx.

    image/avif avif;

  • Apache: add the line below to the virtual host configuration or to pub/media/.htaccess.

    AddType image/avif .avif

3. Enable AVIF images​

  • Go to Stores > Configuration > Mirasvit Extensions > PageSpeed Optimizer > Image Optimization.
  • Set Use AVIF images to Yes.
  • Set AVIF quality. The default 60 already produces files smaller than WebP.
  • Click Save Config and clear the Magento cache.

When Use WebP images is also enabled, images are served as AVIF where an AVIF copy exists and as WebP everywhere else. See Image optimization settings.

4. Generate AVIF copies​

AVIF copies are created by Magento cron, together with image optimization and WebP conversion. To create them right away, run:

bin/magento mirasvit:optimize-image:optimize --avif

The image statistics at the top of the Image Optimization settings show the AVIF Files count.

tip

If you change AVIF quality later, the next optimization runs convert the existing AVIF images again. You do not need to reset them.

5. Check the storefront​

  • Open a category or product page and open the browser's developer tools (Network tab, Img filter).
  • Product images should load from addresses ending in .avif.
  • Select one of them and check that the content-type response header is image/avif.

If an image has no AVIF copy, see Why an image has no AVIF copy.