Fallback for format types. fm: 'avif'

[petewins]

When fm: 'avif' is set, browsers like Safari won't be able to display the image.
Is there a way to fallback to original image format through the loader or is this a limitation of the Next's loader?

[dsbrianwebster]

We'll look into this. Out of curiosity have you tried adding webp as a second format in your next config file?

images: {
    formats: ['image/avif', 'image/webp'],
},

[dsbrianwebster]

@petewins forgot to tag you ☝️

[pauloamgomes]

@dsbrianwebster Using the formats option in next config will not help in this case. I found this loader interesting mostly because solves an issue with the default next image when deployed in Netlify (performance), but not having the ability to fallback seems a no go.

[devjmetivier]

@petewins @pauloamgomes I think that the answer to this issue is somewhat multi-layered.

Next.js Image component docs note that the Accept header that the browser sends along with a request determines what potential formats it can load. The problem with using Contentful's Image API is that there's no indication in their docs that it considers this header, and therefore isn't "smart enough" to determine what image to send to the browser.

There's also the issue that we're explicitly setting what the image is being converted to via the API: fm=avif. We wouldn't be able to get around this for SSG because the final image URL would presumably get rendered at build time.

All that said, I think the issue is both that Contentful's API isn't smart enough, and you're explicitly telling them what to serve you.

Some suggestions:

If you're going the explicit route, I would suggest using the webp format as there's wider support for it than avif currently.

In the (unlikely) event you're able to move to a different image provider, you could use one that's smart enough to serve you the correct image based on headers. I think Imgix works.

Closing this issue barring any new ideas/PR considerations.

[pauloamgomes]

Thanks for the explanation @devjmetivier
Using webp seems an acceptable option for now, I also played with the ability to detect if the browser can accept avif(e.g. https://stackoverflow.com/a/69927596) and pass it on via the fm parameter.