How To Use AVIF Images In WordPress

02.12.20 · 11 min read
"Sorry, this file type is not permitted for security reasons," is the wonderful answer you get when trying to upload AVIF images to WordPress. There is no official support. However, WordPress needs AVIF for two reasons: First, technicians and end users often have to deal with web speed problems that are widespread with this CMS. Thus, due to its incredibly small file size, AVIF can contribute to faster loading without causing any quality loss. Second, WordPress is the world's most dominant CMS with over 455 million websites in 2020. This means that about 35% of the web is powered by WordPress. Further statistics of WordPress show that in November 2020 over 409 million people view more than 20 billion pages every month.shows usage statistics of wordpress

Official Wordpress Support

The WordPress core has implemented a security check for uploading files since version 4.7. This means that WordPress checks the file extension of your uploaded files and rejects files that do not match their pattern. Most of you will know this due to the restriction on uploading SVGs. The same applies to modern image formats. To date, WordPress does not support viewing or uploading WebP images, AVIF images or other modern formats natively. We could argue that AVIF is a new extension. Considering that WebP is more than 10 years old, the question really arises whether WordPress will ever add support for modern image formats. Fortunately, there are several ways around this security check. If you are looking for an easy way to automatically generate images and offer the user the best, skip the next lines and take a look at the plugin section.

Mime Types

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 that is transferred on the Internet. Yes, we copied this explanation from Wikipedia. It is quite simple to explain: A media type consists of a type and a subtype that defines content and file extension. An HTML file has the mime type 'text/html', an jpg 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 do not allow. There are several methods to change this behavior and add mime types. See below.

Functions.php

The old powerful and glorious functions.php. It 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, do not hesitate to ignore it. You know what you are doing. Select your active theme in the right sidebar, and below you will find all theme files listed, including the functions.php.place where the functions.php is locatedClick to open and scroll down to the bottom. Don't delete anything. Create a new line after the end of the file, and add the following:
1function allow_avif( $mime_types ) {
2  $mime_types['avif'] = 'image/avif';
3  return $mime_types
4}
5add_filter( 'upload_mimes', 'allow_avif', 1, 1 );
This code will automatically 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 out there in the wild, copy the code below.
1function support_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', 'support_modern_images', 1, 1 );

FTP Upload

Another way to bypass the restriction is to upload your files via FTP. Simply 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.

Plugins for mime type support

There's a considerable disadvantage when modifying the functions.php. It's theme related. This means whenever you switch a theme or proceed to update your current one, most likely the shortcode snippet will be gone. Multiple plugin solutions exist for this issue:To quote: WordPress relies mostly 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

There's one remaining problem: No automatic conversion

Uploading images is a cool thing, but a colossal problem remains. For every image you want to serve to your users, you need to convert it manually. Well, there are some *cough* . You've probably heard of it. However, remains. A simpler idea would be an image plugin that automatically converts images to modern formats and offers the best solution based on your user's browser. We are currently working on creating an easy-to-use plugin that will handle all these requests without you having to configure anything. Until then, do not hesitate to try other plugins. Unfortunately, none of these plugins supports avif yet, but WebP is also an advantage!

Plugin Support & Summary

As we said earlier, all major WordPress services and plugins for image optimization currently do not support AVIF. WordPress does not support AVIF files. WordPress does not even support WebP. We are currently creating a fantastic plugin for you. In the meantime, you can still upload AVIF files by allowing the mime type or using an image plugin to at least use WebP. Just make sure you provide fallback images for older versions of Chrome. Or browsers that do not support avif yet, such as Firefox.

Related topics, websites and sources

Related questions, tags and headlines

(image format)
(wordpress)
(avif images)
(file size)
(mime type)
(image avif)
(image optimization)
(firefox)
(file format)
(avif image format)
(image file)
(google chrome)
(faster loading)
(Why AVIF Support in WordPress is Important)
(Why Does a WordPress Site Needs AVIF?)
(How to Enable AVIF in WordPress?)
(Is your browser capable of displaying AVIF images?)
(How to convert images to the AVIF file format)
(Using the AVIF Next-Generation Image Format on your Sites for Faster Loading Images)
(Insert AVIF files in WordPress pages or posts)
(Supporting additional mime types in WordPress)
(Uploading AVIF images in WordPress)
(Include support for the AVIF image format)
(Optimizing your images as a way to speed up your WordPress site)
(Upload AVIF to WordPress)

Related articles

Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.