search

nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.28k stars 253 forks source link

Problem with generating WebP images and modern formats. #1345

Open henriquemarba2 opened 1 month ago

henriquemarba2 commented 1 month ago

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 commented 1 month ago

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.