Use imagemin-webp

[mickaelchanrion]

Hey, I'm trying to use imagemin-webp to transform all my images in webp format.

By using this config in nuxt.config.js

imagemin: {
  enableInDev: true, // debuging
  imageminOptions: {
    plugins: [
      ['gifsicle', { interlaced: true }],
      ['jpegtran', { progressive: true }],
      ['optipng', { optimizationLevel: 5 }],
      ['svgo', { plugins: [{ removeViewBox: false }] }],
      ['webp', { resize: { width: 1280, height: 800 } }],
    ],
  },
},

I get my images resized to 1280*800 but the image keeps its extension. How can I fix that? 🤔

Thanks for your help

[atinux]

Hi @mickaelchanrion

Could you create a reproduction on CodeSandBox?

[ricardogobbosouza]

Hi @mickaelchanrion Sorry for delay response

You can configure it like this:

export default {
  buildModules: [

    // gif,jpb,png,svg
    ['@nuxtjs/imagemin', {
      imageminOptions: {
        plugins: [
          ['gifsicle', { interlaced: true }],
          ['jpegtran', { progressive: true }],
          ['optipng', { optimizationLevel: 5 }],
          ['svgo', { plugins: [{ removeViewBox: false }] }]
        ]
      }
    }],

    // webp
    // https://www.npmjs.com/package/imagemin-webpack#name
    ['@nuxtjs/imagemin', {
      imageminOptions: {
        name: '[path][name].webp',
        plugins: [
          ['webp', { resize: { width: 1280, height: 800 } }]
        ]
      }
    }]
  ]
}