Nuxt Picture with format fallback does not render the avif format but webp

[Baroshem]

I'm using NuxtPicture with format="avif,webp" and ipx. When I test the page in npm run dev, the image type in Network tab is correct: image/avif. However, when I run npm run generate and serve the build, the images in Network tab have the content type image/webp which is the original content type of my source image.

I see the image is served from a correct avif folder: GET /_ipx/w_400&f_avif/images/blog/1-front-panels-tips/01-front-matter.webp

I tried putting this in my nuxt config:

image: {
    provider  : "ipx",  // the default
    format    : ['avif', 'webp'],
    ipx       : {
      modifiers : {
        format  : 'avif'
      }
    }
  },

but the content type after generate is still image/webp.

I'm using @nuxt/[email protected]

Originally posted by @arxwtf in https://github.com/nuxt/image/issues/1345#issuecomment-2351591708

[Baroshem]

@danielroe Am I correct thinking that for nuxt generate, we cannot distinguish what kind of format extension does the browser provide (the most performant one) so we use webp by default?

And this format fallback would only work fully on SSR apps?

[codeflorist]

In my case the original image is a jpg, which gets converted to webp via IPX.

The network-tab in Chrome says its Content-Type: image/jpeg, but when i download the file and use https://www.site24x7.com/tools/mime-type-checker.html to check it's mime-type, it has the correct image/webp mime-type.

My assumption is, that the webserver returns the Content-Type header corresponding to the file-extension and does not check the actual mime-type.

@Baroshem Try checking the file's actual mime-type with the checker-tool i linked above.