How To Use AVIF Images In WordPress

0 min reading time

No official support

There is no official AVIF support. WordPress recently started to support WebP files with the 5.8 update called Tatum, released to the public on July 20, 2021. This update is a good indication that WordPress maybe keeps other file formats in mind. However, since it took more than a decade to support WebP, we don't expect support for AVIF to be implemented soon.

WordPress needs AVIF support for two reasons:

  1. Technicians and end-users often have to deal with page load speed problems with this CMS. Thus, AVIF can contribute to faster loading without causing any quality loss due to its minimal file size.

  2. WordPress is the world's most dominant CMS, with over 455 million websites in 2020. This means that WordPress powers about 35% of the web. Further statistics of WordPress show that in November 2020, over 409 million people view more than 20 billion pages every month.

graph showcasing how popular WordPress is

Security check

"Sorry, this file type is not permitted for security reasons."

Since version 4.7, the WordPress core has implemented a security check for uploading files. WordPress checks the file extension of your uploaded files and rejects files that do not match their pattern. You experience the same behavior when trying to upload SVGs.

The same applies to modern image formats. To date, WordPress does not support viewing or uploading AVIF images or other modern formats natively.

We could argue that AVIF is a new extension. Considering that WebP is more than ten years old and was just recently adopted, the question arises whether WordPress will ever add support for modern image formats. Fortunately, there are several ways around this security check.

Nowadays, many plugin solutions exist from image CDN providers to automatically convert your uploaded images to modern formats on the fly. We can also disable the security check for uploading AVIF files if you want to do the manual work.

Using an image CDN Plugin

Several plugin solutions exist that originate in image CDN providers. Most of them offer a simple setup routine with automatic conversion. You don't have to deal with code or complex settings. Most plugins change the HTML content of your post to replace the base URL with their endpoint so that images are loaded via the CDN.

Imagekit

Imagekit offers a forever-free plan with unlimited requests and transformations. You have a 20GB media library storage with unlimited transformation storage. They provide a complete set of image-related features and fast email support. No credit card is required.

Homepage · WP Plugin · WP Tutorial · AVIF article

Cloudinary

Cloudinary offers a free forever plan with no credit card required. They use credits to track your usage, with a free plan offering 25 credits. You can either spend them on 25k transformations, 25GB of managed storage, or 25GB of net viewing bandwidth. They also provide video transformation and access to an API, remote fetch, auto-backups, and revision tracking. More advanced pricing plans allow for more conversions, backups to your S3 bucket, auto-tagging based search, access to a whole palette of add-ons (e.g., background removing).

Homepage · WP Plugin · WP Tutorial · AVIF article

ImageEngine

ImageEngine offers a free 30 day trial with no credit card required. You can deliver up to 100GB of data through their global CDN. They claim to have a more effective optimization when it comes to mobile devices. They call it 'device-aware optimization'. More advanced plans offer more conversions, in-app optimization, and dedicated edge servers.

Homepage · WP Plugin · WP Tutorial · AVIF article

Shortpixel

Shortpixel offers many plans, from a free plan for 150 image conversions per month to a plan that scales up to an unlimited amount. They automatically scale down large images and are compatible with other WordPress plugins like WooCommerce. They also come with a Cloudflare integration and automated backup solutions.

Homepage · WP Plugin · WP Tutorial · AVIF article

IMGhaste

IMGhaste uses an approach that does not rewrite URLs but uses Client Hints. This plugin registers a Service Worker, providing Progressive Web App functionalities to your website to intercept your Images. A 708 gzipped bytes script automatically detects the best possible image required by your end-user. IMGhaste offers a free tier with 1000 credits and paid plans starting at 20$ per month.

Homepage · WP Plugin · WP Tutorial · AVIF article

TwicPics

TwicPics comes with a lightweight, unobtrusive JavaScript helper. This script analyzes the browsing context and automatically detects when to load your media and which transformations it should apply to them. They offer a free plan for 3GB of CDN bandwidth, with just 50ct per additional GB. You can upload unlimited master & tailored images with infinite transformations. Priced plans allow for better organization, multiple websites, subdomains, and premium support.

