Can someone walk me through how to use imagemin-webp in my react app (firebase)?

Question

I want to convert all images into webp but I don't know how (programming noob). I built a react app, I have a firebase.json, and I have the script "build": "react-app-rewired build" in my package.json.

Where do I put the codes and how to I wire them? Thanks in advance.

Answer 1

If you are familiar with nodejs you can use imagemin-webp
https://www.npmjs.com/package/imagemin-webp

npm i imagemin
npm i imagemin-webp

and then use this script:

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

imagemin(['images/*.{jpg,png}'], { //input here
  destination: __dirname + '/images/converted/', //output here
  plugins: [
    imageminWebp({
      quality: 75, //quality
      resize: { //optional resizing
        width: 1000, 
        height: 0 //if one of the parameters is 0 it scales automatically 
      }
    })
  ]
}).then(() => {
  console.log('Images optimized');
});