Gatsby Image CDN on Netlify ignores 'formats' setting, always attempts to generate AVIF and times out

Support
1

Example site: Fall Fitness: A Guide to Transition Your Workout Routine for Cooler Weather - Fitness Town

I am using Gatsby Cloud Image CDN on Netlify by adding this ENV to my deploy GATSBY_CLOUD_IMAGE_CDN=true

I have set the default formats in gatsby-plugin-image as [auto, webp], (these are already the defaults btw)

From my gatsby-config.js

    {
      resolve: `gatsby-plugin-image`,
      options: {
        defaults: {
          formats: [`auto`, `webp`],
        },
      },
    },

The Image CDN on Netlify just ignores these settings and attempts to generates AVIF images anyways. This would be fine if AVIF actually worked consistently.

Very often the AVIF image will fail to generate on the worker function, resulting in a site that looks broken and an unhappy customer.

2023-11-08T19:05:23.863Z 4afe1385-a32e-4d95-a1ee-3204f71e57c3 Task timed out after 10.04 seconds

Here is an example url that is failing right now: https://deploy-preview-263--fitness-town.netlify.app/.netlify/builders/_ipx/image_query_compat/w%3D1026%26h%3D686%26fm%3Davif%26q%3D90/https%3A%2F%2Ffitnesstowncms.wpengine.com%2Fwp-content%2Fuploads%2F2023%2F10%2FFall-Fitness-A-Guide-to-Transition-Your-Workout-Routine-for-Cooler-Weather.png/Fall-Fitness-A-Guide-to-Transition-Your-Workout-Routine-for-Cooler-Weather.avif?u=https%3A%2F%2Ffitnesstowncms.wpengine.com%2Fwp-content%2Fuploads%2F2023%2F10%2FFall-Fitness-A-Guide-to-Transition-Your-Workout-Routine-for-Cooler-Weather.png&a=w%3D1026%26h%3D686%26fm%3Davif%26q%3D90&cd=9a04903c98e587c3f107cf3ddc22317d

And this is the same image, generating fine as webp image:

1026×686 109 KB

Any idea how to stop it from adding AVIF format? The png and webp formats work fine but the browser prioritizes loading the broken AVIF instead.

2

Maybe I misunderstood what the plugin option formats does. It did absolutely nothing for images queried with gatsbyImage query. I’m guessing this is only for static image files included in the repo.

I manually updated every image query to add “formats: [AUTO, WEBP]”.
Now it is only adding png and webp. Saved :pray:

Either way, this documentation is not up to date: Gatsby Image plugin | Gatsby

formats

Default component prop value: ["auto", "webp"]. Default resolver prop value: [AUTO, WEBP]

This is definitely wrong, the defaults are [AUTO, WEBP, AVIF].

gatsby@5.11
gatsby-plugin-image@3.12.3

I would still like to know why AVIF fails to generate after 10 seconds if anyone has any idea.

3

AVIF takes time to generate, as it’s a resource-heavy format. Smaller images might generate faster.

In any case, this should probably be fixed in a few weeks as we plan to roll out some important changes in this area.