Los tipos de imágenes y su uso en el diseño web

¿Alguna vez te has preguntado cuál es la diferencia entre las imágenes JPEG, GIF y PNG que utilizamos en la web? Como diseñador, y especialmente como diseñador web, es importante conocer la diferencia entre los diferentes formatos de las imágenes y cómo usarlos en cada caso. En este artículo se discutirá cómo usarlos en cada situación para mantener los tamaños de archivo pequeños y la calidad de imagen alta. Presentaremos lo «básico», pero la información debería ser interesante para cualquiera que busque un conocimiento más profundo de los formatos de imagen.

Las diferencias

Para utilizar mejor una herramienta, primero necesitas entender cómo funciona. Para comprender cómo usar mejor los tipos de imágenes, debemos observar cómo funciona su algoritmo de compresión. Lo sé, lo sé, no eres un fanático de los números, pero no te preocupes. Es como conducir un coche; puedes conducirlo mejor cuando sabes cómo interactúan todas las pequeñas partes. Además, cuando algo vaya mal, ¡sabrás cómo arreglarlo!

Acerca del formato .JPG

JPEG fue desarrollado por el Joint Photographic Experts Group. Como habrás adivinado, funciona bien para tipos de imágenes naturales (fotografía). Los tipos de imágenes naturales, como la fotografía, tienen variaciones suaves de colores, lo que significa que el formato JPEG también funciona bien para imágenes que contengan degradados y diferentes tonos y colores.

Un punto importante sobre los JPEGs es que, por lo general, son un formato con pérdida, a menos que utilices otra variación que no se vea afectada por las pérdidas. La compresión con pérdida es simplemente una forma de codificación que descarta (pierde) algunos de sus datos... por tal motivo, si guardas un JPG 100 veces, se irá deteriorando poco a poco con el tiempo, Existen versiones de JPGs «sin pérdidas», pero esas variaciones no son comunes y no tienen un soporte generalizado. Si necesitas almacenar datos de imágenes en un formato  que no tenga pérdidas, es mejor utilizar un formato como TIFF o PSD.

Ahora la parte técnica: el proceso de un JPEG divide la imagen en bloques de 8 × 8 píxeles y los procesa mediante un cálculo DCT (siglas en inglés de “Transformada de coseno discreta”) seguido de la cuantificación (JPEG 2000, una versión más reciente, utiliza una transformada wavelet en vez de DCT).

En términos simples: básicamente mira los bloques de la imagen y determina las pequeñas variaciones de color, luego descarta algunas de esas variaciones según el nivel de compresión que hayas escogido. Los datos que se descartan se eliminan del archivo por completo, lo que da como resultado un archivo pequeño. Por consiguiente, esto disminuye también la calidad de la imagen; probablemente sepas que si ajustas la compresión muy alta, terminarás con una imagen degradada y pixelada... mientras que unos ajustes de compresión más bajos darán como resultado una imagen de mayor calidad.

Acerca del formato .GIF

GIF (siglas en inglés de “Formato de intercambio de gráficos”) fue desarrollado por CompuServe y utiliza el método de compresión LZW (Lempel-Ziv-Welch), que no tiene pérdidas. Este método de compresión crea una tabla de colores para la imagen donde cada valor de color se asigna a los píxeles. Este método de compresión hace que este formato de imagen sea ideal para arte lineal, logotipos u otras imágenes simples sin degradados o variaciones de color.

Una nota interesante sobre este método de compresión es que ve al cambio de píxel de manera horizontal. Eso significa que las imágenes en las que los cambios de color de los píxeles ocurren con más frecuencia en sentido horizontal serán más grandes que las imágenes en las que los cambios de color de los píxeles ocurren con más frecuencia en sentido vertical. El formato admite hasta 8 bits por píxel, lo que permite que una sola imagen haga referencia a una paleta de hasta 256 colores distintos. Puedes utilizar menos colores (quizá haya visto imágenes GIF usando solo una pequeña cantidad de colores), lo que puede dar algunos resultados interesantes, incluso artísticos.

