Cómo comprimir las imágenes: la guía del diseñador web

Sep 10, 2025

Cómo

[dieciséis]

La velocidad promedio de una conexión moderna de Internet sería muy futurista para los maestros web del pasado. De vuelta en los primeros días de la Web, la cantidad de datos transferidos fue crucial, tanto en términos de tiempo como en costo, por lo tanto, todos los involucrados en organizar algo en línea intentaron hacer imágenes más pequeñas.

Irónicamente, el problema no se ha ido hoy en día. Cada vez que visite un sitio web de script-heavy (como las noticias del mundo principal), a menudo tira de una docena de megabytes de código de javascript, imágenes, videos y whatnot. Todavía puede ser dolorosamente lento e incluso costar un centavo bastante para algunos usuarios de datos móviles (este no debería ser un problema si usa un decente Creador de sitios web , y bueno Alojamiento web debe vigilarlo por usted).

En este tutorial, descubriremos las formas en que puede adelgazar los archivos de mapa de bits para la web. Siempre y cuando utilice los viejos viejos formatos PNG y JPEG (vea más sobre Formatos de archivo de imagen Aquí, y asegúrese de guardar sus archivos en la derecha almacenamiento en la nube también), veremos cómo podemos hacerlos más pequeños sin comprometer la calidad, utilizando algo de calor Proyectos de código abierto . Al final, tendremos archivos sustancialmente más pequeños que aún se verán bien, pero requieren menos tiempo y datos para obtener los navegadores web de los usuarios.

Siga leyendo para sumergirse en los detalles. Primero, una nota rápida en el software. Todas las herramientas mencionadas aquí son de código abierto: saltar a la parte inferior para una guía para Cómo obtener el software necesitas.

Los mejores temas de cartera de WordPress.

Elija el formato correcto

Puede sonar trivial seguir adelante sobre el tamaño del archivo, pero hay suficientes ejemplos en los que una imagen es demasiado masiva sin ningún propósito o parece terrible a pesar de ser pequeño. Para evitar tales errores, elija un formato para guardar o convertir una imagen con prudencia. El uso de JPEG implica romper una imagen en azulejos de 8x8 píxeles, donde cada teja se comprime. El nivel de compresión depende del usuario (es ese control deslizante cuando guarda una imagen), pero normalmente JPEG permite una ganancia de tamaño de archivo 10: 1 con una pérdida aceptable en calidad.

La diferencia perceptiva entre los archivos JPEG realizados con una relación de compresión alta (80-100) y baja (40-60) es mínima para las imágenes fotográficas, pero altamente notable para las cosas como las ilustraciones digitales, los iconos y las capturas de pantalla. Por lo tanto, se recomienda elegir JPEG para fotos e ir con otra cosa para los otros tipos de imágenes de mapa de bits.

PNG es uno de los formatos más adecuados para gráficos de red (en realidad, eso es lo que significa su abreviatura). Mientras que el formato JPEG siempre es percibido (incluso con la calidad establecida en 100), el formato PNG puede ser perjudicial o no. Además, incluso cuando está, comprime los datos reduciendo la cantidad de colores utilizados en la imagen, de modo que el resultado comúnmente aún se ve crujiente y claro. Así que elige PNG para que representa a ScreenGrabs o cualquier otro tipo de imágenes con relleno sólido.

Comience con métodos convenientes.

Imagine is based on Electron and provides a friendly interface for processing several images at once

Optimizar los archivos de mapa de bits es posible con un montón de herramientas gratuitas, por lo que no tiene que confiar en un editor de imágenes de pleno derecho. Imagínese es una de esas aplicaciones y es increíblemente fácil de usar. Simplemente arrastre una imagen (o una pila de imágenes) sobre la ventana de Imagine y use los pequeños deslizadores para ajustar la relación de compresión.

Imagine las obras con archivos JPEG, PNG y WEBP y es ideal para la codificación con pérdida. La mayor ventaja es que la herramienta es interactiva; Instantáneamente le muestra cómo se verá la imagen con la configuración actual y muestra el tamaño del archivo propuesto. Imagine las obras ideales para el procesamiento por lotes: al menos puede guardar todas las imágenes abiertas a la vez si lo necesita.

No hace falta decir que hay docenas, si no cientos, de otros optimizadores JPEG y PNG, incluidos algunos servicios en línea útiles (como Tinyjpg ). Pero aún no se apresure, ya que tenemos algo mejor en nuestra manga.

