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.