PNG, segunda parte
Quería corregir algunas cosas escritas en el post de PNG que valen la pena. Primero agradecer el feedback de la gente, que escribe sin parar sobre el tema y me hace sugerencias. Segundo, quería hacer unas correcciones con respecto a la definición de los gráficos GIF.
GIF todavía tiene patentes ligadas al algoritmo de compresión LZW. IBM e Unisys habían patentado este algoritmo y el mismo caduca en diferentes fechas en diferentes regiones. Del sitio GNU se puede uno enterar mejor:
There are no GIFs on the GNU web site because of the patents (Unisys and IBM) covering the LZW compression algorithm which is used in making GIF files. These patents make it impossible to have free software to generate proper GIFs. They also apply to the compress program, which is why GNU does not use it or its format.
Aquí explica la primera razón por la cual la gente de GNU no usa gráficos GIF es porque contiene patentes pendientes. Seguimos con el texto y podemos leer más razones que se adentran en el tema:
Unisys and IBM both applied for patents in 1983. Unisys (and perhaps IBM) applied for these patents in a number of countries. Of the places whose patent databases we were able to search, the latest expiration date seems to be Friday 11 August 2006. Until then, anyone who releases a free program for making GIF files is likely to be sued. We don’t know any reason to think that the patent owners would lose these lawsuits.
Resumiendo lo que cuenta: Queda una patente por expirar el día viernes 11 de agosto del 2006. Aquí explican todo más enfocado a la creación de programas de código libre que a páginas web, pero en parte también podría aplicarse.
Entonces, la idea inicial era usar un formato libre, potente y flexible. GIF no lo es, aunque tiene ciertas ventajas como la masificación de programas que soportan la creación/edición del mismo. PNG de todas formas no es un formato que está soportado por una pequeña lista de programas sino que la gran mayoría de los grandes del software tienen este soporte por defecto.
Otro problema en Internet Explorer
Encontré un comportamiento raro de una imagen PNG. Utilizando un PNG de 24 bits, este cuando se visualiza en IE sale alargado verticalmente. Me fijé en mi código y vi que no había agregado el tamaño de la imagen en la etiqueta, con lo que me dio a pensar que reaccionaría de forma rara. Cambio eso y tampoco, se sigue viendo ensanchado. Como último recurso, monto en CSS una regla que dice que tamaño tendrá esa imagen y tampoco.
Busqué media hora por las entrañas de Google y nada. Si alguien tiene una solución a esto y lo quiere compartir bienvenido sea.
De momento pensé que tenía que volver al GIF para hacer algo, pero recordé que codificando en PNG 8 bits va igual de bien, eso sí… nada de canales alpha.
Diferencias notables
PNG es un formato que no tiene pérdidas de ningún tipo, por lo que su tamaño puede ser un poco más grande que GIF y JPG, pero las cuantiosas ventajas las hemos mencionado en el post anterior PNG le nouveau plaisir.
Una cosa a destacar es que existen dos tipos de PNG, uno de 24 bits y otro de 8 bits. El primero parece más un JPG que el segundo que da resultados más parecidos al GIF. Para que os deis una idea, hice una prueba comparando una imagen sobre un fondo para que observéis la diferencia y los pesos:
Como verán, el gráfico se puede observar como actúa el PNG con transparencias. Como observan, el PNG a 24 bits soporta las transparencias independientemente de fondo u objeto que se situé en la capa inferior. En cambio el GIF al ser exportado no reacciona de la misma forma. Otro punto interesante es que en este ejemplo marca el peso de ambas imágenes en la misma situación. El GIF pesa 1,60 KB y no soporta nada más mientras que el PNG de 24 bits soporta las transparencias a la perfección y pesa apenas 2,54 KB. En las pruebas comparé el GIF con el PNG de 8 Bits, obteniendo el mismo resultado gráfico pero a nivel peso el PNG ganó en ahorro: 1,15 KB.
Esto por supuesto varía dependiendo la imagen pero queda bastante a descubierto el mito de que los GIFs pesan menos que los PNG.
Yo recomiendo a todo el mundo que no se olvide de este formato y que lo implementen en todos los proyectos webs que puedan, ya que te da una flexibidad increíble si trabajas con CSS, XHTML, AJAX, etc.
13 Respuestas a la entrada “PNG, segunda parte”
Escrito por Valentín Moreira
Mayo 26th, 2005 at 10:49 am
Si, cierto⦠corroboro por mis experiencias todo lo anterior. Aunque yo soy mas práctico y antes de exportar alguna imagen (no foto) para una web siempre comparo su resultado entre GIF y PNG 8. Hay algunas ocasiones en que un GIF comprime mas que un PNG.
Cuando el ahorro es mínimo, siempre me decanto por el PNG. Pero ya me he encontrado casos de un par de Kb y al final he usado GIF.
Este es mi caso⦠yo me decanto por el peso, intentar hacer la web lo mas liviana posible, pero otros casos habrá por ahí.
Escrito por Filantrópika.05
Mayo 26th, 2005 at 10:58 am
En mi weblog lo uso, pero como comenté en tu post anterior, tengo que abstenerme del alpha para no causar el típico error que se dá en IE.
Al igual que tú, recomiendo usar este formato que como bien tu dices, tiene una flexibilidad increible.
Aunque yo ya casi no uso IE, pero la mayoría de los ususarios si, sería bueno saber que la próxima versión del IE, aparte de incorporar pestañas, será compatible con el alpha de los PNG.
salu2!!
Escrito por cromo
Mayo 26th, 2005 at 11:00 am
Según mi propia experiencia, el formato png es mucho más potente que el gif. El unico impedimiento para su uso masivo en el desarrollo web se llama Internet Explorer. Hasta que este programa no se comporte como debe con el png, css y otras tantas tecnologías los diseñadores de páginas web nos seguiremos partiendo la cabeza para todo cuadre en todos los navegadores.
Por cierto, estoy escuchando hablar muy bien de la metodología de programación web AJAX, pero no encuentro documentación en español. Ya se que no es más que el uso de xhtml, css, dhtml y demás, pero me gustaría encontrar algún manual donde se hablara de ello en conjunto.
Escrito por mini-d
Mayo 26th, 2005 at 11:52 am
âEn mi weblog lo uso, pero como comenté en tu post anterior, tengo que abstenerme del alpha para no causar el típico error que se dá en IEâ
Yo ofrecí la posibilidad de eliminar el problema del alpha en Internet Explorer. Sólo tenés que poner un simple Javascript que carga si es IE y degrada de forma natural para aquellos navegadores que no son IE y soportan PNG.
Escrito por Pablo M
Mayo 26th, 2005 at 12:01 pm
Yo implementé todos las imagenes que necesitaba transparencia con PNG y estoy muy conforme.
Ademas en IE se ve bastante bien con el comentado script, aunque hay que esperar a que cargue la pagina para ver la actualizacion.
Otro problema que tuve en IE es que si la imagen esta âdeclaradaâ dentro del CSS el script no la actualiza, por lo menos con un background.
Escrito por Daniel
Mayo 26th, 2005 at 1:46 pm
Muy buena segunda parte, gracias
Para quien quiera seguir un poco el tema estos tres artículos son también muy intesantes:
- Cross-Browser Variable Opacity with PNG: A Real Solution
- A PNG Review
- current PNG support
Escrito por Filantrópika.05
Mayo 26th, 2005 at 4:05 pm
Tienes razón Diego, lo había olvidado, pero sabes? Cuando veo tu sitio con mi feed agregator, el error continúa, quizás ese Javascript sólo funciona para IE.
(Yo uso FeedReader 2.7)
Salu2!!
Escrito por yommismo
Mayo 26th, 2005 at 5:05 pm
Upss a ver según el ejemplo que pones , la imagén en formato GIF pesa un 63% de lo que pesa la misma imagen en PNG. Perdona pero no me parece el peso un buen argumento. Seguro que esa imagen hasta en jpg sería bastante ligera. La discusión sobre si usar uno u otro formato de imagen ha de ser más profunda de lo que has presentado aquí.
Cromo en español no he visto nada pero busca sarissa en sourceforge y mira algún ejemplo. Por cierto, AJAX no es una metodología de programación es una tecnología, que hay muchísima diferencia.
Escrito por Sebastian Veggiani
Mayo 27th, 2005 at 12:53 am
Existe un plugin gratuito (Win & Mac) para Photoshop que brinda nuevas opciones a la hora de salvar en formato PNG desde Photoshop.
Acá les dejo el URL: http://www.fnordware.com/superpng/
Escrito por Jorge
Mayo 27th, 2005 at 1:24 am
En http://dean.edwards.name/IE7/compatibility/
se pueden encontrar una buena bateria de âhacksâ en javascript que solucionan muchos de los problemas de compatibilidad de Internet Explorer, entre ellos el de la transparencia del PNG.
Escrito por Jordi
Mayo 27th, 2005 at 9:46 pm
Mirando como resolver la transparencia de los PNGs en IE, me encontré un artículo que resumí (en catalán) el cuál no usa hacks de javascript, sólo de CSS. Lo podeis encontrar en el enlace del comment.
Escrito por Daniel G.
Mayo 30th, 2005 at 11:52 pm
Aclaraciones:
1. El png de 8 bits comprime en TODOS los casos mejor que el GIF.
2. Photoshop tienen una implementación penosa de PNG, así que no hay que fiarse mucho del tamaño que te proporciona. Recomiendo usar PNGOUT
Este programita es una maravilla. Recomprime el PNG con diversos métodos llegando a sacar porcentajes realmente importantes respecto al GIF (de un 5% a un 25%).
3. El PNG soporta transparencias tanto en su versión de 8 bits, como en su versión de 32 bits (no de 24, como se ha comentado aquí). PNG8 soporta alfa binario como el GIF, y el PNG32 soporta transparencias de 8 bits de profundidad.
3.2. Comparar el PNG32 con el JPG o el GIF es como comparar sandías con berberechos, ya que estos formatos tienen perdidas de calidad y no soportan canal alfa.
4. Internet Explorer (6 y menores) tiene una pésima implementación de PNG. En concreto aplican mal la corrección de gama por lo que las imagenes aparecen más oscuras. Se puede corregir con el programita anteriormente mencionado.
Enlace de interes:
W3C: GIF o PNG
Escrito por Xabier
Junio 10th, 2005 at 2:21 pm
Deseo comentar aquí y ver si a alguno más le ocurrio ⦠intente hacer un upload de una imagen .PNG en el nuevo 360-yahoo y no la aceptó, tuve que cambiar el formato y esta vez si lo acepto. why?