Cómo usar Imagemin para comprimir imágenes

Katie Hempenius

¿Por qué debería interesarte?

Las imágenes sin comprimir inflan tus páginas con bytes innecesarios. Debido a que las imágenes pueden ser candidatas para Largest Contentful Paint (LCP), esos bytes innecesarios pueden aumentar la duración de carga de recursos de la imagen, lo que podría generar tiempos de LCP más largos.

La foto de la derecha es un 40% más pequeña que la de la izquierda, pero probablemente se vería idéntica para el usuario promedio.

Medir

Ejecuta Lighthouse para verificar si hay oportunidades para mejorar la carga de la página mediante la compresión de imágenes. Estas oportunidades se enumeran en "Codifica las imágenes de forma eficaz":

Imagemin

Imagemin es una excelente opción para la compresión de imágenes, ya que admite una amplia variedad de formatos de imagen y se integra fácilmente con secuencias de comandos y herramientas de compilación. Imagemin está disponible como CLI y como módulo npm. Por lo general, 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 deseas 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 en particular (p.ej., "mozjpeg" comprime archivos JPEG). Los formatos de imagen populares pueden tener varios complementos para elegir.

Lo más importante que debes tener en cuenta cuando elijas un complemento es si es "con pérdida" o "sin pérdida". En la compresión sin pérdida, no se pierden datos. La compresión con pérdida reduce el tamaño del archivo, pero a costa de reducir la calidad de la imagen. Si un complemento no menciona si es "con pérdida" o "sin pérdida", puedes saberlo por su API: si puedes especificar la calidad de la imagen del resultado, entonces es "con pérdida".

Para la mayoría de las personas, los complementos con pérdida son la mejor opción. Ofrecen ahorros de tamaño de archivo significativamente mayores y puedes personalizar los niveles de compresión para satisfacer tus necesidades. En la siguiente tabla, se enumeran los complementos populares de Imagemin. Estos no son los únicos complementos disponibles, pero serían buenas opciones para tu proyecto.

CLI de Imagemin

La CLI de Imagemin funciona con 5 complementos diferentes: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant y imagemin-svgo. Imagemin usa el complemento adecuado según el formato de imagen de la entrada.

Para comprimir las imágenes en el directorio "images/" y guardarlas en el mismo directorio, ejecuta el siguiente comando (sobrescribe los archivos originales):

$ imagemin images/* --out-dir=images

Módulo npm de Imagemin

Si deseas usar Imagemin con un paquete, verifica si el paquete elegido tiene un complemento disponible. Por ejemplo, webpack es un paquete popular que tiene una excelente compatibilidad con Imagemin. Puedes obtener más información sobre cómo usar Imagemin con webpack en este codelab.

También puedes usar Imagemin por sí solo como una secuencia de comandos de Node. Este código usa el complemento "imagemin-mozjpeg" para comprimir archivos JPEG a una calidad de 50 (donde "0" es el peor y "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);
})();