Cuando desarrollamos apps, es importante que las imágenes estén optimizadas, para que el sitio tenga mejor performance; utilizando Webpack podemos optimizar imágenes con el módulo image-webpack-loader, para que, cuando el sitio esté en producción, las imágenes pesen menos.
Primero tenemos que tener las imágenes ubicadas en la carpeta src.
instalación
npm install image-webpack-loaderimplementación en Webpack
rules: [
// Primero configuramos donde estará el output de las imagenes
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [
{
loader: 'file-loader', // Este módulo debe estar instalado antes
options: {
name: '[name].[ext]',
outputPath: 'img/', // Dentro de la carpeta img
useRelativePath: true
},
},
],
},
/*
Ahora configuramos el módulo image-webpack-loader donde le
indicamos en qué calidad (en porcentaje) queremos las imágenes.
*/
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: true,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
webp: {
quality: 75
}
}
}
]