Optimización de imágenes para la web y el rendimiento

Resumen

Una forma de hacer más rápido tu sitio web es hacerlo más pequeño. No con letras diminutas, ¡sino con menos bytes! Más de la mitad del peso de un sitio web medio son imágenes. Aun así, muy poca gente las optimiza para la web y el rendimiento. ¡Es hora de descubrir cuántos bytes puedes ahorrar!

Texto completo

Optimiza tu sitio web

Si optimizas tu sitio web, cargará más rápido. Como mucha gente prefiere los sitios rápidos, buscadores como Google empezaron a medir la velocidad de las páginas para decidir en qué posición de los resultados de búsqueda sale el tuyo.

Tamaño medio de una página

Aunque muchos creadores de sitios web se fijan primero en el HTML y los scripts, la mayor parte del peso de un sitio web medio son imágenes (fuente: HttpArchive, peso de las páginas, septiembre de 2018).

Una buena optimización de imágenes puede, por tanto, tener efectos increíbles en la velocidad de tu sitio.

¿Qué es optimizar imágenes?

Una imagen digital es como un tablero de ajedrez: un rectángulo de 8x8 casillas blancas y negras. Si guardaras el tablero sin comprimir, anotarías el color de cada casilla una a una ("la casilla uno es blanca, la dos es negra, la tres es blanca, la cinco es negra, etc."). Harían falta 64 líneas para describir el tablero entero. Es exacto, pero no muy eficiente.

Optimizar una imagen es buscar maneras más eficientes de describir sus colores. Podrías describir todo el tablero en una sola línea de texto: "alterna entre blanco y negro, empieza por blanco", o aún mejor: "repite blanco, negro". En las imágenes digitales esto se llama compresión: el algoritmo intenta identificar secuencias de colores que se repiten.

Hay distintos algoritmos, cada uno con sus puntos fuertes y débiles. Algunos funcionan mejor con fotos (con millones de colores) y otros con imágenes de menos colores (como una diapositiva de PowerPoint). Elegir el algoritmo adecuado es tu primer empujón de rendimiento.

Formatos de imagen habituales

• JPG es un tipo de archivo muy común, con una compresión eficaz para imágenes con muchos colores distintos, como las fotos. Este formato existe desde 1992 y lo admite casi cualquier dispositivo.
• GIF es otro formato antiguo, desarrollado en 1987. Es popular porque admite animación. Técnicamente es muy limitado: solo 256 colores distintos por imagen.
• PNG se desarrolló en 1994 para sustituir al GIF, por la polémica en torno al algoritmo de compresión de este. Es popular porque casi cualquier dispositivo lo admite y soporta millones de colores, transparencia incluida. Permite la compresión sin pérdida, que garantiza textos y líneas nítidos, y por eso es ideal para gráficos y logotipos.

Hace poco Google (WebP) y Apple (HEIF) presentaron nuevos formatos con una compresión aún mejor que la de JPG, GIF y PNG. Pero todavía no se han generalizado.

Elegir el formato de imagen adecuado

El mejor formato depende del contenido real de tu imagen. No hay una regla universal que diga cuál es el mejor para cada caso. Lo mejor es probarlo tú mismo: mira qué pasa con el tamaño del archivo si guardas la imagen en distintos formatos. Muchos programas de escritorio te dejan elegir el formato al seleccionar "Guardar como".

Puedes empezar con JPG para fotos y PNG para imágenes con pocos colores, como un logotipo, un gráfico o una diapositiva de PowerPoint. Formatos como JPG ofrecen distintos niveles de calidad de compresión, que afectan a la calidad de la imagen y al tamaño del archivo. Una calidad más baja reduce la calidad de la imagen a cambio de un archivo más pequeño; intenta encontrar un buen equilibrio entre calidad y tamaño.

Compresión con pérdida y sin pérdida

Los algoritmos de compresión que sacrifican calidad a cambio de tamaño se llaman algoritmos de compresión con pérdida. Los que conservan la calidad original de la imagen se llaman algoritmos de compresión sin pérdida.

