Formatos de imagen para la web: ¿Cuál elegir?

¿Compresión con o sin pérdida de calidad?

Pues ahora hablamos del tema, lo que tenemos que tener claro es que siempre vamos a usar compresión. Comprimir una cosa es reducir de alguna manera sus dimensiones para que ocupe menos. Si comprimimos varias cosas para que quepan en un espacio determinado puede bastar con ordenarlas adecuadamente, o si queremos reducirlas mucho a veces es necesario eliminar partes de un objeto para tenga un tamaño menor.

Imaginemos un cajón para guardar calcetines. Si los metemos todos sueltos, sin doblar y sin ordenar, nos cabrán unos cuantos. Pero si los doblamos y los guardamos ordenaditos seguramente cabrán muchos mas. Y si cortáramos los calcetines en pedacitos de 2 x 2 cm seguramente nos quepan muchísimos más, aunque luego será complicado usarlos…

Todos los formatos de imagen de mapa de bit que podemos usar en nuestros sitios web usan compresión. Es lógico, si podemos elegir entre incluir en nuestra web una imagen de 2 mb o descargar la misma imagen que pese 30 kb, optaremos por esta última porque hará que nuestra página se cargue mucho más rápida.

A la hora de guardar una imagen de mapa de bits y escoger el formato estaremos escogiendo también si vamos a usar compresión sin pérdida de calidad o con pérdida de calidad. Vamos a ver en qué consiste cada tipo de compresión:

Compresión sin pérdida de calidad

Imaginemos que tenemos una caja de cartón vacía, pero montada, y la queremos guardar en un armario. La caja ocupa un volumen innecesario pues no tiene nada dentro así que si pudiéramos doblarla de alguna manera conseguiremos que ocupe menos y podremos meter muchas más cajas dentro del armario. Pues manos a la obra, desmontamos la caja, la doblamos y voilá! dejamos la caja en un rectángulo de cartón mas o menos grande pero muy fino. Imaginemos ahora que dentro de un mes necesitamos montar de nuevo la caja para usarla. La sacamos, la ensamblamos otra vez y nuestra caja está exactamente igual que estaba antes de meterla en el armario. Pues bien, esto sería compresión sin pérdida de calidad, pues la caja antes y después de ser comprimida tiene exactamente la misma apariencia. Una imagen de mapa de bit guardada en un formato que utilice compresión sin pérdida de calidad se ve exactamente igual antes y después de guardarla, consiguiendo además que ocupe menos espacio cuando lo almacenamos en el disco.

En este ejemplo vemos el efecto de aplicar compresión con pérdida de calidad (abajo)

Compresión con pérdida de calidad

En el ejemplo anterior, cuando doblamos la caja para guardarla conseguimos ahorrar bastante espacio. Sin embargo la cantidad de espacio que podemos ahorrar está limitada, porque la caja solo la podemos doblar de una manera si queremos poder montarla de nuevo después. Imaginemos que incluso doblando la caja todavía necesitamos que ocupe menos espacio. En este caso, podemos coger unas tijeras y cortar nuestra caja en pedacitos, por ejemplo, de 5 x 5 cm, de forma que ahora nuestra caja ocupará mucho menos y nos cabrán más cajas dentro del armario. Pero ¿qué pasaría si necesitamos de nuevo la caja dentro de un mes para usarla? pues nos tocará coger cinta adhesiva y volver a pegar los pedacitos para reconstruir la caja. Está claro que el aspecto final de la caja cuando la volvamos a montar no será el mismo que tenía al principio… Pues bien, esto sería compresión con pérdida de calidad, pues la caja ya no es igual después de guardarla que como estaba antes. Una imagen de mapa bit guardada en un formato que utilice compresión con pérdida de calidad no se verá igual que el original después de guardarlo, y nunca volverá a estar como estaba al principio.

Mejor sin pérdida ¿o no?

Pues depende. Con el ejemplo que acabamos de poner parece que siempre que podamos, es mejor utilizar compresión sin pérdida de calidad. Sin embargo hemos visto que cuando doblamos la caja, si queremos volver a reconstruirla posteriormente, no podemos doblarla todo lo que nos gustaría y eso nos limita hasta donde podemos reducir su tamaño. Con las imágenes de mapa de bit pasa igual, cuando usamos compresión sin pérdida de calidad no vamos a poder decidir cuánto espacio queremos ahorrarnos sino que será la propia imagen la que determine hasta cuanto se puede comprimir. Por el contrario, en la compresión con pérdida de calidad podemos elegir el nivel de compresión y por tanto el ahorro de espacio que queremos para nuestra imagen. Eso si, a costa de la calidad.

