GridPane has an excellent tutorial on how to set up ShortPixel for WebP image optimization – which works perfectly for automatically serving WebP images.
However, their documentation for AVIF suggests:
“Toggle on the create AVIF images setting and Deliver images on the frontend setting. Here it will automatically set things via the Using the tag syntax setting. You can leave the preselected ‘Only via WordPress hooks (like the_content, the_excerpt, etc)’ setting.”

This isn’t ideal if you don’t want ShortPixel inserting <picture> tags throughout your site.
Here’s how to automatically serve AVIF images just like WebP images, without needing to enable that ShortPixel setting.
The Config
Unlike the WebP setup where you need to create a webp-mappings.conf file, GridPane already handles the AVIF mappings automatically.
Simply replace the contents of your shortpixel-webp-main-context.conf file with this snippet:
location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
set $base $1; # e.g., /wp-content/uploads/image
set $double_extension $1.$2; # e.g., /wp-content/uploads/image.jpg
add_header Vary Accept; # Critical for caching
# Add a debug header
if (!-f $document_root$base$avif_suffix) {
add_header X_AVIF_GP_Miss $document_root$base$avif_suffix;
}
# Check for AVIF (new/old naming) → WebP (new/old naming) → Original
try_files
$double_extension$avif_suffix # image.jpg.avif (ShortPixel legacy)
$base$avif_suffix # image.avif (modern naming)
$double_extension$webp_suffix # image.jpg.webp (legacy)
$base$webp_suffix # image.webp (modern)
$uri # Fallback to original PNG/JPG
=404;
}
This config will automatically serve AVIF images on compatible browsers, falling back to WebP and then the original image when needed – all without modifying your HTML markup.
Verify and Reload
After adding the configuration, be sure verify your Nginx syntax as usual:
nginx -t
If there are no errors, reload Nginx:
gp ngx reload
That’s all there is to it!