Does <NuxtImg /> check if the format field is supported by browser?

[Kuuzoo]

Hi there, I'm currently thinking of using the avif format for my the Images in my project, but since avif has still quite some incompatible browsers I'd like to fallback to webp or even lower if it is not supported. Does NuxtImage or anything under the hood check if the selected format is supported by the browser requesting it?

My other goto would be doing a composable checking if avif is supported, and if so, use avif, else webp.

[yudin-s]

NuxtImg itself does not give you a browser-support fallback for format="avif", because the rendered result is still a single <img> URL. If you force AVIF there, a browser that cannot decode AVIF has no second source to choose from.

For AVIF/WebP/JPEG fallback, use NuxtPicture instead:

<NuxtPicture
  src="/images/example.jpg"
  format="avif,webp"
  legacy-format="jpg"
  width="800"
  height="500"
  alt="Example"
/>

That generates a <picture> structure with sources in order, so the browser selects the first format it supports and falls back to the legacy <img> format. You can also set the same default globally:

export default defineNuxtConfig({
  image: {
    format: ["avif", "webp"]
  }
})

So the short version is:

• NuxtImg format="avif": good when you intentionally want one output format.
• NuxtPicture format="avif,webp": use this when you want browser-based fallback.
• Provider-level auto negotiation may exist for some CDNs, but with IPX/static output I would rely on NuxtPicture rather than a client composable.