Uso de imágenes PNG en sitios web

Question

¿Está bien usar imágenes PNG en un sitio web? Realmente no los he visto usar mucho, así que me preguntaba cuáles son los inconvenientes. Debe haber algunos como seguramente todo el mundo estaría utilizando ellos? ...

son, por ejemplo, MSIE y Chrome compatible etc ...

Answer 1

Se pueden utilizar muy bien estos días. Las versiones anteriores de IE (6.0 y anteriores) no admitían todos los modos de transparencia de ellas, que era la razón principal por la que las personas evitaban el formato. Otros navegadores como Firefox, Chrome, Opera, Konqueror o Links no tenían tales problemas.

Answer 2

IE 6 solo mostrará transparencia GIF en imágenes PNG a menos que use filtros.
Para obtener más información, consulte here

Aparte de eso, funcionan bien, y ahora son cada vez más populares.

Answer 3

Los archivos PNG tienden a convertirse en el estándar actual, particularmente porque PNG es un formato abierto diseñado precisamente para la web. El W3C recomienda el uso de PNG para sitios web, ya que el uso de PNG producirá archivos más compactos cuando se trata de gráficos, logotipos, etc. PNG es un formato de compresión sin pérdida.

Si bien PNG es el único formato que le permite utilizar la transparencia, es posible que desee utilizar JPG (que es principalmente un formato de compresión con pérdida) para imágenes más grandes.

¿Y adivina qué? Incluso Google está utilizando una imagen png para su logotipo de las Olimpiadas.

Answer 4

He aquí algunos de Fortune 500 sitios web corporativos de aplicación PNG en su portada:

• microsoft.com
• apple.com
• google.com (Google logo es un PNG)
• hp.com (en realidad están utilizando IEPNGFIX de twinhelix y PNG transparentes)

En realidad, el único que encontré que no lo hizo (solo miré alrededor de 10) fue Siemens.com

Answer 5

PNG se utilizan MUY a menudo hoy en día. Pocos son los sitios sin al menos algunos PNG. Y tampoco deben temerse. El único problema que hay es con IE6, y eso tiene dos posibles soluciones también:

• El filtro DirectX. Solo google, la red está llena de esto. Funciona sin ninguna modificación en el archivo PNG, pero hay algunas GOTCHAS, como las áreas transparentes que también serán transparentes para la entrada del usuario (haciendo clic) y no se puede combinar con otra imagen de fondo.
• Configuración del color de fondo para PNG. Esto no requiere ninguna codificación especial en la página web, pero no siempre es apropiado. La idea es que un archivo PNG pueda especificar un color predeterminado de "fondo" e IE6 lo respete. Como con frecuencia los PNG se muestran sobre un fondo sólido o casi sólido, esto funciona increíblemente bien. Use la utilidad TweakPNG para establecer el fondo.

Answer 6

Y no olvidemos que el logotipo de Stack Overflow es un PNG, ¡otra razón para usarlo!

Answer 7

PNG son un formato gráfico más versátil para la web, con excelente transparencia alfa y buena compresión y sin restricciones de propiedad (GIF fue objeto de un caso prolongado de derechos de propiedad intelectual cuando Compuserve reclamó la propiedad del formato de compresión utilizado) .

Sin embargo, el jurado todavía está deliberando sobre su uso en general. Aparentemente son especialmente buenos para logotipos e íconos pequeños pero para imágenes grandes y detalladas, GIF es comparable en tamaño de archivo y JPEG aún tiene la mejor relación entre tamaño de archivo y calidad (y eso puede marcar una gran diferencia en el tiempo de carga de un sitio web).)

PNG está ganando tracción como formato y puede esperar ver que se usa cada vez más en cualquier lugar que mire. Las características de transparencia alfa solas hacen de PNG un formato útil para elementos de interfaz interesantes, como superposiciones y cortes.

Answer 8

Sí, está bien usar pngs, pero hay algunas cosas que vale la pena señalar.

• Internet Explorer 6 no es compatible con la transparencia. Como señalaron varios comentarios, puede usar filtros para solucionar este problema. Sin embargo, hay ciertos problemas que pueden surgir al usarlo en un contenedor relativo, o tring para usar la repetición de fondo. Personalmente utilizo un vml implementation que no tiene estos problemas.

• Por lo general, no es una buena idea mezclar pngs (como en superposición) con otros tipos de imágenes como jpegs. A pesar de que tienen el mismo color de fondo, IE puede mostrarlos ligeramente diferentes, por lo que realmente no se combinan bien.

• Mac OS X procesa los png con la corrección de gamma almacenada. Puede que tenga que eliminarlo. Yo uso pngcrush.

• Las superficies semitransparentes anidadas pueden ser muy lentas en algunos navegadores.