Homepage · WP Plugin · WP Tutorial · AVIF article

Gumlet

Gumlet auto-resizes and compresses images. They offer multiple plans, including unlimited master images and image optimizations, no limit on cache storage, and detailed usage analytics. Their free plan provides usage of one website, 1GB of bandwidth per month with $1 per extra GB. More advanced plans offer unlimited websites, priority support, custom domains, complete reports and alerts, and fallback mechanisms.

Homepage · WP Plugin · WP Tutorial · AVIF article

Cloudimage

By automating the delivery process, Cloudimage makes your images look high-quality and load rapidly regardless of bandwidth by delivering them in the best possible format (WebP, AVIF, optimized JPEG), resolution, and quality. Plans start at a free price and scale as demand goes higher.

Update: The plugin hasn't been testet with the latest 3 major releases of WordPress. It may have compatibility issues.

Homepage · WP Plugin · WP Tutorial

Modern Images WP

Adam Silverstein, a Developer Relations Engineer at Google who regularly contributes to the WordPress core, has developed this plugin to specify the default image format used for sub-sized images generated by WordPress.

WP Plugin · WP Tutorial

Manually uploading

WordPress restricts files that do not match its list of Internet media types, also known as content types or mime-types. The MIME type is a two-part identifier for file formats and format content transferred on the Internet. It is pretty simple to explain: A media file consists of a type and a subtype that defines content and file extension. An HTML file has the mime-type text/html, and a jpg has the mime-type image/jpeg.

example showing mime typesWordPress uses these mime types. They have a list of files they allow and a list of files they disallow. There are several methods to change this behavior and add mime types.

Solution 1: Funtions.php

Functions.php is a file that appears on every theme in WordPress and contains basic functionalities. You can open it by going to Appearance and choosing the Theme Editor. If a warning appears, confirm you know what you are doing. Select your active theme in the right sidebar, and below you will find all theme files listed, including functions.php.

place where the functions.php is locatedClick to open the file and scroll down to the bottom. Create a new line after the end of the file, and add the following. This code will allow you to upload AVIF files just like you upload any other image. If you wish to add more support for all the new image formats, copy the code below.
1function allow_modern_images( $mime_types ) {
2  $mime_types['webp'] = 'image/webp';
3  $mime_types['heic'] = 'image/heic';
4  $mime_types['heif'] = 'image/heif';
5  $mime_types['heics'] = 'image/heic-sequence';
6  $mime_types['heifs'] = 'image/heif-sequence';
7  $mime_types['avif'] = 'image/avif';
8  $mime_types['avis'] = 'image/avif-sequence';
9  return $mime_types
10}
11add_filter( 'upload_mimes', 'allow_modern_images', 1, 1 );

Solution 2: FTP Upload

Another way to bypass the restriction is to upload your files via FTP. Connect to your server and drop your images in the upload folder, where most of your current photos should be saved. If you don't know how to access your files directly, please ask your web host. Most providers offer great tutorials.

Solution 3: Mime-Type Plugins

There's a considerable disadvantage when modifying the functions.php. It's theme-related. Whenever you switch a theme or update your current one, the shortcode snippet will be gone. Multiple plugin solutions exist for this issue:

  • WP Add Mime Types
  • Lord of the Files

To quote: WordPress relies primarily on name-based validation when deciding whether or not to allow a particular file, leaving the door open for various kinds of attacks. Lord of the Files (previously known as "blob mimes") adds to this content-based validation and sanitizing, ensuring that files are what they say they are and safe for inclusion on your site.

screenshot of the mime type plugin website

No automatic conversion

Uploading images is an excellent thing, but a colossal problem remains. For every image you want to serve to your users, you need to convert it manually. Bulk converters like avif.io offer a solution to convert multiple files. However, using the HTML picture tag remains. A more straightforward idea would be an image plugin that automatically converts images to modern formats and offers the best solution based on your user's browser.

Summary

WordPress does not support AVIF and most likely won't support it shortly. Use a CDN plugin to enable support today.

Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.
We use Google cookies for our services.
OK