El formato GIF puede hacer dos cosas adicionales que el formato JPEG no puede. Primero, un GIF puede usar transparencia. En un GIF, los píxeles son 100% transparentes o 100% opacos El formato GIF también es multiimagen, por lo que puedes utilizar animaciones (para bien o para mal).

Acerca del formato .PNG

PNG (siglas en inglés de “Gráficos de red portátiles”) se creó para reemplazar esencialmente, o al menos mejorar, al formato GIF. PNG utiliza el método de compresión DEFLATE, el mismo algoritmo que se utiliza en zip y gzip. No entraré en detalles sobre cómo funciona este método de compresión porque es un poco complicado para este artículo, pero es una compresión sin pérdidas. Por esta razón, el formato PNG suele resultar en tamaños de imagen más grandes que JPEG cuando se utiliza para imágenes de tipo fotográfico. Cuando se utiliza para imágenes de tipo arte lineal, PNG da como resultado tamaños de archivo mucho más pequeños que JPEG y casi siempre tamaños más pequeños que GIF.

A diferencia del formato GIF, PNG es igual que JPEG en el sentido de que es un formato de imagen único, lo que significa que PNG no admite animaciones. No obstante, tiene una gran ventaja que ni JPEG ni GIF tienen: alpha transparency (transparencia alfa). Los píxeles de una imagen PNG podrían ser 50% transparentes en comparación con el formato GIF, que requeriría que esos píxeles fueran 100% transparentes o 100% opacos. Como podrás imaginar, esto permitiría una mejor mezcla y unos gráficos más finos que con GIF. PNG también implementa otras mejoras sobre el formato GIF, pero no es necesario hablar de ellas.

Sobra decir que PNG es un formato mucho mejor que GIF en casi todos los aspectos, con la excepción de los archivos muy pequeños (como el que se utiliza en los patrones de fondo). Al principio, el formato PNG recibió críticas por parte de los diseñadores web por no ser compatible con algunos navegadores más antiguos, pero actualmente ese problema se puede resolver en gran medida a través de algunas excelentes secuencias de comandos, como la secuencia de comandos DD_Belated.

Como probablemente sepas, hay dos tipos principales de PNG.

• PNG8 (8 bits): esencialmente es lo mismo que un GIF en términos de limitaciones de color (256 colores como máximo) pero permite la transparencia alfa
• PNG24 (24 bits): permite una gama de colores mucho más amplia.

Utilizando JPEG, GIF y PNG

A continuación hay dos imágenes que utilizaré como ejemplo para mostrar cómo y cuándo usar cada formato de imagen. Quizá ya estés familiarizado con estos métodos, pero si no los has estudiado realmente, vale la pena revisarlos.

Usando JPG

Como puedes ver, la siguiente imagen es de naturaleza fotográfica con colores y tonos que varían extremadamente. Obviamente, no todas las imágenes usarán tantos colores, pero esta imagen es un excelente ejemplo del uso del formato JPEG.

Un JPG simple

La siguiente imagen muestra la compresión JPEG desde una configuración de calidad del 100% al 0%. Con una calidad del 100%, la imagen parece no tener pérdidas, pero los datos todavía son descartados de la imagen original. El ojo humano no puede ver la pérdida de datos ya que es minúscula. Al 50%, la calidad de la imagen disminuye notablemente, pero, como podrás ver, el tamaño del archivo es más de 100K más pequeño. Esa es una gran diferencia con una pérdida de calidad visible mínima. Al 25%, la imagen realmente empieza a verse mal y no se ha ahorrado mucho tamaño de archivo adicional. Al 0%, la imagen se ve horrible y, a pesar de que la imagen tiene un tamaño de archivo mucho más pequeño que la configuración del 100%, la compensación no vale la pena.

Ejemplos de compresión JPG

Esta imagen probablemente se vería mejor con una calidad de ~65%, lo que reduciría el tamaño de la imagen en casi 100K. Para determinar la mejor configuración para un archivo JPEG, reduce lentamente el control deslizante hasta que empieces a ver que la calidad de la imagen realmente se degrada. Luego, vuelve a subir la calidad entre 5 y 10% aproximadamente.

