A menudo, las imágenes representan la mayor parte de los bytes descargados en una página web y, a menudo, ocupan una cantidad significativa de espacio visual. Como resultado, la optimización de imágenes suele generar algunos de los mayores ahorros de bytes y las mejoras de rendimiento para tu sitio web: cuantos menos bytes deba descargar el navegador, menos competencia habrá por el ancho de banda del cliente y más rápido podrá descargar y renderizar contenido útil en la pantalla.
La optimización de imágenes es un arte y una ciencia: un arte porque no hay una respuesta definitiva sobre cuál es la mejor manera de comprimir una imagen individual, y una ciencia porque hay muchas técnicas y algoritmos bien desarrollados que pueden reducir significativamente el tamaño de una imagen. Encontrar la configuración óptima para tu imagen requiere un análisis cuidadoso en muchas dimensiones: capacidades de formato, contenido de datos codificados, calidad, dimensiones de píxeles y mucho más.
Optimiza las imágenes vectoriales
Todos los navegadores modernos admiten gráficos vectoriales escalables (SVG), que es un formato de imagen basado en XML para gráficos bidimensionales. Puedes incorporar el lenguaje de marcado SVG directamente en la página o como un recurso externo. La mayoría de los software de dibujo basados en vectores puede crear archivos SVG o puedes escribirlos a mano directamente en tu editor de texto favorito.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
En el ejemplo anterior, se renderiza la forma de círculo simple que aparece a continuación con un contorno negro y un fondo rojo, y se exportó desde Adobe Illustrator.
<?xml version="1.0"encoded="utf-8"?>
Como puedes ver, contiene muchos metadatos, como información de capas, comentarios y espacios de nombres XML que a menudo no son necesarios para renderizar el recurso en el navegador. Por lo tanto, siempre es buena idea reducir los archivos SVG mediante la ejecución de una herramienta como SVGO.
Un buen ejemplo es que SVGO reduce el tamaño del archivo SVG anterior generado por Illustrator en un 58%, lo que lo lleva de 470 a 199 bytes.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
Debido a que SVG es un formato basado en XML, también puedes aplicar compresión GZIP para reducir su tamaño de transferencia. Asegúrate de que tu servidor esté configurado para comprimir recursos SVG.
Una imagen de trama es simplemente una cuadrícula bidimensional de “píxeles” individuales; por ejemplo, una imagen de 100 x 100 píxeles es una secuencia de 10,000 píxeles. A su vez, cada píxel almacena los valores "RGBA": canal rojo (R), canal verde (G), canal verde, (B) canal azul y (A) canal alfa (transparencia).
Internamente, el navegador asigna 256 valores (tonos) para cada canal, lo que se traduce a 8 bits por canal (2 ^ 8 = 256) y 4 bytes por píxel (4 canales x 8 bits = 32 bits = 4 bytes). Como resultado, si sabemos las dimensiones de la cuadrícula, podemos calcular fácilmente el tamaño del archivo:
- La imagen de 100 x 100 píxeles está compuesta por 10,000 píxeles.
- 10,000 píxeles x 4 bytes = 40,000 bytes
- 40,000 bytes / 1,024 = 39 KB
| Dimensiones | Píxeles | Tamaño del archivo |
|---|---|---|
| 100 x 100 | 10,000 | 39 KB |
| 200 x 200 | 40,000 | 156 KB |
| 300 x 300 | 90,000 | 351 KB |
| 500 x 500 | 250,000 | 977 KB |
| 800 × 800 | 640 000 | 2500 KB |
39 KB para una imagen de 100 x 100 píxeles puede no parecer un gran problema, pero el tamaño del archivo aumenta rápidamente para las imágenes más grandes y hace que la descarga de los recursos de imagen sea lenta y costosa. Hasta el momento, esta publicación solo se ha centrado en el formato de imagen "sin comprimir". Por suerte, se pueden hacer muchas cosas para reducir el tamaño del archivo de imagen.
Una estrategia simple es reducir la "profundidad de bits" de la imagen de 8 bits por canal a una paleta de colores más pequeña: 8 bits por canal nos da 256 valores por canal y 16,777,216 (256 ^ 3) colores en total. ¿Qué sucede si reduces la paleta a 256 colores? Entonces, solo necesitarías 8 bits en total para los canales RGB y ahorrarías inmediatamente dos bytes por píxel, lo que equivale a un ahorro del 50% en la compresión en comparación con el formato original de 4 bytes por píxel.
Las escenas complejas con transiciones de color graduales (por ejemplo, gradientes o cielo) requieren paletas de colores más grandes para evitar artefactos visuales, como un cielo pixelado en el recurso de 5 bits. Por otro lado, si la imagen solo usa pocos colores, una paleta grande está desperdiciando bits preciados.
A continuación, una vez que optimices los datos almacenados en píxeles individuales, podrías obtener más inteligencia y observar los píxeles cercanos también: al parecer, muchas imágenes, y especialmente las fotos, tienen muchos píxeles cercanos con colores similares, por ejemplo, el cielo, texturas repetidas, etc. Con esta información para tu beneficio, el compresor puede aplicar la codificación delta, con la que, en lugar de almacenar los valores individuales de cada píxel, puedes almacenar la diferencia entre los píxeles cercanos: si los píxeles adyacentes son los mismos, el delta es “cero” y solo necesitas almacenar un solo bit. Pero ¿por qué detenerse ahí...
El ojo humano tiene un nivel diferente de sensibilidad a los distintos colores: puedes optimizar la codificación de color para tener en cuenta esto si reduces o aumentas la paleta de esos colores. Los píxeles "cercanos" forman una cuadrícula bidimensional. Esto significa que cada píxel tiene varios vecinos: puedes usar este hecho para mejorar aún más la codificación delta. En lugar de observar solo los vecinos inmediatos de cada píxel, puedes ver bloques más grandes de píxeles cercanos y codificar diferentes bloques con diferentes configuraciones.
Como puedes ver, la optimización de imágenes se vuelve complicada rápidamente (o divertida, según tu perspectiva) y es un área activa de investigación académica y comercial. Las imágenes ocupan muchos bytes, y el desarrollo de mejores técnicas de compresión de imágenes es muy valioso. Si quieres obtener más información, visita la página de Wikipedia o consulta el informe sobre técnicas de compresión WebP para ver un ejemplo práctico.
Todo esto es genial, pero también muy académico: ¿cómo te ayuda a optimizar imágenes en tu sitio? Es importante comprender la forma del problema: los píxeles RGBA, la profundidad de bits y varias técnicas de optimización. Es fundamental comprender y tener en cuenta todos estos conceptos antes de profundizar en los debates sobre varios formatos de imagen de trama.
Compresión de imágenes con y sin pérdida
Para ciertos tipos de datos, como el código fuente de una página o un archivo ejecutable, es fundamental que un compresor no altere ni pierda la información original. Un dato faltante o incorrecto podría cambiar por completo el significado del contenido del archivo o, lo que es peor, dañarlo por completo. Para otros tipos de datos, como imágenes, audio y video, puede ser perfectamente aceptable proporcionar una representación “aproximada” de los datos originales.
De hecho, debido a la manera en que funciona el ojo, a menudo podemos descartar algo de información sobre cada píxel a fin de reducir el tamaño de archivo de una imagen. Por ejemplo, los ojos tienen una sensibilidad diferente para los distintos colores, lo que significa que podemos usar menos bits para codificar algunos colores. Como resultado, una canalización de optimización de imágenes típica consta de dos pasos de alto nivel:
- La imagen se procesa con un filtro con pérdida que elimina algunos datos de píxeles.
- La imagen se procesa con un filtro sin pérdidas que comprime los datos de los píxeles.
El primer paso es opcional, y el algoritmo exacto dependerá del formato de imagen específico, pero es importante comprender que cualquier imagen puede someterse a un paso de compresión con pérdida para reducir su tamaño. De hecho, la diferencia entre varios formatos de imagen, como GIF, PNG, JPEG y otros, está en la combinación de los algoritmos específicos que usan (u omiten) cuando aplican los pasos con y sin pérdida.
Entonces, ¿cuál es la configuración “óptima” de la optimización con y sin pérdidas? La respuesta depende del contenido de la imagen y de tus propios criterios, como la compensación entre el tamaño del archivo y los artefactos introducidos por la compresión con pérdida: en algunos casos, es posible que quieras omitir la optimización con pérdida para comunicar detalles intrincados en su fidelidad absoluta. En otros casos, es posible que puedas aplicar una optimización agresiva con pérdidas para reducir el tamaño de archivo del recurso de imagen. Aquí es donde deben entrar en juego tu propio juicio y contexto: no existe un entorno universal.
A modo de ejemplo práctico, cuando se usa un formato con pérdidas, como JPEG, el compresor generalmente expone una configuración de "calidad" personalizable (por ejemplo, el control deslizante de calidad que proporciona la funcionalidad "Save for Web" de Adobe Photoshop), que suele ser un número entre 1 y 100 que controla el funcionamiento interno del conjunto específico de algoritmos con y sin pérdida. Para obtener mejores resultados, experimenta con varios parámetros de configuración de calidad para tus imágenes y no tengas miedo de reducir la calidad: los resultados visuales suelen ser muy buenos y la reducción del tamaño de archivo puede ser bastante grande.
Efectos de la compresión de imágenes en las Métricas web esenciales
Debido a que las imágenes suelen ser candidatas para el Largest Contentful Paint, reducir el tiempo de carga de recursos de una imagen puede traducirse en un mejor LCP tanto en el lab como en el campo.
Cuando juegues con los ajustes de compresión en formatos de imagen de trama, asegúrate de experimentar con los formatos WebP y AVIF para ver si puedes ofrecer la misma imagen en un tamaño pequeño en comparación con formatos anteriores.
Sin embargo, debes tener cuidado de no comprimir las imágenes de trama. Una buena solución es usar una CDN de optimización de imágenes para encontrar la mejor configuración de compresión, pero una alternativa puede ser usar herramientas como Butteraugli para estimar las diferencias visuales, de modo que no codifiques imágenes demasiado de forma agresiva y pierdas demasiada calidad.
Lista de tareas de optimización de la imagen
Estas son algunas sugerencias y técnicas que debes tener en cuenta cuando trabajes en la optimización de las imágenes:
- Prefieres formatos vectoriales: las imágenes vectoriales son independientes de la resolución y la escala, lo que las convierte en la opción perfecta para el mundo de varios dispositivos y alta resolución.
- Minifica y comprime los recursos SVG: El lenguaje de marcado XML producido por la mayoría de las aplicaciones de dibujo, a menudo, contiene metadatos innecesarios que se pueden quitar. Asegúrate de que tus servidores estén configurados para aplicar compresión GZIP para recursos SVG.
- Prefieres WebP o AVIF en lugar de formatos de trama antiguos: Las imágenes WebP y AVIF suelen ser mucho más pequeñas que los formatos de imagen anteriores.
- Elige el mejor formato de imagen de trama: determina los requisitos funcionales y selecciona el que se adapte a cada recurso en particular.
- Experimenta con una configuración de calidad óptima para los formatos de trama: No tengas miedo de reducir la configuración de "calidad", ya que los resultados suelen ser muy buenos y la reducción de bytes es significativa.
- Quita los metadatos de imagen innecesarios: Muchas imágenes de trama contienen metadatos innecesarios sobre el recurso, como información geográfica, información de la cámara, etcétera. Usa las herramientas adecuadas para eliminar estos datos.
- Publica imágenes ajustadas a escala: Cambia el tamaño de las imágenes y asegúrate de que el tamaño de visualización sea lo más parecido posible al tamaño natural de la imagen. Presta mucha atención a las imágenes grandes en particular, ya que generan la mayor sobrecarga cuando se les cambia el tamaño.
- Automatización y automatización: Invierta en infraestructura y herramientas automatizadas para asegurarse de que todos los recursos de imagen estén siempre optimizados.