El objetivo de este artículo no es explicar cómo se realizan efectos de degradado con un programa de diseño. Más bien vamos a escenificar una guerra entre los formatos de imagen GIF, JPEG y PNG. Una batalla para determinar cuál de los formatos de imagen es el mejor para mostrar efectos de degradado en una página web. Existen dos aspectos que determinarán el resultado de esta comparativa:

• El tamaño en bytes de la imagen
• La calidad de la imagen

La batalla comienza!

GIF

Primero, trataremos con nuestro viejo amigo, el formato GIF. A continuación hay varios ejemplos con diferentes profundidades de color y con/sin dithering:

Nota: Dithering es una técnica que permite dibujar con un color utilizando una mezcla de varios colores. Por ejemplo, si queremos dibujar de color gris, podemos mezclar píxeles blancos y negros en la imagen.

• (7.8Kb)
• (20.1Kb)
• (2.5Kb)
• (7.8Kb)

De los ejemplos de arriba está claro que escogeríamos el cuarto GIF, por su pequeño tamaño en bytes y porque mantiene la calidad utilizando dithering.

JPEG

Bien, ¿Cómo se comporta JPEG? Observa los siguientes ejemplos (todos son progresivos, cada uno con un diferente porcentaje de compresión con pérdida).

• (5.1Kb)
• (2.2Kb)
• (1.6Kb)
• (1.5Kb)
• (1.3Kb)
• (1.2Kb)
• (1.2Kb)
• (1.1Kb)
• (0.9Kb)
• (0.8Kb)

JPEG es un formato mucho mejor para este tipo de degradados. El quinto ejemplo de JPEG puede ser un candidato adecuado, ocupa 1.3 Kb y es 6.5 Kb más pequeño que la imagen escogida previamente con formato GIF. La calidad es suficientemente buena, mejor que la siguiente muestra, en posición sexta (40% de compresión).

PNG

El último contrincante, el nuevo formato PNG. Los ejemplos son estos:

• (0.7Kb)
• (0.5Kb)
• (1.2Kb)
• (14Kb)
• (0.3Kb)
• (0.6Kb)

Muy bien! PNG es fantástico!. Debería quedar claro qué ejemplo es el ganador. Efectivamente, el segundo ejemplo en PNG es el mejor. Entre todos los competidores, tiene la mejor calidad, en profundidad de color 24-bit y en tamaño del archivo, increíblemente más pequeño ¡de sólo 0.5Kb!

Conclusión

Espero que estés de acuerdo con mi conclusión en este artículo. He querido probar que PNG es el mejor formato de imagen de los disponibles. No hay razón para no utilizar PNG. Úsalo y sé feliz con él.

Nota: Aun se pueden comprimir más las imágenes anteriores en PNG utilizando alguna herramienta como PNGcrush, PNGquant y PNGrewrite.