Hace tiempo que tenía ganas de hablar sobre este tema, es decir porque elegir a uno o al otro? Como saber que formato me serviría mas para una determinada situación y todo este tipo de inquietudes que se te puedan ocurrir.
Bueno empecemos por lo básico: supongamos que tenemos una imagen de forma cuadrada “sin transparencia” y colores planos (nada complicado), en este caso que usarían gif o png?… examinemos juntos los dos resultados con los distintos formatos:
A simple vista no logro notar ninguna diferencia, pero no se olviden que en el diseño web algo muy importante es el peso de las imágenes, entonces: el gif pesa alrededor de 320 bytes, mientras que el png pesa 282 bytes. Por lo tanto, en este caso la mejor opción es el png.
Sigamos avanzando, ahora vamos a crear un grafico con formas desparejas, con bordes redondeados, coloreada con un degrade y sin transparencias. Veamos que pasa:
Si observamos con precisión, podremos notar que la imagen con mayor calidad es el png, en este el degradado esta perfecto, no tiene ningún tipo de desperfectos y pesa alrededor de 4,30 KB. Por otro lado tenemos al gif de 256 colores, a simple vista se ve perfecto igual que el png, pero si lo miramos con lupa podremos notar desperfectos en el degradado y como si fuera poco su peso es superior a el del png, pesa 5,42 KB. Por ultimo tenemos al gif con 128 colores, no tenemos mucho que decir realmente, es un desastre, se puede notar a simple vista los desperfectos del degradado, la única ventaja que tiene es su peso 3,68 KB, pero por un par de Kilo bytes mas prefiero usar el png que esta perfecto. Por lo tanto, a la hora de usar degradados el ganador es el png, por peso y calidad.
Ahora, vamos a crear una grafica con colores, una estructura simple y con transparencia para ver que pasa:
Aquí es cuando la situación se comienza a complicar. Primero evaluemos calidad y peso: a nivel calidad el gif como el png se ven exactamente iguales, por que lo son. Pero cuando nos detenemos a mirar el peso encontramos una diferencia de casi 1 KB. Entonces es fácil ¿nos quedamos con el png y su transparencia nuevamente?… yo diría que estudiemos mas a fondo la situación, como un buen diseñador web tenemos que tener en cuenta los distintos navegadores que encontramos hoy en día y saber que internet explorer 6 no soporta las transparencias del png a menos que usamos algún hack o por medio de algun condicional*. Tenemos dos alternativas, usar el gif con 1 KB mas de peso o usar el png por medio de un hack, directamente nos quedamos con el gif, ya que la diferencia es casi nula y nos ahorramos un par de vueltas.
Por ultimo vamos a hacer lo siguiente, tomaremos un grafico complejo con degradados, formas irregulares y transparencias para evaluarla con los dos formatos:
Voy a tratar de explicar de mejor forma este punto, sencillamente png es la mejor opción para exportar nuestros gráficos complejos con transparencias, ya que su calidad es perfecta y la transparencia es respetada en todos los aspectos, lo único malo que rescato de este formato es el peso, como verán es de 41,7 KB (un poco pesado), sin embargo lo vale. Por otro lado tenemos al gif, su calidad es media, ya que si observamos con precisión podremos notar desperfectos en el degradado de la figura, lo cual nos resta calidad a nuestro trabajo, también cabe destacar el tema de la transparencia la cual debido a la sombra del objeto queda muy desprolija, lo único bueno es el peso 15,6 KB pero no se justifica para nada, ya que su calidad es espantosa.
more
