Utilice Imagemin para comprimir imágenes
¿Por qué debería preocuparse? #
Las imágenes sin comprimir inflan sus páginas con bytes innecesarios. La foto de la derecha es un 40% más pequeña que la de la izquierda, pero probablemente lucirá idéntica para el usuario medio.
|
|
|---|
Medición #
Ejecute Lighthouse en búsqueda de oportunidades para mejorar la carga de la página al comprimir las imágenes. Estas oportunidades se enumeran en "Codificar imágenes de manera eficiente":
Imagemin #
Imagemin es una excelente opción para la compresión de imágenes porque admite una amplia variedad de formatos de imagen y se integra fácilmente con scripts de compilación y herramientas de compilación. Imagemin está disponible como una CLI y como módulo npm. Generalmente, el módulo npm es la mejor opción porque ofrece más opciones de configuración, pero la CLI puede ser una alternativa decente si quiere probar Imagemin sin tocar ningún código.
Complementos #
Imagemin se basa en "complementos". Un complemento es un paquete npm que comprime un formato de imagen particular (por ejemplo, "mozjpeg" comprime archivos JPEG). Los formatos de imagen populares pueden tener varios complementos para elegir.
Lo más importante a considerar al elegir un complemento es si presenta "pérdidas" o es "sin pérdidas". En la compresión sin pérdidas, no se pierden datos. La compresión con pérdidas reduce el tamaño del archivo, pero a costa de posiblemente reducir la calidad de la imagen. Si un complemento no menciona si presenta "pérdidas" o es "sin pérdidas", puede saberlo por su API: si puede especificar la calidad de imagen del resultado, entonces presenta "pérdidas".
Para la mayoría de las personas, los complementos con pérdidas son la mejor opción. Ofrecen ahorros significativamente mayores y se pueden personalizar los niveles de compresión para satisfacer sus necesidades. La siguiente tabla enumera los complementos populares de Imagemin. Estos no son los únicos complementos disponibles, pero todos serían buenas opciones para su proyecto.
CLI de Imagemin #
La CLI de Imagemin funciona con 5 complementos diferentes: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. Imagemin utiliza el complemento apropiado según el formato de imagen de la entrada.
Para comprimir las imágenes en el directorio "images/" y guardarlas en el mismo directorio, ejecute el siguiente comando (sobrescribe los archivos originales):
$ imagemin images/* --out-dir=imagesMódulo npm de Imagemin #
Si usa una de estas herramientas de compilación, consulte los laboratorios de código para Imaginemin con webpack, gulp o grump.
También puede utilizar Imagemin por sí mismo como un script de nodo. Este código utiliza el complemento "imagemin-mozjpeg" para comprimir archivos JPEG a una calidad de 50 ("0" es lo peor; "100" es lo mejor):
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
(async() => {
const files = await imagemin(
['source_dir/*.jpg', 'another_dir/*.jpg'],
{
destination: 'destination_dir',
plugins: [imageminMozjpeg({quality: 50})]
}
);
console.log(files);
})();