PNG, le nouveau plaisir
En esta nueva versión de minid.net trae una novedad que muy pocos habrán notado: los gráficos están hechos con PNG. No les quiero asediar con un post lleno de complicados relatos sobre compresión de imagen porque no viene a cuento, pero me gustaría resaltar algunas cosas de este formato que vale la pena enterarse.
PNG es estándar, libre de patentes y está recomendado por el W3C. Parece que cada cosa que se le adosa el término W3C se convierte en “soso” pero no es así ¡ojo!. PNG es un formato super potente, mucho más flexible que GIF y JPEG juntos. Resumo en puntos:
- Basado en un algoritmo de compresión sin pérdida.
- Soporte True Color (Color Verdadero), escala de grises y paleta de 8 bits.
- Utiliza 48 bits por píxel, pudiendo representar imágenes con hasta 281,474,976,710,656 colores distinto.
- Permite canales alfa, que sirven para especificar transparencias. Hasta un límite de 254 grados de transparencia.
- Maneja imágenes entrelazadas en 2-D (el GIF también pero en 1-D), que permiten tener un visión general de la imagen antes de terminar de descargarla.
Bien, en caso de estar más interesados en el formato, pueden visitar la página de PNG en la Wikipedia en español que es donde hice este pequeño resumen. Caso contrario pasamos a lo que iba a comentar: ¿por qué cambié todo a PNG?
Si bien los dos formatos (GIF y JPG) no me traían problema alguno, quería librarme de la pesadez de las patentes que rondan en estos formatos. Así que decidí implementar PNG como alternativa gráfica. Sin más, decirles que es una gozada poder disfrutar de los canales alpha, combinarlos con CSS, XHTML y tratar de aprovechar todas las ventajas que tiene.
PNG en Internet Explorer
Aunque uso un formato excelente sigo teniendo un problema: la capa alpha del PNG no se visualiza correctamente en Internet Explorer 5.5 o superiores. Buscando por Internet encontré algunos tutoriales bastante fáciles para seguir con un truco que nos permite, en pocas modificaciones tener todos los PNG respetando la transparencia.
Poniendo esta línea entre las cabeceras <head> y configurando la ruta donde ubicaremos nuestro archivo:
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="/css/pngfix.js"></script>
<![endif]-->Yo he puesto como verán en el ejemplo una ruta /css/. Dentro de la carpeta donde guardo los archivos CSS puse el archivo Javascript para no tener archivos huérfanos por todos lados. Igualmente cada uno lo guardará donde le plazca, pero esta ubicación no está haciendo el favor para que lo enlacemos directamente hace que las modificaciones sean mínimas.
Ya saben ahora: suben el archivo una carpeta, lo enlazan con ese código en tus plantillas del CMS y listo el pollo.
El archivo en cuestión es pngjs.js.
24 Respuestas a la entrada “PNG, le nouveau plaisir”
Escrito por jose
mayo 16th, 2005 at 12:22 pm
me gsuta mucho el estilo instiki que tiene este neuvo diseño
Escrito por Pablo Martinez
mayo 16th, 2005 at 12:39 pm
Si, es un formato único que parece que tuviera todo lo bueno de los otros con muy pocas contras.
El problema principal que encuentro en los PNG es que no siempre se visualizan bien los canales alpha en según que navegador.
Es una lastima, porque esto ultimo limita mucho el uso.
En mi caso encuentro en PNG una de las mejores opciones para la publicación Web de imágenes.
Escrito por viktor
mayo 16th, 2005 at 1:35 pm
Desconozco si hay variaciones del formato PNG, en especial el creado por Fireworks de Macromedia, donde en el mismo archivo está toda la informacion vectorial, capas y efectos, debe existir entonces una que otra patente por allí incrustada.
Hay otra caracteristica de PNG que lo hace notar y es la corrección automática de los niveles gamma del archivo para asegurar su compatibilidad entre plataformas.
PNG me encanta, pero si colocas un fondo degradado al estilo macromedia los navegadores les cuesta en recursos renderizarlo, solo son detallitos nada graves y todos dirigidos al performance en los navegadores, pero si este formato es ampliamente utilizado sin duda avanzaria mucho más.
Saludos
Escrito por Jose Luis Colmena
mayo 16th, 2005 at 2:41 pm
Pues llevo usando el las imágenes png desde que necesité las transparencias para potenciar el Diseño del blog.
Lo que aún no he llegado a adoptar el png en la galería de imágenes, aunque lo tengo pendiente, eso si.
saludos.
Escrito por Carlos el hormigo
mayo 16th, 2005 at 4:06 pm
Creo que precisamente una de las novedades de la nueva versión de Internet Explorer va a ser la compatibilidad con el canal alpha de las imágenes PNG.
Esta deficiencia (de IE, no de PNG) es la única razón para que no se haya extendido más el formato hasta la fecha, pero, desde luego, le veo mucho futuro.
Escrito por Filantrópika.05
mayo 16th, 2005 at 5:11 pm
buen dato, ya que para anexar archivos .png tenía que olvidarme del alpha y poner el mismo color de fondo que el background del sitio.
salu2!!!
Escrito por Pablo Martinez
mayo 16th, 2005 at 5:22 pm
Buena la actualizacion del post.
Era lo que me limitaba a usar PNGâs en mi sitio. Y nunca habia encontrado nada tan simple para hacerlo funcionar en IE.
Gracias!
Saludos
Escrito por corsaria
mayo 16th, 2005 at 6:53 pm
PNG, mmm siempre que guardo algo en ese formato con Photoshop me ocupa muchísimo espacio. Estudiaré el tema a ver que es lo que hago mal.
Escrito por GLIJ
mayo 16th, 2005 at 6:58 pm
Llevo ya un tiempo usando imágenes PNG en mi fotoblog. Me ha permitido lucir las transparencias y sombras y poder jugar con los distintos estilos del sitio, sin perder los efecto.
Lo único malo de este âabusoâ es el peso de las imágenes.
Quizá deba optimizarlas más. Yo las genero desde Photoshop, pero quizá Fireworks la mejore.
Escrito por bleuge
mayo 16th, 2005 at 7:15 pm
no caducó ya la patente LZW de los GIF?
aún asi tienes razón, estar libre de patentes en mundo lleno de ellas es un alivio!
Escrito por core
mayo 16th, 2005 at 8:31 pm
Sobre el script creo que tiene un problema utlizo PNG en mis graficos con mapas de imagen y con el script no funcionas los enlaces
en E6
saludos
Escrito por demente
mayo 16th, 2005 at 11:58 pm
Hoy (ayer ya), por la tarde, antes de leer este post, estaba echando un ojo al repositorio de plugins de Textpattern y me he encontrado con esto . Como también uso .png, lo he instalado y parece que funciona.
Sobre el nuevo diseño, personalmente no me gusta. No te lo tomes a mal. Son cositas como la falta de contraste o la diferencia de nivel entre los posts y los menús laterales; en serio, ponlos a nivel
Si quieres devuélvemela diciendo que la imagen de la cabecera del mío pesa demasiado o que con Internet Explorer el menú se descoloca cuando hay imágenes que exceden el ancho del contenedor de los posts por el uso del atributo max-width de la hoja de estilo. Todo es mirárselo
Escrito por lightme
mayo 17th, 2005 at 2:05 am
PNG rulezzzzz, yo siempre guardo imagenes o capturas en png
Escrito por Felipe
mayo 17th, 2005 at 4:27 am
offtopic:
Los post en feeds no me aparecen completos y desde casa no me deja comentar pq mi ip esta en una lista negra
Escrito por Manz
mayo 17th, 2005 at 4:49 am
Yo uso el formato PNG desde hace algún tiempo en mi web y es de lo mejorcito que existe para combinar con el uso de un buen código HTML.
Las transparencias, canales alfa y demás son una buenísima idea. Esperemos que en el navegador IE7, en verano, Microsoft haga un buen trabajo para que no tengamos que hacer un diseño para Internet Explorer y un diseño para los navegadores âbuenosâ.
Aquí podéis encontrar un optimizador de ficheros PNG libre:
OptiPNG
Saludos
Escrito por DidE
mayo 17th, 2005 at 10:35 am
Ainxxx, Diego⦠si usas un estándar es por algo, no optimices para que un estándar sea más estándar, lo único que conseguis es dar puntos inmerecidos a IE, quien no pueda ver tu site con IE, pues mira!, otro motivo más para pasarse a un navegador que Sà cumpla con los estándares .
Yo por mi parte no pienso hacer ni un sólo retoque en mi código para que en IE se vea bien.
Creo que es más beneficioso para todos que pongas un H1 en la portada diciendo; â Tú! que con el navegador que usas no vas a ver bien las páginas. Cámbialo por uno normal .
Escrito por misil predido en el mar
mayo 17th, 2005 at 11:29 am
quería librarme de la pesadez de las patentes que rondan en estos formatos
Pues sí, debe doler un huevo usar patentes, juas. Nunca comprenderé la peña que se tira a hacer/usar de todo, con tal de que no tenga patentes y tal. Eso es una chorrada. Deberián pegar a todo dios que presume de tal. Si lo quieres usar bien, pero no vayas por ahí contandolo a todo dios (en este caso vale (por los pelos), por aquello de explicar un poco).
El png mola, pero lo malo es que para capturas/imágenes grandes en general, es muy pesado y es preferible usar el jpg.
Escrito por Jorge Martínez Mauricio
mayo 17th, 2005 at 1:15 pm
Muy buen post. Aqui el problema que veo es como hacerle para que la transparencia se vea igual en los archivos que utilizas en hojas de estilo (como background). ¿Hay algun truco similar para aplicar este script?
Saludos, Jorge.
Escrito por Alex Ninn
mayo 17th, 2005 at 6:30 pm
A ver si ahora puedo comentar.
Patentes, Canales Alpha, 48 bits, hacks ⦠y que hay del peso?
Ahora que regresé a la vieja conexión Dial-Up por un mes me doy cuenta de la patada en los huevos que es entrar a sitios pensados solo para banda ancha. ¿Será el peso de los archivos PNG su talón de Aquiles?
Escrito por oscar78
mayo 17th, 2005 at 6:55 pm
Pel que llegeixo a la Wikipedia respecte al PNG, entenc que es un bon substitut del GIF però no tant del JPG, excepte casos puntuals com ara: imatges amb poca variació de color o grans à rees sólides.
Segons això, no sâha dâentendre el format PNG com un substitut âtotalâ del JPG, no?
Escrito por rallat
mayo 22nd, 2005 at 5:37 pm
Hace no mucho ha salido un fallo de trato de las librerias que se encargan de cargar los png
estan afectado miles de software 
cuidado con ello
Escrito por Juanje
mayo 27th, 2005 at 5:41 am
Fantástica la solución para que las transparencias se muestren en IE.
Pero tiene dos problemas:
1. Obligamos al usuario a tener Javascript activado
2. Las imágenes no se muestran correctamente hasta que la página no se ha cargado por completo. Esto puede causar un efecto bastante âfeoâ de cara al usuario.
Escrito por Pablo Rodríguez
septiembre 11th, 2005 at 4:03 pm
El archivo http://www.minid.net/css/pngfix.js no existe.
Escrito por mario
agosto 9th, 2006 at 11:48 am
¿Alguien sabe cómo aplicar ese script a los fondos png creados con estilos? o dicho de otra manera: como usar pngs transparentes como fondo y que funcione en IE. He probado con el script y no funcionan.