¿Por qué debería interesarte?
Las imágenes sin comprimir sobrecargan las páginas con bytes innecesarios. Debido a que las imágenes pueden ser candidatos para Largest Contentful Paint (LCP), esos bytes innecesarios pueden aumentar la duración de carga de recursos de la imagen, lo que puede generar tiempos de LCP más largos.
La foto de la derecha es un 40% más pequeña que la de la izquierda, aunque probablemente se vería idéntica para el usuario promedio.
|
|
|
|---|
Medir
Ejecuta Lighthouse para comprobar si hay oportunidades para mejorar la carga de la página mediante la compresión de imágenes. Estas oportunidades se enumeran en "Codifica imágenes de forma eficiente":
Imagemin
Imagemin es una excelente opción para la compresión de imágenes porque admite un ancho variedad de formatos de imagen y se integra fácilmente en las secuencias de comandos de compilación y con herramientas de visualización. Imagemin está disponible como CLI y una cuenta de npm módulo. Por lo general, el módulo npm es la mejor opción porque ofrece más opciones de configuración, pero la CLI se puede una buena alternativa si quieres 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 específico (por ejemplo, “mozjpeg” comprime los archivos JPEG). Formatos de imagen populares puede tener varios complementos para elegir.
El aspecto más importante que se debe considerar al elegir un complemento es si “con pérdida” o "sin pérdidas". En la compresión sin pérdida, no se pierden datos. Con pérdida la compresión reduce el tamaño del archivo, pero a expensas de reducir calidad. Si un complemento no menciona si está "con pérdida" o "sin pérdidas", tú lo sabe por su API: si puedes especificar la calidad de la imagen del resultado, es "con pérdida".
Para la mayoría de las personas, los complementos con pérdida son la mejor opción. Ofrecen un nivel significativo de más ahorro en el tamaño de archivo y puedes personalizar los niveles de compresión para cumplir según tus necesidades. En la siguiente tabla, se enumeran los complementos populares de Imagemin. Estos no son los únicos complementos pero todas serían buenas opciones para tu proyecto.
| Formato de imagen | Complementos con pérdida | Complementos sin pérdida |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
CLI de Imagemin
La CLI de Imagemin funciona con 5 complementos diferentes: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. Imagemin usa el complemento adecuado según el formato de imagen de la entrada.
Para comprimir las imágenes en el bloque “images/”, y guardarlas en el mismo ejecuta el siguiente comando (reemplaza los archivos originales):
$ imagemin images/* --out-dir=images
Módulo npm de Imagemin
Si usas una de estas herramientas de compilación, consulta los codelabs de Imagemin con webpack, gulp o gruñido.
También puedes usar Imagemin solo como una secuencia de comandos de Node. Este código usa el archivo “imagemin-mozjpeg” para comprimir archivos JPEG en un tamaño de calidad de 50 (“0” es el peor; “100” es el 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);
})();