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/image@1.8.0

Originally posted by @arxwtf in #1345 (comment)

[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.

[kalenmike]

I can confirm the same issue. This comes down to running a static site vs a server. The static site is dumb and so there is no updated response header sent with the correct content type, so the browser gets the content type from the extension.

This seems to be worse for static sites as it could cause issues in the browser.

Is there anyway to to update the file extensions for static sites?

[codeflorist]

Unfortunately i don't know of any workarounds.

But there is a pull request for the ipx package, that should solve this problem by restructuring the ipx-url so the format is at the end of the url:

unjs/ipx#259

(This issue here seems to be a duplicate of #1887 btw - or rather vice-versa.)