AVIF and WebP are more modern file types that load faster than older JPG, PNG, and GIF images. This means that the speed of a website can be optimized by choosing the right image type.
AVIF is an open-source file format that was released in 2019. WordPress has natively supported the AVIF format since version 6.5. In Seravo we have read support for AVIF format, but currently no write support.
WebP is an image file format developed by Google and released in 2010. WordPress has also natively supported the WebP format since version 5.8. In Seravo we have both read and write support for WebP format.
Implementing AVIF and WebP Images in WordPress
Support for AVIF and WebP images can be activated with a separate plugin. In addition to the plugin, an nginx configuration must be made on the server.
Please note!
Enabling WebP images in our shadow environment may cause images to break. In this case, we recommend disabling WebP images on the shadow environment side.
Implementation with Converter for Media plugin
One way to serve images in these formats is by using the Converter for Media plugin. It should be noted, however, that this plugin supports AVIF format only in the PRO version.
After installing and activating the plugin, create a file webp.conf file inside the folder /data/wordpress/nginx and copy this configuration inside it:
# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
set $ext_avif "";
}
set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
set $ext_webp "";
}
location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
add_header Vary Accept;
add_header Cache-Control "private";
expires 365d;
try_files
/wp-content/uploads-webpc/$path.$ext$ext_avif
/wp-content/uploads-webpc/$path.$ext$ext_webp
$uri =404;
}
# END Converter for Media
After creating the file, run command wp-restart-nginx to restart nginx and continue with the plugin setup.