El comando «guardar para web» de Photoshop nos permite ajustar la compresión previsualizando el resultado final

Formatos y compresión de imágenes.

Una vez visto el funcionamiento de la compresión vamos a ver qué formatos usan compresión con pérdida y sin pérdida de calidad, cuáles son sus características y en qué circunstancias nos conviene más su uso.

 GIF (Graphics Interchange Format)

El formato GIF es uno de los formatos de imagen bitmap más veterano. Creado por Compuserve en 1987, se hizo popular rápidamente por su uso en internet. El formato GIF utiliza el algoritmo de compresión LZW (Lempel Ziv Welch) sin pérdida de calidad. Sin embargo solo es capaz de almacenar imágenes con una paleta de hasta 256 colores (8 bit).

El hecho de que el formato GIF solo pueda almacenar paletas de color de 8 bit es lo que provoca mayor confusión. Si tenemos una imagen original con más de 256 colores y la guardamos en GIF, al compararlas podremos apreciar que las dos imágenes (original y guardada en GIF) no son iguales. ¿Pero no era un formato con compresión sin pérdida? Si, y lo que ha sucedido realmente no es una pérdida de calidad sino una reducción en el número de colores de la imagen. Previamente al guardado de la imagen y a la compresión, hay obligatoriamente una reducción de colores en la imagen que no tiene nada que ver con la compresión. Es lógico, si tenemos una imagen con una paleta de 1 millón de colores y la queremos guardar en GIF, solo podemos utilizar 256 como máximo, haciendo que la imagen no se vea igual que la original.

Sin embargo, si la imagen que vamos a guardar en GIF tiene 256 colores o menos, la imagen resultante si se verá exactamente igual que el original y con un tamaño bastante menor. Por este motivo el formato GIF es el más adecuado para almacenar imágenes que hayan sido creadas con un número reducido de colores como por ejemplo:

• Ilustraciones vectoriales
• Logotipos
• Iconos tipo vectorial
• Textos creativos que hayan sido modificados y no puedan usarse directamente como texto HTML
• Imágenes muy pequeñas (avatares, por ejemplo)

No guardes en GIF una imagen fotográfica con 10 millones de colores porque por un lado, como hemos comentado ya, al reducir la paleta la imagen no se verá igual y además la compresión sin pérdida no podrá reducir demasiado el tamaño de la imagen generando un archivo bastante pesado.

A la izquierda, la imagen original. A la derecha el resultado en GIF con una paleta de 32 colores. Puede apreciarse el empastado de colores al reducir la paleta

Además el formato GIF tiene alguna característica interesante más:

• Personalizar la paleta de colores. A la hora de reducir la paleta de la imagen original, podemos elegir cuántos colores queremos quedarnos controlando de cierta forma la apariencia y el tamaño del archivo final.
• Uso de tramados. Para disimular el efecto de bandeo y empastado de colores que se produce al reducir colores, podemos elegir entre distintos tipos de tramado. Sin embargo, si es necesario usar tramado es que tu imagen seguramente se deba guardar mejor en JPG.
• Entrelazado. Al activar esta opción, tu archivo GIF se descargará por pases al verlo en un navegador, lógicamente se aprecia si el archivo tiene cierto peso o la conexión del usuario es lenta. Esto hace que no se vea un hueco en blanco en tu web hasta que se termine de cargar la imagen del todo.
• Transparencia. Una de las más interesantes aunque hoy en día poco efectiva, el formato GIF permite convertir un color de la paleta en transparente y crear imágenes silueteadas sin fondo. Ojo, un solo color, sin semitransparencias (transparencia de 1 bit) por lo que la imagen resultante presentará un halo del color de fondo bastante apreciable o directamente los bordes pixelados. Tranquilos, el formato PNG soluciona este problema.
• Animaciones. La más importante y la más usada en la Web 1.0, los gif animados inundaron nuestras pantallas durante los años 90. Banners, logotipos dando vueltas, fondos imposibles, casi epilépticos… Aunque lo retro está de moda y aún se utilizan en determinadas circunstancias, las nuevas características de HTML5 y CSS3 (y en su momento Flash) hacen que cada vez se usen menos las animaciones GIF. Por cierto, hay varias aplicaciones para crear gif animados y por ejemplo con Photoshop, desde su panel de animación, es bastante sencillo crearlos.

 JPEG (Joint Photographic Experts Group)

JPEG (usa la extensión JPG al guardar el archivo) es uno de los formatos de archivo más populares no solo por su uso en Internet, sino que por sus características se usa casi como un estándar para intercambiar imágenes en las que preservar la máxima calidad no sea una prioridad. El formato JPG utiliza un algoritmo de compresión con pérdida de calidad que se llama también JPG.