Compresión JPG al 65%

Sabemos que este JPG se ve decente para la web; veamos algunas comparaciones de calidad/tamaño de archivo para los otros formatos:

GIF nos da como resultado un tamaño de archivo de 63.77K y una imagen con una apariencia horrible.

PNG8 nos da como resultado un tamaño de archivo de 53,52 KB debido a los métodos de compresión más avanzados, pero tiene el mismo aspecto que el GIF.

PNG24 no da como resultado un tamaño de archivo de 253,9K y se parece al original, pero no vale la pena el tamaño grande de archivo.

La mejor opción posible para este tipo de imagen es JPEG con una calidad de ~65%; un tamaño de archivo pequeño (39,77 K) con muy poca pérdida de calidad visual.

Usando GIF y PNG8

Como puedes ver a continuación, la imagen no utiliza colores o tonos variables, sino colores sólidos. Esta imagen es de 5.72K (GIF) y utiliza un total de 8 colores. Esto hace que GIF y PNG8 sean excelentes formatos para arte lineal, logotipos de colores simples, etc. PNG8 aquí sería una mejor opción, pues da como resultado un tamaño de archivo más pequeño (3.54K) debido al mejor método de compresión que utiliza.

Compresión GIF (nota la paleta de colores limitada)

Cuando tratas de guardar un GIF, similar a la imagen de arriba, como formato JPEG, puede derivar en pixelado o distorsión de la imagen. Siempre dará como resultado tamaños de archivo mucho más grandes cuando estás trabajando con fotografías y otras imágenes vivas. La siguiente imagen está ajustada en una compresión máxima y da como resultado un tamaño de archivo de casi 8K para JPEG frente a 5.72K para GIF y 3.54K para PNG8.

Compresión GIF ...

Comparada con la compresión JPG de baja calidad

A diferencia de JPEG y PNG24, GIF y PNG8 te permiten seleccionar cuántos colores se pueden utilizar (hasta 256). En el caso de imágenes como logotipos y arte lineal simple, puedes lograr un tamaño de archivo más pequeño seleccionando menos colores. No obstante, ten cuidado de no seleccionar muy pocos colores, ya que se puede provocar que la imagen se vea mucho peor.

Ejemplo de selección de color para GIF

La siguiente imagen es un PNG8 con transparencia (GIF tiene la misma apariencia) como se ve en Photoshop. Al utilizar la transparencia con GIF o con PNG8, quizá debas establecer el mate de la imagen igual que el color del fondo, para lograr una mejor combinación y una imagen con una apariencia más limpia. Como se mencionó previamente, esto se debe a que GIF no es compatible con la transparencia alfa y Photoshop no admite la transparencia alfa con el formato PNG8, aunque sí lo soporta (Edición: esto se ha corregido en las nuevas versiones de Photoshop).

Ejemplo de PNG8

Afortunadamente, Fireworks nos permite usarr la transparencia alfa con el formato PNG8 (¡vamos Photoshop!). Como puedes ver en la imagen siguiente, el degradado negro todavía está limitado en la variación de tono, lo que hace que el degradado se vea un poco entrecortado. Lo mejor de usar la transparencia alfa con PNG8 es que aún consigues un tamaño de archivo pequeño, pero los bordes se combinan suavemente e incluso los degradados menores se ven excelentes.

Otra gran ventaja del formato PNG8 es que IE6 admite el uso de transparencia alfa de forma nativa. Eso significa que para imágenes simples que necesiten transparencia alfa (sombras, logotipos, etc.), ¡no es necesario ningún hack en IE6 al usar PNG8 y transparencia alfa!

Ejemplo de transparencia alfa en PNG8

Desafortunadamente, no puedes guardar una imagen como PNG8 con transparencia alfa en Photoshop, por lo que tendrás que utilizar Fireworks para hacerlo.