Cómo optimizar imágenes

Cuando ya tienes tu imagen JPG o PNG, puedes optimizarla eligiendo los ajustes adecuados del algoritmo de compresión. No te preocupes, no hace falta hacerlo a mano: hay software de optimización automática que encuentra los mejores ajustes para cada imagen.

Optimizar imágenes JPG

Si usas Photoshop, puedes usar su función Guardar para web para obtener una imagen JPG bastante bien optimizada.

También puedes usar una utilidad de línea de comandos como jpegoptim. Esta herramienta reduce los archivos JPG optimizando las tablas de Huffman internas, con lo que mejora el rendimiento del algoritmo de compresión. De media, puedes esperar una mejora del 10-15 % sin perder calidad de imagen.

Otra forma de optimizar imágenes JPG es un optimizador en línea, como TinyJPG o ImageOptim.

Si usas WordPress, puedes plantearte un plugin que optimice las imágenes por ti, como Imagify de xtremerain.

Optimizar imágenes PNG

Los archivos PNG se pueden optimizar con Photoshop usando la función Guardar para web. Para optimizarlos aún mejor, puedes usar una app especializada, como ImageAlpha para Mac o PNGGauntlet para Windows.

También hay optimizadores en línea para archivos PNG, como TinyPNG y Compressor.io.

O puedes usar programas de línea de comandos como optipng, pngcrush o pngquant. Merece la pena meterse un poco más a fondo con estas herramientas PNG.

Probando optipng, pngcrush y pngquant

En mi trabajo como desarrollador web integro la optimización de imágenes en sistemas de gestión de contenidos, para que a mis clientes les resulte más fácil tener sus imágenes optimizadas automáticamente. Al crecer mucho el número de clientes, me topé con problemas de rendimiento.

Para ganar rendimiento decidí probar optipng, pngcrush y pngquant. Esperaba encontrar una buena optimización de imágenes con menos potencia de proceso del servidor, lo que mejoraría el rendimiento para mis clientes.

PACE-CME

Uno de esos clientes es PACE-CME, un sitio web con recursos de formación cardiovascular para médicos. Contiene miles de diapositivas de PowerPoint guardadas como archivos PNG.

Para medir el rendimiento usé una imagen de prueba especial, más grande y pesada que una diapositiva de PowerPoint normal. Es una imagen de alta resolución con contenido mixto: en parte fotos, en parte texto y colores lisos.

Método

Hice las pruebas en un servidor Intel XEON de cuatro núcleos con 8 GB de RAM. Con cada herramienta de optimización de PNG usé tanto los ajustes más extremos (para ver hasta dónde podía reducir el archivo) como los predeterminados (para ver cuánto más rápidos son y cómo se comparan con los mejores ajustes de compresión).

Resultados

• Imagen de prueba original: 2897 KB
• optipng extremo (-o7): 2510 KB en 2 minutos y 36 segundos / predeterminado: 2536 KB en 4,9 segundos
• pngcrush extremo (-brute): 2510 KB en 1 minuto y 42 segundos / predeterminado: 2531 KB en 9,2 segundos
• pngquant extremo (-s 1): 744 KB en 5,2 segundos / predeterminado: 746 KB en 4,2 segundos

El rendimiento de pngquant es increíble: es mucho más rápido y además da un archivo mucho más pequeño. Pero no es magia: usa otro algoritmo, con pérdida. Es decir, las imágenes optimizadas con pngquant pierden un poco de calidad. Las comparé de cerca y no noté la diferencia.

Conclusión

Optimizar las imágenes para la web y el rendimiento es muy importante. Como han mostrado mis pruebas, elegir el algoritmo adecuado puede marcar la diferencia.

Para mí eso significó elegir pngquant, pero tu decisión puede ser otra según el tipo de imágenes que quieras optimizar.

Lo que debes llevarte de esta entrada del blog es que te importen las imágenes. Tu sitio web será mucho más rápido, ¿y a quién no le gusta un sitio web rápido?