Icono del sitio Carlos A. Oliveras

¿Cuándo guardar en JPEG y cuándo en GIF/PNG?

[dropcap]Y[/dropcap]a que hace poco hablé del tema de los formatos de imagen (aquí la introducción), quizá sea buen momento para tocar otro asunto que reservaba para un vídeo: cuándo grabar en JPEG y cuando en GIF (también hablaré del PNG, pero lo dejo para el final). Este tema es más útil para diseñadores o para uso general (dibujos, gráficos, capturas de interfaz/ventanas) que para fotografía, pero con cierta frecuencia veo en Internet casos donde se usa el JPEG para imágenes que en GIF (o PNG) se verían mejor y ocuparían menos, así que creo que no estará de más explicar las diferencias y ventajas de los formatos GIF y PNG sobre el JPEG.

El formato GIF

El GIF es un veterano formato de imagen que emplea color indexado, lo cual significa que codifica los colores RGB con una tabla y los referencia desde un único canal. Esto permite reducir el espacio necesario para almacenar los datos, pero implica trabajar con una paleta más bien pequeña: 256 colores como máximo (en el caso del GIF), en comparación con los 16 millones de un JPEG con 3 canales de 8 bits. Es por este motivo que el GIF no nos va a resultar útil para fotografías, pues las escenas del mundo «real» contienen demasiados tonos diferentes como para representarlos correctamente con una paleta tan limitada:

La paleta más reducida de los GIF permite reproducir fácilmente zonas de colores uniformes, pero dificulta la representación de degradados o transiciones como los que encontramos en la mayoría de fotografías. En este caso he aumentado la imagen al 200% para apreciar mejor el problema.

Sin embargo, el formato GIF tiene ciertas ventajas:

• Comprime sin pérdida, de modo que no crea defectos como los de la compresión con pérdida de los JPEG (efecto pixelado y contornos mal definidos)

• Admite el uso de transparencia

• Admite el uso de animaciones (los clásicos «gifs» animados que tanto dieron la lata en su día)

Uno de los millones de escalofriantes GIFs animados que nos torturaban en los años 90. Cuantos más tuviera una página web, mejor, o al menos eso parecía pensar mucha gente. (Nota: No todos los navegadores reproducen correctamente los GIFs animados).

Lo que más me interesa poner de relieve en esta entrada es la primera ventaja: significa que en aquellos casos donde la imagen sea un gráfico (no una fotografía), podremos guardar la imagen preservando perfectamente los contornos nítidos y las zonas de color lisas. Una imagen vale más que mil palabras, así que veamos algunos ejemplos donde el GIF aventaja al JPEG en calidad, con un tamaño en disco normalmente menor, cuando se trata de elementos que se pueden representar bien con 256 colores o menos:

La imagen está ampliada al 200% para apreciar mejor cómo el GIF conserva contornos definidos y fondo liso totalmente limpio, mientras que el JPEG, además de ocupar más, arruina esta limpieza de los contornos y del fondo con sus característicos artefactos de compresión.

La ventana «Guardar para web» (Archivo/Exportar…/Guardar para web…) facilita este tipo de comparaciones desde Photoshop. Aquí vemos otro ejemplo, también ampliado al 200%, donde tenemos en la parte superior la versión en GIF de 128 colores, que ocuparía 6,6 KB, y debajo la versión en JPEG con calidad 40, que ocuparía 8,5 KB con una calidad peor:

Clic para ampliar y ver en tamaño y calidad reales.

Un caso particular donde nos interesa usar el GIF es el de las capturas de pantalla donde aparezca la interfaz de algún programa, pues suelen tener pocos colores, contornos bien definidos (bordes de los elementos) y texto en menús y botones que es importante distinguir bien. Primero veamos la versión en GIF de 32 colores, que ocupa 11 KB:

Y ahora, la versión en JPEG con calidad 40, que ocupa 17 KB: si prestáis atención, veréis que incluye contornos «sucios» en las letras y zonas lisas:

El formato PNG

No quiero alargarme mucho en esta entrada, pero no puedo terminarla sin mencionar que el formato PNG nos permite hacer lo mismo que el GIF y, a la vez, disponer de más posibilidades; de hecho, el PNG se diseñó como sustituto del formato GIF. Las siglas del PNG abarcan una serie de variantes:

– Permite guardar imágenes de color indexado como el GIF, también con un límite de 256 colores (PNG 8, es decir, de 1 canal de 8 bits)

– Permite guardar una imagen con varios canales, tanto en 8 bits (PNG 24, es decir, 3 canales de 8 bits), como en 16 (PNG 48 – 3 canales de 16 bits)

– Adicionalmente, permite guardar un canal alfa que determine la transparencia como en un GIF, pero con mayor precisión (el GIF solo admite negro o blanco, mientras que el canal alfa de un PNG es una escala de grises)

Además de lo anterior, es importante subrayar que el formato PNG emplea compresión sin pérdida. En el caso de fotografías, quizá no sea tan interesante, porque para guardar sin pérdida en 8 o 16 bits ya tenemos el TIFF, y además, el formato PNG y Lightroom no se llevan bien al 100% (Lightroom no admitió la importación de PNGs hasta la versión 5, y no permite exportar en este formato). En todo caso, Photoshop sí que lo lee y lo guarda sin problemas, así que por un lado el PNG es una opción más que tenemos como formato final para imágenes RGB, y por otro lado, en casos que se puedan representar bien con una paleta de 256 colores o menos (gráficos, dibujos, diagramas, capturas de pantalla…), viene a ser como el GIF, pero con una compresión algo más eficiente y más posibilidades en cuanto a transparencia. Veamos un ejemplo comparativo de calidad y tamaños en KB:

De izquierda a derecha:
JPEG (calidad 30) 6,53 KB – GIF (16 colores) 4,60 KB – PNG (16 colores) 3,56 KB

El PNG ha vivido a la sombra del GIF mucho tiempo dado que el GIF es un formato más antiguo y tradicionalmente ha sido sinónimo de una mayor compatibilidad con navegadores y visualizadores de imágenes, pero hoy en día no creo que haya motivos de peso para no usar el PNG, salvo que queramos crear un gráfico animado, en cuyo caso el GIF animado sería la opción más recomendable (en realidad existe una variante de PNG que admite animación, pero no es tan «estándar»).

En resumen y para quedarnos con la copla: lo realmente importante de esta entrada es que si vais a guardar gráficos relativamente sencillos (sin elementos fotográficos ni combinaciones de degradados), capturas de pantalla o gráficos para una página web, seguramente os va a ir mucho mejor con un GIF o un PNG 8 que con un JPEG: conseguiréis mayor calidad y menor tamaño. ¡Un chollo, vamos!

Salir de la versión móvil