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

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 https://github.com/nuxt/image/issues/1345#issuecomment-2351591708

Reproduce the issue with @nuxt/image@1.8.0 using npm run dev and npm run generate, then inspect the generated _ipx/w_400&f_avif/... response in the Network tab. Compare the response content type and generated output between development and the served build; done means the requested avif fallback is served with the correct image content type after generation.