next/image unoptimized auto fallback to jpg

[garmeeh]

Hey 👋

We get an optimized image back from our API and want to use next/image to display it. We would like to show Webp and the allow it to fallback to jpg in unsupported browsers. From what I can see this is not currently possible.

Example

<Image 
  src={webpUrl} 
  alt="Nice Alt"
  unoptimized={true} 
/>

Ideally we could do something like:

<Image 
  src={webpUrl} 
  alt="Nice Alt"
  unoptimized={true} 
  jpgFallback={jpgUrl}
/>

Is it currently possible to do anything like this?

[M1ck0]

unoptimized
When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to false.

If you use unoptimized it will behave like the <img/> tag.

You can have the behavior you want with a default <img/> tag, something like this

<img src="/path/to/broken/image" onError={(e) => (e.target.onerror = null, e.target.src = '/fallback/image.jpg')}/>

Hope this helps your problem for now, until they consider adding this behaviour by default.

[styfle]

This has been fixed in #35190

Please give it a try with npm i next@canary or yarn add next@canary, thanks!

[dmitrybolt]

@styfle how it solves fallback for unoptimized images? I use imageproxy for image optimization and specify image format in the url with query param

[styfle]

I might have misunderstood the original request. I assumed the "fallback" would be the the same image but different format based on browser support. For example, webp for the original image and jpeg for the fallback. Thats the use case that the PR solves.

If you're using a different image optimization service other than the built-in API (for example using the loader prop), then you'll need to make sure that the 3rd party API implements this feature. Usually its called something like auto format in the case of Cloudinary, Imgix, etc.