Técnicas avanzadas de compresión.

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent

A primera vista, parece que no podemos llevar mucho más un mordisco de los tamaños de archivos PIERDY JPEG, algo que puede ser probado instantáneamente por intentos inútiles para archivar más imágenes usando ZIP o cualquier otra técnica de compresión. Pero aquí viene Guetzli, una cookie suiza inteligente y un sofisticado codificador perceptivo para JPEG.

Guetzli hace un promedio de JPEG más pequeño en un 20 al 30 por ciento al aumentar su densidad de compresión. El secreto es que el algoritmo es consciente de la forma en que los humanos perciben lo que ven, por lo que la imagen resultante todavía se ve muy bien a la vista. Guetzli es una herramienta de línea de comandos multiplataforma, que utiliza la siguiente sintaxis:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

La imagen original puede ser PNG o JPEG, mientras que la salida es siempre JPEG. Por lo tanto, puede usar Guetzli para convertir PNG a JPEG gracias a su compresión de vanguardia. La calidad debe caer entre 0-100. Guetzli es un software increíblemente pesado; consume casi 300 MB de memoria por 1 megapíxeles y también mucha potencia de CPU. Esperamos que sus JPEG super optimizados no aumenten el calentamiento global ...

Los gráficos de red portátiles son una historia diferente, siempre que haya sido diseñado para la codificación de imágenes sin pérdidas. Cuando guarda una imagen como PNG en un editor de imágenes, como GIMP, tiene un control deslizante de una relación de compresión con valores de 0 a 9. Aquí 0 significa que no hay compresión y hace que la imagen pese como si se guardara como un TIFF. En contraste, 9 tira la mayor parte de la información de color innecesaria y los resultados en un archivo que es 15-20 veces más pequeño que TIFF.

Esta vez intentaremos hacer un archivo PNG ya pequeño (con una relación de 9) aún más pequeña. Para este propósito, usaremos Zopfli, otra herramienta de código abierto que nuevamente tiene raíces en Google Labs. Zopfli es un compresor de alta calidad para la codificación de datos de deflato, GZIP y ZLIB.

La parte interesante es que Zopfli contiene dos codificadores en un paquete: el binario de propósito general y la herramienta de 'Zopflipng' dedicada. ¡Este último es exactamente lo que necesitamos! ZopFlipng es un codificador basado en deflato con ciertos algoritmos en formato de WEBP. Es lo suficientemente inteligente como para elegir automáticamente la mejor estrategia utilizando códigos de línea de exploración y eliminar varios trozos innecesarios dentro de PNG. Úsalo con esta sintaxis simple:

zopflipng original_png output_png

ZopFlipng probablemente puede hacer el trabajo aún mejor con las siguientes opciones explícitas:

 ZopFlipng --ErtIs- 500 --Filters = 01234MEPB --Lossy_8bit --Lossy_Transparent Original_PNG
OUTPUT_PNG

El precio que paga es lo mismo que con Guetzli: la herramienta requiere mucho tiempo para procesar una imagen, especialmente si es grande. Cuantas más iteraciones use, más tiempo tomará, pero 500 es un número razonable. El aumento del tamaño del archivo con Zopfli se encuentra entre el 8 y el 20 por ciento, lo que es muy bueno para las imágenes visualmente perfectas. En resumen, ganarse el 8 por ciento es común para las capturas de pantalla, mientras que el 20 por ciento es posible con fotografías (cuando necesita almacenarlas como PNG).

Actualizar a formatos de archivo de próxima generación

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours

Formalmente, esta parte va más allá del alcance de PNG y JPEG, pero es muy práctico, ya que puede organizar la conversión de archivos sobre la marcha. Lo que consideramos aquí está utilizando formatos de imagen alternativos y nuevos que superan los mejores estándares de la industria (leen WEBP).

Uno es FLIF, un nuevo formato de imagen sin pérdidas basado en el método de compresión de maníaco (Meta-Adaptive Cero-Cero Integer ADEREGETETET CODETING), que puede superar a PNG, FFV1, WebP sin pérdidas, BPG sin pérdidas y JPEG 2000 sin pérdidas en términos de relación de compresión. FLIF está disponible para todas las plataformas y algunos espectadores de imágenes ya lo admiten, pero tiene un largo camino por recorrer para golpear la corriente principal. En este momento, tiene sentido usar Flif para almacenamiento o en el lado del servidor. Puede actuar como un formato de archivo eficiente. Tendrá que agarrar el código de la página de GitHub del proyecto y compilarlo. Una vez que tengas el flif Binario instalado, use el siguiente comando para codificar una imagen PNG:

 FLIF -E OUTPUT OUTPUT_FLIF

