Converting Images to WebP with Node.js

Recently, I needed to convert some images to WebP format in a Nuxt.js project. Naturally, I searched for some Nuxt.js modules and found myself npm-installing for a while...😖
Eventually, I found imagemin ✌

First, let's install our dependencies:

npm install imagemin
npm install imagemin-webp
content_copy
Terminal

Now, let's create a webp.js file with this script:

const imagemin = require("imagemin");
const imageminWebp = require("imagemin-webp");

imagemin(["./assets/images/*.{jpg,png}"], {
  destination: "./assets/images/webp/",
  plugins: [
    imageminWebp({
      //   quality: 90
      //   ,
      //   resize: {
      //     width: 1000,
      //     height: 0
      //   }
    }),
  ],
}).then(() => {
  console.log("Images Converted Successfully!!!");
});
content_copy
JS

Now, run the script with:

node webp.js
content_copy
Terminal

If you want to serve images in webp format or other partly supported formats you will probably want to include your images with the picture tag for the best support:

<picture>
  <source srcset="someimage.webp" type="image/webp">
  <source srcset="someimage.jpg" type="image/jpeg"> 
  <img src="someimage.jpg" alt="An awesome image">
</picture>
content_copy
HTML