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.

• (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.

+ 1 manual relacionado
+ 2 categorias relacionadas
+ 2 comentarios no revisados

Autoría, licencia y acciones sobre este artículo

Informe de Lim Chee Aun* URL: http://cheeaun.phoenity.com/ Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Diseño web
+ Entrar en Guias de diseño

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 2 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba