¿Qué formato para imágenes de sitios web pequeños? GIF o PNG?

Question

Al hacer iconos pequeños, gráficos de encabezado y similares para sitios web, ¿es mejor usar archivos GIF o PNG?

Obviamente, si se requieren efectos de transparencia, entonces los PNG son definitivamente el camino a seguir, y para las imágenes más grandes y más fotográficas usaría archivos JPEG, ¿pero cuál sería el "mobiliario" normal de la web? Puede que solo sean las herramientas que estoy usando, pero los archivos GIF usualmente parecen ser un poco más pequeños que un PNG comparable, pero usarlos solo parece ser 1987.

Answer 1

Como regla general, PNG nunca es peor, y a menudo es mejor que GIF debido a una compresión superior. Puede haber algunos casos extremos donde GIF es ligeramente mejor (porque el formato PNG puede tener una sobrecarga ligeramente mayor de los metadatos) pero realmente no vale la pena preocuparse.

Puede ser sólo las herramientas que estoy usando, pero los archivos GIF por lo general parecen ser un poco más pequeño que un comparible PNG

que puede ser en efecto, debido a la herramienta de codificación que utiliza.

/EDIT: Wow, parece que hay muchos conceptos erróneos acerca del tamaño del archivo PNG. Para citar a Matt:

No hay nada de malo con los GIF para las imágenes con pocos colores, y como habrá notado, tienden a ser más pequeños.

Este es un error de codificación típico y no inherente al formato. Puede controlar la profundidad de color y hacer que el archivo PNG sea pequeño. Consulte el relevant section en el artículo de Wikipedia.

Además, carecen de apoyo en IE6 es soplado fuera de proporción por Chrono:

Si necesita transparencia y puede pasar con los archivos GIF, entonces se lo recomiendo porque IE6 compatible con ellas. IE6 no funciona bien con PNG transparentes.

Eso está mal. MSIE6 hace compatibilidad con la transparencia PNG. No es compatible con el canal alfa (sin algunos ataques), pero esta es una cuestión diferente ya que los GIF no lo tienen en absoluto.

El único motivo técnico para usar GIF en lugar de PNG es cuando el uso necesita animación y no desea depender de otros formatos.

Answer 2

Uso jpg para todas las imágenes no transparentes. Puedes controlar la compresión, que me gusta. Encontré this sitio web que compara los dos. jpg es más pequeño y se ve mejor.

Answer 3

Personalmente uso gif's bastante para mis imágenes, ya que funcionan en todas partes, obviamente su limitación de transparencia es un elemento clave que dirigiría a alguien hacia un formato específico.

No veo ninguna caída en el uso de gif.

Answer 4

Si se vuelven más pequeños y no tiene nada que ganar al usar las funciones que ofrece PNG (que es la transparencia del canal alfa y más de 256 colores), entonces no veo razón para usar PNG.

Answer 5

La razón principal para usar PNG sobre GIF de un punto de vista legal está cubierto aquí:

http://www.cloanto.com/users/mcb/19950127giflzw.html

Las patentes, aparentemente, han vencido a partir de 2004, pero la idea de que se puede utilizar PNG como de código abierto sobre GIF es atractivo para muchas personas.