En la paleta Optimizado, selecciona el formato PNG8 con la transparencia alfa seleccionada, luego haz clic en «Reconstruir» en la esquina inferior derecha.

No tienes que seleccionar un color mate y puedes ajustar la cantidad de colores según tus necesidades y reducir el tamaño del archivo. En el ejemplo de la derecha, he guardado estas ajustes como «PNG8 Alpha-T», así que no necesito volver a seleccionar cada opción cada vez que quiera guardar una imagen PNG8 con transparencia alfa.

¡Es tan simple como eso!

Usando PNG24

Usar PNG24 básicamente es la misma idea que utilizar GIF o PNG8, excepto que nos dará como resultado un tamaño de archivo más grande porque admite una gama mucho más amplia de variaciones de color. Si tienes imágenes con degradados más complejos que necesitan transparencia o mayor profundidad de color, PNG24 es la mejor opción. Desafortunadamente, IE6 no soporta PNG24 de forma nativa; así que tendrás que usar un «hack» para que funcione adecuadamente.

Los PNG24 son excelentes en la mayoría de los casos en los que necesites transparencia; tienen un tamaño de archivo mucho mayor, pero funcionan bien para logotipos de marcas, donde la calidad es importante y no quieres usar un formato con pérdida.

Otros formatos

WebP (el formato de imagen web de Google):

Este es un formato relativamente nuevo, anunciado hace apenas un par de semanas por el propio Google. De su comunicado de prensa:

«Para mejorar la compresión que ofrece JPEG, utilizamos un compresor de imágenes basado en el códec VP8 que Google convirtió en código abierto en mayo de 2010. Aplicamos las técnicas de la codificación intra frame de video VP8 para extender los límites de la codificación de imágenes fijas. También adaptamos un contenedor muy ligero basado en RIFF. Aunque este formato de contenedor contribuye a una sobrecarga mínima de solo 20 bytes por imagen, es ampliable para permitir a los autores guardar los metadatos que deseen».

A pesar de que los beneficios de un formato de imagen basado en VP8 eran claros en teoría, necesitábamos probarlos en el mundo real. Para medir la eficacia de nuestros esfuerzos, elegimos al azar alrededor de 1,000,000 de imágenes de la web (en su mayoría JPEG y algunas PNG y GIF) y las recodificamos en WebP sin comprometer de forma perceptible la calidad visual. Esto dio como resultado una reducción promedio del 39% en el tamaño del archivo. Esperamos que los desarrolladores logren en la práctica una reducción aún mejor del tamaño del archivo con WebP al empezar con una imagen sin comprimir.

El objetivo aquí es simple: acelerar las imágenes en la web usando algoritmos más modernos. La pregunta es esta: ¿será adoptado? Google es una empresa enorme con un poder real para llevar este formato a un nivel masivo, pero como hemos visto con algunos de sus productos (¡te estoy mirando Wave!), incluso las grandes ideas pueden fracasar.

Formato SVG

“Scalable Vector Graphics” (Gráficos vectoriales escalables) es un formato que nunca llegó a ser un tipo de imagen ampliamente utilizado. La idea detrás de este formato es permitir «gráficos vectoriales» en la web. El formato utiliza XML como base para describir una imagen 2D en la web. La compatibilidad de los navegadores con SVG es inconsistente, pero si realmente quieres incluir gráficos escalables, vale la pena documentarse sobre este formato.

Conclusión

En tu tiempo libre te animo a profundizar un poco más en estos formatos de imagen y todo lo que pueden ofrecer. Aprenderás mucho y sabrás exactamente lo que puedes hacer con estos formatos de imagen o cuál usar para cada situación. A medida que la banda ancha se expande por Internet, el valor de los tamaños de archivo superpequeños para las imágenes parece estar pasando, pero la velocidad siempre será una característica útil de un sitio y conocer estos formatos de imagen es el primer paso para optimizar tus propias imágenes en la web.

¡Si tienes alguna pregunta o algún comentario, no dudes en publicarlo a continuación!