Problem with generating WebP images and modern formats.

[henriquemarba2]

Even following all the steps in the documentation, using nuxt3, I cannot generate the webp images. No matter how much I select the format, it does not generate and in the browser despite the ipx directory showing webp the extension remains PNG.

I also had major problems being able to generate the images in GENERATE mode. After a lot of testing I found a solution and commented here in an issue, but it must be addressed.

I used both nuxt-image and nuxt-image-edge

{ "name": "nuxt-app", "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "@nuxt/devtools": "latest", "@nuxtjs/google-fonts": "^3.2.0", "@types/node": "^18.17.1", "autoprefixer": "^10.4.19", "nuxt": "^3.6.5", "nuxt-svgo": "^4.0.0", "postcss": "^8.4.38", "postcss-custom-properties": "^13.3.7", "postcss-nesting": "^12.1.1", "tailwindcss": "^3.4.3" }, "dependencies": { "@lucien144/vue3-parallaxy": "^0.1.2", "@nuxt/image-edge": "^1.3.0-28493895.369b747", "@nuxt/kit": "^3.11.2", "@nuxtjs/tailwindcss": "^6.8.0", "@vuelidate/core": "^2.0.3", "@vuelidate/validators": "^2.0.4", "swiper": "^11.1.1", "vue-the-mask": "^0.11.1" } }

modules: [ '@nuxtjs/tailwindcss', 'nuxt-svgo', '@nuxtjs/google-fonts', '@nuxt/image-edge', ], // NuxtImage image: { format: ['avif', 'webp', 'jpeg', 'png'], screens: { 'xs': 320, 'lg': 1024, }, provider: 'ipx', ipx: { modifiers: { quality: '80', format: ['avif', 'webp'] } }, densities: [1, 2], dir: 'assets/img' },

[ptdev]

Hey,

As far as I know, these modules do not change the file extension. They do convert the image across formats, but retain the original extension.

You can verify if you are correctly generating webp (or other formats) by openning the browser developer tools and on the "network" tab, check the "type" column. It should correctly show as webp (or whichever format you selected).

You can also then click on the image request (still in the network tab of the browser's developer tools) and on the "headers" tab verify the Content-Type header, that should have the correct image type.

Cheers.

[moshetanzer]

UP

using IPX with latest nuxt and nuxt image does not convert images correctly from png to webp!

[ptdev]

Hello,

I also have the latest version of nuxt and nuxt-image and IPX is working correctly.

As I've stated on my previous post, even though IPX converts between formats, the file extension remains the same.

See the screenshot from browser dev tools:

This is by design, so please confirm if you're actually having an issue, and if so, you'll have to post more details about your specific case.

Cheers

[moshetanzer]

It doesnt work!

Nuxi Info

------------------------------
- Operating System: Darwin
- Node Version:     v22.2.0
- Nuxt Version:     3.12.4
- CLI Version:      3.12.0
- Nitro Version:    2.9.7
- Package Manager:  [email protected]
- Builder:          -
- User Config:      runtimeConfig, turnstile, site, app, ssr, routeRules, compatibilityDate, future, devtools, extends, ui, modules, image, plausible, eslint
- Runtime Modules:  @nuxt/[email protected], @nuxt/ui, @nuxt/[email protected], @nuxt/[email protected], @vueuse/motion/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], [email protected], @nuxtjs/[email protected], @nuxt/[email protected]

Network Tab

Request URL:
http://localhost:3000/_ipx/s_1200x600/staticmap.png
Request Method:
GET
Status Code:
200 OK
Remote Address:
[::1]:3000
Referrer Policy:
no-referrer
access-control-allow-origin:
*
cache-control:
max-age=60, public, s-maxage=60
connection:
close
content-length:
160496
content-security-policy:
default-src 'none'
content-type:
image/png
date:
Thu, 15 Aug 2024 10:30:28 GMT
etag:
"272f0-mVqMXTaySxTciiZoooU7Yv4BcFE"
last-modified:
Wed, 14 Aug 2024 09:40:21 GMT
referrer-policy:
no-referrer
strict-transport-security:
max-age=15552000; includeSubDomains;
x-content-type-options:
nosniff
x-download-options:
noopen
x-frame-options:
SAMEORIGIN
x-permitted-cross-domain-policies:
none
x-xss-protection:
0

Nuxt Config

 image: {
    formats: ['webp']
  },

[ptdev]

Hi,

Try using the following on nuxt.config.ts:

image: {
    provider: 'ipx',
    ipx: {
        modifiers: {
            format: 'webp'
        }
    }
}

[moshetanzer]

ipx is default value so wouldn't make any difference as per docs. format is a valid entry directly under image as per docs.

@danielroe any advice here - since @ptdev solution does work (thank you!), but as per docs it shouldn't be needed.

[ptdev]

Hi,

I think you probably misread the docs, there is no "formats" option, only a format option that is used by the NuxtPicture component (?)

[moshetanzer]

@ptdev tried both neither make a difference! even when defining format on nuxtimg tag itself

[ptdev]

@moshetanzer that's the thing, the format option only applies when using the NuxtPicture component (that encapsulates html's picture tag) and not NuxtImg.

From the docs:

You can use this option to configure the default format for your images used by NuxtPicture. The available formats are webp, avif, jpeg, jpg, png, and gif. The order of the formats is important, as the first format that is supported by the browser will be used. You can pass multiple values like ['avif', 'webp']

[moshetanzer]

hey @ptdev that is not correct

https://image.nuxt.com/usage/nuxt-img#format

[ptdev]

Those are two different things.

One (and your initial statement) was the "format" option on nuxt.config.ts

Now you're referring to a prop on nuxtimg component.

[arxwtf]

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]