Hoy veremos como utilizar un imagenin, es uno de los procesadores de imágenes en Node, en esta situación lo usaremos para convertir las imagenes PNG y JPEG que tenemos en nuestro proyecto a WebP.
Primero tienes que descargar Node.js e instalarlo en tu computadora. (Esto sólo se hace la primera vez).
Ahora debes abrir cualquier terminal que manejes, puedes ser el simbolo del sistema, Windows Power Shell, o puede que tu editor de código incluya una terminal.
Ahora debes ir al directorio en donde se encuentra tu proyecto. (Recuerda que para navegar entre directorios hay que usar el comando cd)
Por ejemplo:
Tambien puedes copiar la ruta y pegarla.
En nuestro caso debemos ubicarnos en la carpeta del tema child y ya que este alli debemos escribir el siguiente comando.
npm install imagemin imagemin-webp
La instalación puede tardar hasta un minuto.
Cuando termine, abra su editor de texto y cree un nuevo archivo con el nombre webp.json en la carpeta raíz de su proyecto web.
Escriba el siguiente script en el archivo:
const imagemin = require('imagemin'),
webp = require('imagemin-webp')
const outputFolder = './assets/img/webp'
const produceWebP = async () => {
await imagemin(['assets/img/*.png'], {
destination: outputFolder,
plugins: [
webp({
lossless: true
})
]
})
console.log('Las imágenes PNG se han procesado =)')
await imagemin(['assets/img/*.{jpg,jpeg}'], {
destination: outputFolder,
plugins: [
webp({
quality: 65
})
]
})
console.log('Los JPGs y JPEGs se han procesado =)')
}
produceWebP()
En mi caso las imagenes se encuentran en la carpeta assets/img, si las tienes en otro lado, entonces tendras que actualizar la ruta tanto para las imagenes png y jpeg.
await imagemin(['assets/img/*.{jpg,jpeg}']
De igual forma puedes jugar con la calidad de las imagenes jpeg, por defecto usamos 65
quality: 65
De igual forma por defecto todas las imagenes convertidas las guardará en una carpeta llamada webp, puedes cambiarlo.
const outputFolder = './assets/img/webp'
Una vez que esté listo, ejecute el script así:
node webp.js