Reemplazar -mi con -D y ponga los archivos en orden inverso a 'descomprimir' su imagen de regreso a PNG. En términos de herramientas, en este momento, está el componente API de FLIF WIC para Windows, el complemento QT Flif para Linux y el visor de imágenes PHEW y el complemento de Quicklook para MACOS (consulte la sección Enlaces para obtener más información). En comparación con la imagen que previamente fue torturada por ZopFlipng, Flif reduce su tamaño de archivo más abajo por ~ 10 por ciento. ¡Resultados impresionantes!

Nuestro último héroe es Lepton, otro formato de código abierto publicado generosamente por los desarrolladores de Dropbox. Lepton lo hace con JPEG, lo que hace Flif con PNG. Lepton puede adelgazar jpegs hasta en un 22% en el modo sin pérdida, lo que significa que el codificador no causa ninguna pérdida en calidad en comparación con el archivo JPEG original. Bajo el capó Lepton implica técnicas inteligentes de comprimir esos bloques JPEG de 8x8. En lugar de escribir ceros y otros, Lepton codifica datos de mapa de bits utilizando el codificador aritmético VP8, que respeta el contexto alrededor de cada bloque.

Nuestra prueba resultó que Lepton sea muy eficiente y rápido. El comando parecía lo siguiente:

 Lepton Original.jpg Salida.lep

Y en una segunda o dos, la herramienta produjo el archivo. TLEP que fue más pequeño en casi una cuarta parte del original. En comparación con el Guetzli que consume tiempo, Lepton es lamponamente rápido. Puede usar Lepton de la misma manera que Dropbox. El formato le permite reducir los costos de almacenamiento de 20 a 25 por ciento y, ya que es tan astuto, puede hacer secuencias de codificación / decodificación en la mosca sin mayores inconvenientes. Por cierto, el comando de decodificación es igualmente simple, solo necesita intercambiar los dos archivos y el archivo resultante es idéntico al JPEG original:

 LEPTON ORIGINAL.LEP OUTPUT.JPG

Use las técnicas descritas para optimizar el almacenamiento de datos del usuario o mejorar aún más las velocidades de carga de sus proyectos web.

Cómo obtener el software

Cada pieza de software descrito en este tutorial es de código abierto, por lo que puede usarlo libremente. No es necesario molestar a compilar todo, desde fuentes, ya que la mayoría de las herramientas a continuación tienen descargas binarias. Aquí es cómo subir y ejecutar el software.

Agarra el binario de Guetzli aquí . Es lo más fácil de hacer. Zopfli solo da el código (construirlo con 'Hacer') en Github . Sin embargo, puede ser un sabio para usted obtenerlo a través del gerente de paquete node.js:

  npm Instale nodo-zopfli

Algunos enlaces útiles para Flif:

Cubo de flif-hub : Implementación de referencia, fuentes y binarios de Windows.
Xnview mp : Un visor de fotos multiplataforma con soporte FLIF incorporado
qt-flif-plugin : Un cielo para usuarios de Linux
Uf : Un espectador y un complemento de Quicklook para MacOS
Lepton : Código fuente y binarios de Windows

Este artículo fue publicado originalmente en el número 316 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar problema 316 aquí o Suscríbete aquí .

Artículos relacionados:

La guía definitiva para la resolución de imágenes.
Cómo crear un fallo de texto y efectos de imagen en CSS
La guía del diseñador para usar imágenes de manera más efectiva.
4 consejos de optimización de imágenes esenciales

Cómo comprimir las imágenes: la guía del diseñador web

Elija el formato correcto

Comience con métodos convenientes.

Técnicas avanzadas de compresión.

Actualizar a formatos de archivo de próxima generación

Cómo obtener el software

Cómo - Artículos más populares

La guía esencial para el preesportamiento en el arte

Jamstack: construye sitios web más rápidos y eficientes hoy

Mejora tus habilidades de arte conceptuales en Photoshop

Dibuja un Geisha Bad-Ass

Reacciona su cabeza con estos cinco factores

Cómo crear una lámpara de lava con Keyshot

Cómo preparar gráficos ilustradores para después de los efectos

Pintura maestra negativa en acuarela

Categorías