El formato JPG es capaz de almacenar imágenes con paletas de color RGB de 24 bit, por lo que no tiene las limitaciones del formato GIF que hemos visto antes. Por el contrario, la compresión con pérdida hará que el archivo resultante después de guardar no se vea igual que el original, sino que percibiremos «defectos» más o menos apreciables en función de la cantidad de compresión que apliquemos. La compresión JPG se basa en dos características del ojo humano:

• Nuestro ojo es más sensible a los cambios de luz que a los cambios de color. La compresión JPG se aprovecha de esto para eliminar información de color y mantener la información de luminosidad, generando lo que se conoce como submuestreo cromático, utilizado también en la edición de video digital y prácticamente por todas las videocámaras del mercado.
• El ojo humano nota con más facilidad pequeños cambios de brillo en zonas homogéneas que en zonas donde la variación es grande; por ejemplo en los bordes de los cuerpos de los objetos. Esto será también determinante a la hora de elegir el formato en función del tipo de imagen que queremos guardar.

La compresión JPG es regulable, y aquí es donde está su principal ventaja. A la hora de almacenar una imagen en formato JPG vamos a poder decidir la relación entre calidad/tamaño del archivo que queremos conseguir: a mayor calidad, mayor tamaño (menos compresión) y a menor calidad, menor tamaño (más compresión)

Otra cosa muy importante es que la compresión es acumulativa: si guardamos un archivo en JPG, lo editamos y lo volvemos a guardar en JPG, nuestro archivo habrá vuelto a perder calidad de nuevo y se verá aún peor.

Con todo esto, y sobre todo teniendo en cuenta como se va eliminando información de la imagen al comprimir, elegiremos el formato JPG cuando queramos guardar:

• Cualquier imagen de tipo fotográfico, con una paleta de colores de 24 bit.

Por el contrario, no usaremos JPG para logotipos, vectores, texto, imágenes con pocos colores, en cuyo caso usaremos el formato GIF, o si necesitamos eliminar el fondo de una imagen pues en JPG no se admiten transparencias.

PNG (Portable Network Graphics)

El más joven de todos, el formato PNG surge como alternativa gratuita al formato GIF, además de corregir algunas deficiencias de éste. Surgió haca 1995 como un estándar de código GNU (libre) y sus principales aportaciones son:

• Puede almacenar imágenes tanto de 256 colores (PNG-8) como en RGB de 24 bit (PNG-24)
• Utiliza compresión sin pérdida de calidad en ambos casos (algoritmo de deflación)
• Admite transparencia, y aquí viene un de las principales ventajas: mientras que en la versión de 8 bit la transparencia es de un solo color (igual que en GIF), en la versión de 24 bit se admite transparencia de 8 bit, por lo que se pueden generar semitransparencias, imágenes con siluetas suaves y complejas.

Dos imágenes transparentes sobre fondo negro. A la izquierda en PNG con transparencia de 8 bit, a la derecha en GIF con un color transparente, y un «hermoso» halo blanco alrededor…

El soporte por parte de los navegadores de internet ha ido mejorando progresivamente y hoy en día podemos usar PNG en nuestros sitios web sin ningún problema y aprovechar todas sus ventajas. ¿Cuándo usaremos PNG?

• En general PNG comprime mejor que GIF. Cuando vayamos a usar imágenes de menos de 256 colores, como en ambos casos se utiliza compresión sin pérdida de calidad, los resultados en cuanto a calidad serán idénticos, por lo que comprobaremos cual de las 2 opciones ofrece un tamaño de archivo más pequeño. Lo usaremos en los mismos casos que en GIF: ilustraciones, iconos, vectores…
• Si la imagen tiene muchos colores entonces debemos comparar entre JPG y PNG-24. En este caso será complicado usar PNG, pues casi siempre generaremos archivos mucho más pesados que en JPG debido a que la compresión con pérdida nos permite ahorrar mucho más espacio. Solo en el caso en que necesitemos eliminar el fondo o crear una transparencia nos decantaremos por PNG, pero vigilando el tamaño del archivo.

Esperamos que con estas indicaciones podáis conocer mejor el funcionamiento, ventajas e inconvenientes de cada tipo de formato de imagen y su compresión. Para diseño web es fundamental no equivocarse pues tanto la calidad como el tamaño del archivo son fundamentales para obtener buenos resultados y optimizar recursos y velocidad de carga de nuestra página.

Nos vemos en Nowe!