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.”

Screenshot of delivering AVIF images on the front-end using ShortPixel

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!