Efecto de degradado en diferentes formatos gráficos

Una muestra de imágenes que presentan un degradado en los formatos gráficos GIF, JPEG y PNG. Para ver cuál de ellos es el mejor por peso y calidad de la imagen.
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.
  • Gradient effect in GIF format (8-bit, undithered) (7.8Kb)
  • Gradient effect in GIF format (8-bit, dithered) (20.1Kb)
  • Gradient effect in GIF format (4-bit, undithered) (2.5Kb)
  • Gradient effect in GIF format (4-bit, dithered) (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).
  • Gradient effect in JPEG format (100% compression) (5.1Kb)
  • Gradient effect in JPEG format (90% compression) (2.2Kb)
  • Gradient effect in JPEG format (80% compression) (1.6Kb)
  • Gradient effect in JPEG format (70% compression) (1.5Kb)
  • Gradient effect in JPEG format (60% compression) (1.3Kb)
  • Gradient effect in JPEG format (50% compression) (1.2Kb)
  • Gradient effect in JPEG format (40% compression) (1.2Kb)
  • Gradient effect in JPEG format (30% compression) (1.1Kb)
  • Gradient effect in JPEG format (20% compression) (0.9Kb)
  • Gradient effect in JPEG format (10% compression) (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:

  • Gradient effect in PNG format (32-bit) (0.7Kb)
  • Gradient effect in PNG format (24-bit) (0.5Kb)
  • Gradient effect in PNG format (8-bit, undithered) (1.2Kb)
  • Gradient effect in PNG format (8-bit, dithered) (14Kb)
  • Gradient effect in PNG format (4-bit, undithered) (0.3Kb)
  • Gradient effect in PNG format (4-bit, dithered) (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.

Compartir

Comentarios

Raul

16/8/2005
Ok, claro esta que en esta imagen png solo se muestra una variacion de color en azul. cuando la imagen tiene muchos colores el png se vuelve inadecuado por su peso. personalmente ocupo los png en animaciones flash y me da muy buenos resultados pero a veces sacrificando peso por calidad.

Saludos

lan

06/9/2005
Hola que tal,

Creo que no se toco un tema importante en este articulo, ¿Que me dicen del soporte? todos los navegadores soportan este formato PNG, en mi experiencia creo que no, de modo que este formato no creo que sea el mejor hasta que todos los navegadores soporten dicho formato.

Juan

30/6/2011
Porque en formato gif
Yo e tratado de colocar un degradado en formato gif y este sale muy decadente con forme a la calidad, y ustedes pudieron ponerlo sin compicacion, como es que lo pudieron poner?