Hoy en día, un sitio web sin imágenes sería impensable. Las imágenes no solo son necesarias para crear páginas web con un hermoso diseño, sino que también ayudan a conseguir conversiones, intercambio social y engagement de los usuarios. Es por ello que el procesamiento de imágenes es crucial para el éxito de cualquier negocio digital y puede marcar la diferencia para que tus usuarios puedan ver un sitio web nítido y colorido o una página fragmentada, llena de caracteres o una pantalla de carga en blanco.
Sin embargo, el tiempo y los recursos necesarios para transferir fotos, logotipos, ilustraciones e incluso algunos mensajes de texto para crear la composición completa de la página web es tan intenso que hasta las imágenes pueden parecer más un pasivo que un activo.
Este artículo abordará los conceptos básicos sobre el procesamiento de imágenes, al explicar qué es, cuáles factores afectan la calidad de la imagen y cómo los servicios de procesamiento de imágenes, tales como compresión, formateo y redimensionamiento pueden mejorar tanto el desarrollo del proceso como la experiencia de usuario.
¿Qué es el procesamiento de imágenes?
El procesamiento de imágenes (también conocido como optimización de imágenes) es el proceso mediante el cual las imágenes originales son codificadas en una manera especial, lo que resulta en un tamaño de archivo comprimido para transferir y almacenar mientras se mantiene la mejor calidad de imagen posible. Además de la compresión, las soluciones de procesamiento de imágenes pueden incluir otras modificaciones, como:
- formateo;
- redimensionamiento;
- filtro, y
- caching, o almacenamiento en caché.
Si alguna vez has esperado impacientemente que las imágenes carguen, has visto una imagen distorsionada o cortada o te has encontrado un enlace de imagen roto en un sitio web, conoces de primera mano la importancia del procesamiento de imágenes para la experiencia de usuario. Desde un punto de vista comercial, el procesamiento de imágenes no solo reduce el uso de recursos (y, por tanto, tus costos operativos), sino que también puede automatizar muchas tareas tediosas, y que consumen tiempo, necesarias para configurar y mantener el almacenamiento y suministro de imágenes, lo que le da a las empresas más tiempo para concentrarse en sus productos y servicios.
¿Qué factores afectan la calidad de imagen?
Las imágenes de mapa de bits (bitmap, también conocidas como ráster) están formadas por píxeles de colores organizados en cuadrículas donde cada color se almacena como un número binario. Antes de la optimización, la calidad de las imágenes de mapa de bits en la web es afectada principalmente por dos factores: el número de píxeles (o dimensión en píxeles) y la profundidad de color de la imagen (también conocida como profundidad de bits), que es medida en bits por píxel.
Dimensión en píxeles
Al pensar en la calidad de una imagen, probablemente piensas en su resolución, la cual es medida en píxeles por pulgada (pixels per inch, PPI) o en puntos por pulgada (dots per inch, DPI) para las imágenes impresas. Una “alta resolución” implica una imagen más nítida y un archivo más grande, mientras que las imágenes con menor resolución lucen granuladas o borrosas. Este no es el caso de las imágenes en la web, porque las pantallas de los dispositivos poseen su propia resolución, por lo que tienen un conteo fijo de píxeles. Como resultado, las imágenes en la web se mostrarán igual en el mismo dispositivo, independientemente de su resolución.
En cambio, el factor que determina la nitidez de una imagen web es su dimensión en píxeles: la longitud y el ancho de la imagen medidos en su número de píxeles. Mientras más grandes sean las dimensiones de la imagen, mejor se verá. Como explica esta publicación en el blog de Shutterstock:
“Si las dimensiones de una fotografía son 2 000 × 1 500 píxeles, la imagen se verá genial como un banner o como una foto pequeña en la lateral de tu sitio web. Si usas una imagen de 200 x 150 píxeles, solo se verá bien en su tamaño original, más pequeño. Al ampliar esta imagen para usarla como banner en el inicio de la página, por ejemplo, tendrá una apariencia granulada y descuidada que no será apreciada por nadie que visite tu sitio web”.
Profundidad de color
Otro factor importante para determinar la calidad de una imagen digital es la profundidad de color, que indica la cantidad de colores disponibles para cada píxel. En una imagen en blanco y negro existen solo dos posibilidades: 1 o 0, lo que significa que tiene una profundidad de color de 1 bit. Al agregar gris claro y gris oscuro en la ecuación, tenemos cuatro posibles números binarios (00, 01, 10 y 11) y una profundidad de color de 2 bits.
A medida que la profundidad de color aumenta, el rango de colores crece exponencialmente, lo que permite colores más profundos y transiciones más suaves entre píxeles de diferentes colores, como sucede con las cámaras DSRL modernas, que tienen una profundidad de color de 24 bits y permiten más de 16 millones de colores posibles por píxel.
Calidad versus tamaño del archivo: un modo de compensación
Las dimensiones de los píxeles y las profundidad de color no son solo indicadores clave de la calidad de las imágenes web, también son factores que determinan el tamaño del archivo. Esto significa que las imágenes de alta calidad tienen un costo. Mientras más nítida y colorida es una imagen, contiene más información, necesita más espacio de almacenamiento y más tiempo para ser renderizada en la pantalla del usuario, especialmente en un dispositivo móvil o con una conexión de Internet lenta.
Esto representa un verdadero dilema para algunos sitios web como los e-commerce, que dependen de fotos de alta calidad para mostrar sus productos a los clientes con precisión, pero al mismo tiempo deben mantener la velocidad del sitio para evitar que el usuario se vaya. Para evitar este escenario, las empresas deben asegurarse de que las imágenes estén comprimidas, formateadas y dimensionadas para un suministro óptimo.
Compresión
Podría asegurarse que la compresión es la tarea más importante de cualquier solución de procesamiento de imágenes. La compresión es el proceso mediante el cual los archivos de imágenes son reducidos al menor tamaño posible al reorganizar o eliminar información. Las técnicas que reducen el tamaño de los archivos eliminando información se conocen como compresión con pérdidas. Por su parte, los métodos que no alteran datos y simplemente los reorganizan para agruparlos de manera más eficiente se consideran compresión sin pérdidas.
- Los métodos de compresión con pérdidas logran la compresión eliminando datos en píxeles. Cuando se descomprime, la imagen reconstruida es una aproximación de la versión original.
- Los métodos de compresión sin pérdidas lo hacen reorganizando la información. Cuando se descomprime, el archivo se restaura a su estado original.
Al considerar que la compresión con pérdidas altera fundamentalmente los datos en bruto que componen una imagen, impide que las imágenes se restauren a su estado original. Este método permite una mayor reducción en el tamaño del archivo que la compresión sin pérdidas, pero mientras mayor sea la reducción, menor será la calidad de la imagen cuando se descomprima.
Las distorsiones en la imagen son un tipo de artificio de compresión que puede ocurrir cuando un archivo se guarda y se edita repetidamente. Si bien cierta pérdida de calidad puede ser tolerable (inclusive no notarse) en ciertas circunstancias, otros gráficos como textos, logotipos, imágenes médicas o dibujos técnicos necesitan una compresión sin pérdidas para preservar su calidad original.
Reformateo
Los diferentes formatos de archivo son comprimidos de forma diferente y son compatibles con diferentes paletas de colores, niveles de transparencia y tipos de imágenes. Como resultado, es sumamente importante elegir el formato correcto para tu imagen. Por ejemplo, el formato JPEG permite una amplia paleta de colores y ganancias de compresión significativas, lo que lo hace adecuado para fotografías, aunque su formato de compresión con pérdidas es problemático para animaciones o gráficos que necesitan transparencia o reedición. Por el contrario, los 256 colores que permite el formato GIF no proporcionan suficiente gradiente para fotografías fijas, por lo que los tonos de piel y otras superficies con transiciones sutiles entre colores se ven desiguales y pixelados.
Finalmente, tanto GIF como PNG admiten transparencia. Sin embargo, GIF solo acepta transparencia de 1 bit, lo que significa que cada píxel debe ser completamente transparente o completamente opaco. PNG tiene transparencia de 8 bits, también conocida como canal alfa. Esto permite que los píxeles tengan diferentes niveles de opacidad, lo que permite gráficos parcialmente transparentes como marcas de agua.
Algunos de los tipos de archivos de mapa de bits más utilizados hoy en día incluyen:
- JPEG: un formato de compresión con pérdidas con más de 16 millones de colores, usado a menudo para fotografías.
- PNG: un formato de compresión sin pérdidas compatible con canal alfa de 8 bits y más de 16 millones de colores, usado para gráficos transparentes y gráficos que necesitan reedición.
- GIF: un formato de compresión sin pérdidas que admite transparencia de 1 bit, animaciones y 256 colores, usado para imágenes animadas.
- WebP: un nuevo formato desarrollado por Google que proporciona una compresión superior con y sin pérdidas, compatible con animaciones y canal alfa de 8 bits.
En términos de compresión y flexibilidad, WebP ofrece ventajas significativas respecto a otros formatos. No solo porque es compatible con animaciones y canal alfa de 8 bits; Google Developers asegura que “las imágenes WebP con compresión sin pérdidas son 26 % más pequeñas comparadas con imágenes en PNG. Las imágenes WebP con compresión con pérdidas son entre 25 y 34 % más pequeñas que imágenes JPEG”.
Aunque es una buena noticia para los desarrolladores, WebP es aún un nuevo formato de archivo y sigue sin ser compatible con versiones anteriores de muchos navegadores. Esto significa que mientras WebP puede ofrecer gráficos hermosos y con alto desempeño a unos usuarios, otros pueden terminar viendo apenas una imagen dañada.
Para evitar esto, las empresas deben elegir entre usar formatos de archivos más antiguos o proporcionar diferentes formatos para diferentes tipos de navegadores. Para sitios web con una gran cantidad de imágenes, configurar manualmente diferentes opciones de suministro para cada imagen es un trabajo tedioso y que consume bastante tiempo.
Redimensionamiento
Ajustar el tamaño de una imagen para una página web puede ser una tarea desafiante, y puede complicarse todavía más considerando la amplia gama de resoluciones y tamaños de pantallas disponibles en la actualidad. Proporcionar una imagen con pequeñas dimensiones en píxeles puede ser adecuado para un dispositivo pequeño, pero esa misma imagen en un dispositivo con una pantalla más grande o de mayor resolución puede verse granulada o borrosa. De la misma manera, una imagen grande que se ve bien en un computador de escritorio puede necesitar recortarse para aparecer en un dispositivo móvil y garantizar que todos los detalles sean visibles para el usuario.
Algunos de los problemas que pueden surgir con el enfoque de usar una imagen de tamaño único son:
- imágenes que ocupan demasiado espacio en la pantalla;
- detalles que se pierden en pantallas pequeñas;
- imágenes pixeladas o borrosas en pantallas grandes y de alta resolución;
- ancho de banda desperdiciado por proporcionar imágenes grandes a usuarios móviles, y
- velocidades de carga lentas porque los navegadores deben descargar imágenes demasiado grandes.
Las tecnologías de imagen responsivas resuelven este problema al permitir que los desarrolladores puedan ofrecer diferentes archivos de imágenes que tienen diferentes números de píxeles para diferentes resoluciones de pantalla (conocido como cambio de resolución) o varias versiones para diferentes diseños y orientación de las pantallas. Sin embargo, configurar manualmente múltiples resoluciones y versiones para cada foto (o peor, para cada formato de cada foto) agrega otra tarea tediosa para la administración de un sitio web.
Conclusión
Garantizar que las imágenes se muestren correctamente en una amplia gama de dispositivos, navegadores y tamaños de pantalla requiere una configuración y gestión intensivas que pueden llevar mucho tiempo y resultar difíciles de realizar correctamente. Asegurar que esas imágenes sean atractivas para los usuarios, pero que también sean ofrecidas de forma eficiente sin importar las condiciones de la red, agrega un nivel de complejidad a esta tarea. Tomando eso en cuenta, usar un servicio de procesamiento de imágenes capaz de automatizar ese trabajo puede reducir significativamente el costo operativo por la optimización de imágenes.
Image Processor de Azion te permite automatizar muchas de esas tareas al diseñar flujos de trabajo que realizan la optimización de imágenes sin tener que gestionar la infraestructura. Con Image Processor, puedes:
- recortar y cambiar automáticamente el tamaño de las imágenes sin gestionar múltiples archivos;
- reducir el tamaño de las imágenes un 80 % en promedio, sin perder calidad visual;
- convertir imágenes automáticamente para el formato WebP cuando los navegadores sean compatibles;
- aplicar marcas de agua y otros filtros, y
- monitorear el ahorro de ancho de banda con Real-Time Metrics.
Como resultado, las principales marcas internacionales, como Lojas Renner, confían en Azion para reducir sus tareas operativas, mejorar el desempeño y ahorrar en costos de infraestructura. Los servicios de Azion permitieron a Renner manejar un tráfico que alcanzó un pico de 13 000 solicitudes por segundo durante el Black Friday de 2019. El uso de Image Processor facilitó alcanzar a usuarios móviles y aquellos con ancho de banda limitado, mejorar su rendimiento de SEO y aumentar el tráfico orgánico y las conversiones de ventas. Para obtener más información, puedes consultar la historia de éxito completa aquí o revisar las ventajas que Image Processor ofrece.