(png referencia de código abierto: http://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS)

Answer 6

No creo que hace una gran diferencia (clientes no les importa). Personalmente, elegiría los PNG porque son un estándar W3C.

Tenga cuidado con los efectos de transparencia PNG: no funcionan con IE6.

Answer 7

Un problema importante con GIF es que se trata de un formato con patente gravada (EDITAR: Esto aparentemente ya no es cierto). Si no te importa eso, puedes usar los GIF. PNG tiene mucha más flexibilidad sobre GIF, particularmente en el área de espacio de color, pero esa flexibilidad a menudo significa que querrá "optimizar" los PNG antes de publicarlos. Una búsqueda web debería descubrir herramientas para su plataforma para esto.

Por supuesto, si quieres animación, GIF es el único camino a seguir, ya que MNG era básicamente un no principiante por alguna razón.

Answer 8

archivos gif tenderán a ser un poco más pequeños ya que no son compatibles con un canal alfa de transparencia (y quizás por otros motivos). Personalmente, no creo que realmente valga la pena preocuparse por la diferencia de tamaño que solía tener. La mayoría de la gente usa la web con algún tipo de banda ancha ahora, así que dudo que noten una diferencia.

Probablemente sea más importante usar el tipo de imágenes con las que sus herramientas de manipulación funcionan mejor.

Además, me gusta la posibilidad de poner una imagen en cualquier fondo y tener un trabajo de sombra paralela, que me apunta más hacia el formato png.

Answer 9

El W3C menciona 3 ventajas de PNG sobre GIF.

• Los canales alfa (variable transparencia),

• corrección de gamma multiplataforma (control de brillo de la imagen) y corrección de color

• bidimensional entrelazado (un método de visualización progresiva )

También, echar un vistazo a estos recursos para la orientación:

• PNG v's GIF (W3C Guidance)
• PNG FAQ

Answer 10

normalmente utilizo de debido al tamaño del GIF, pero también hay PNG-8 que es 256 colores también.

Si necesita cosas sofisticadas y semitransparentes, utilice png-24.

Normalmente utilizo la función 'guardar para web' en photoshop, lo que le permite jugar con el tipo de archivo, la cantidad de colores, etc., y ver el resultado antes de guardar. Por supuesto, usaría la menor cantidad posible que aún se vea bien en mis ojos.

Answer 11

Para gráficos generados por computadora (es decir, dibujado por usted mismo en Photoshop, Gimp, etc.) JPG está fuera de cuestión, porque es con pérdida, es decir, obtiene píxeles grises aleatorios. Para imágenes estáticas, PNG es mejor en todos los sentidos: más colores, transparencia escalable (por ejemplo, 10% transparente, .gif solo admite 0% y 100%), pero existe el problema de que algunas versiones de Internet Explorer no lo hacen PNG transparencia correctamente, por lo que obtiene un fondo plano no transparente que se ve feo. Si no te importan esos usuarios de IE, ve a PNG.

Por cierto, si quieres animaciones, ve por GIF.

Answer 12

Para las imágenes en la web, cada formato tiene sus pros y sus contras. Para las imágenes de tipo fotográfico (es decir, muchos y muchos colores, sin bordes duros) use un JPEG.

Para iconos y similares, puede elegir entre PNG y GIF. Los GIF están limitados a 256 colores. Los archivos PNG se pueden formatear como GIF (es decir, 256 colores, con una transparencia de 1 bit que funcionará en IE6), pero para imágenes pequeñas son ligeramente más grandes que los GIF. Los PNG de 24 bits admiten tanto una gama grande como una transparencia alfa (aunque es problemático en IE6).

PNG son su única opción muy sensata para cosas como las capturas de pantalla (es decir, las dos porciones de colores y bordes duros), y personalmente, eso es lo que seguir con la mayor parte del tiempo, a menos que tenga algo para lo que JPEG es más adecuado (como una foto).

Answer 13

Guau, estoy realmente sorprendido con todas las respuestas incorrectas aquí. PNG-8 siempre será más pequeño que GIF cuando se optimice correctamente. Simplemente ejecute sus archivos PNG-8 a través de PngCrush o cualquiera de las otras rutinas de optimización PNG.

Las cosas claves para entender:

• PNG8 y GIF no tienen pérdidas < = 256 colores
• PNG8 puede ser siempre menor que el GIF
• GIF nunca debe ser utilizado a menos que se necesita animación

y, por supuesto,

• Uso JPG para negros & imágenes fotográficas blancos o de color
• Uso PNG de color baja, arte lineal, imágenes de tipo pantalla

Answer 14

indexado PNG (menos de 256 colores) es en realidad siempre más pequeño que gif, así que lo uso la mayor parte del tiempo.

Answer 15

PNG es un reemplazo del 100% para los archivos GIF y es compatible con todos los navegadores web que pueda encontrar.

Hay muy, muy pocas situaciones en las que GIF sería preferible. La más importante es la animación: el estándar GIF89a es compatible con la animación, y prácticamente todos los navegadores lo admiten, pero el formato antiguo PNG no lo hace; para eso necesitarás usar MNG, que tiene compatibilidad limitada con el navegador.

Prácticamente todos los navegadores admiten transparencia de un bit en archivos PNG (el tipo de transparencia que ofrece el formato GIF). Existe una falta de soporte en IE6 para la transparencia completa de 8 bits de PNG, pero eso se puede corregir en la mayoría de las situaciones con un poco de magia de CSS.

Si sus archivos PNG son más grandes que los archivos GIF equivalentes, es casi seguro que su imagen de origen tenga más de 256 colores. Los archivos GIF están indexados a una paleta máxima de 256 colores, mientras que los archivos PNG en la mayoría de los programas gráficos se guardan de forma predeterminada en un formato sin pérdida de 24 bits. Si el tamaño del archivo es más importante que los colores exactos, guarde el archivo como PNG indexado de 8 bits y debería ser equivalente a GIF o mejor.

Es posible "hackear" un archivo GIF para tener más de 256 colores utilizando una combinación de cuadros de animación con marcas de no-reemplazar y múltiples paletas, pero este enfoque ha sido prácticamente olvidado desde el advenimiento de PNG .

Answer 16

Tenga cuidado con los cambios de color cuando use PNG. Este enlace da un ejemplo, y contiene muchos más enlaces con más explicaciones:

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

imágenes GIF no están sujetos a este problema.

Answer 17

"Puede que solo sean las herramientas que estoy usando, pero los archivos GIF usualmente parecen ser un poco más pequeños que un PNG comparable, pero su uso simplemente parece ser 1987".

Probablemente sean sus herramientas. De las preguntas frecuentes de PNG:

"Hay dos razones principales detrás de este fenómeno: comparar manzanas y naranjas (es decir, no comparar los mismos tipos de imágenes) y usar herramientas malas". continued...

Pero siempre puedes intentar guardar como ambos (usando la misma profundidad de color) y ver cuál sale más pequeño.

Por supuesto, si desea estandarizar en un formato gráfico para su sitio, es probable que PNG sea el mejor para usar.