Skip to content
About Blog Aprender Explorar patronas Case studies
En esta página
  • ¿Por qué debería preocuparse?
  • Medición
  • Imagemin
    • Complementos
    • CLI de Imagemin
    • Módulo npm de Imagemin

Utilice Imagemin para comprimir imágenes

Nov 5, 2018 — Actualizado Apr 6, 2020
Available in: English, Português, Русский, 中文, 日本語 y 한국어
Appears in: Tiempos de carga rápidos
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
En esta página
  • ¿Por qué debería preocuparse?
  • Medición
  • Imagemin
    • Complementos
    • CLI de Imagemin
    • Módulo npm de Imagemin

¿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.

20 KB

12 KB

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":

imagen
Lighthouse actualmente informa sobre las oportunidades para comprimir imágenes solo en formato JPEG.

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.

Formato de imagenComplementos con pérdidasComplementos sin pérdidas
JPEGimagemin-mozjpegimagemin-jpegtran
PNGimagemin-pngquantimagemin-optipng
GIFimagemin-giflossyimagemin-gifsicle
SVGImagemin-svgo
WebPimagemin-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 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=images

Mó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);
})();
Rendimiento
Última actualización: Apr 6, 2020 — Mejorar el artículo
Codelabs

See it in action

Learn more and put this guide into action.

  • Using Imagemin with webpack
  • Using Imagemin with Gulp
  • Using Imagemin with Grunt
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.