¿Qué formato para imágenes de sitios web pequeños?¿GIF o PNG?[cerrado]
https://stackoverflow.com/questions/115818
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Al crear íconos pequeños, gráficos de encabezado y similares para sitios web, ¿es mejor usar GIF o PNG?
Obviamente, si se requieren efectos de transparencia, entonces los PNG son definitivamente el camino a seguir, y para imágenes más grandes y fotográficas usaría JPEG, pero para "muebles" web normales, ¿cuál recomendaría y por qué?Puede que sean solo las herramientas que estoy usando, pero los archivos GIF generalmente parecen ser un poco más pequeños que un PNG comparable, pero usarlos parece tan de 1987.
Solución
Como regla general, PNG nunca es peor y, a menudo, mejor que GIF debido a su compresión superior.Puede haber algunos casos extremos en los que GIF es ligeramente mejor (porque el formato PNG puede tener una sobrecarga ligeramente mayor de metadatos), pero realmente no vale la pena preocuparse.
Puede que sean solo las herramientas que estoy usando, pero los archivos GIF generalmente parecen ser un poco más pequeños que un PNG comparable.
De hecho, esto puede deberse a la herramienta de codificación que utiliza.
/EDITAR:Vaya, parece haber muchos conceptos erróneos sobre el tamaño de los archivos PNG.Para citar a Matt:
Los GIF no tienen nada de malo para imágenes con pocos colores y, como habrás 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 del color y hacer que el archivo PNG sea lo más pequeño.por favor refiérase a sección relevante en el artículo de Wikipedia.
Además, Chrono exagera la falta de soporte en MSIE6:
Si necesita transparencia y puede arreglárselas con GIF, los recomendaría porque IE6 los admite.IE6 no funciona bien con PNG transparentes.
Eso está mal.MSIE6 hace admite transparencia PNG.No es compatible con el canal alfa (sin algunos trucos), pero este es un asunto diferente ya que los GIF no lo tienen en absoluto.
El solo La razón técnica para usar GIF en lugar de PNG es cuando se necesita animación y no se quiere depender de otros formatos.
Otros consejos
El W3C menciona 3 ventajas de PNG sobre GIF.
• canales alfa (transparencia variable),
• Corrección de gamma multiplataforma (control del brillo de la imagen) y la corrección de color
• Interlacios bidimensionales (un método de pantalla progresiva).
Además, eche un vistazo a estos recursos como orientación:
Vaya, 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 pngCrush o cualquiera de las otras rutinas de optimización de PNG.
Las cosas clave que hay que entender:
- PNG8 y GIF no tienen pérdidas <= 256 colores
- PNG8 siempre puede ser más pequeño que GIF
- Nunca se debe usar GIF a menos que necesites animación.
y por supuesto,
- Utilice JPG para imágenes fotográficas en blanco y negro o a todo color.
- Utilice PNG para imágenes de tipo captura de pantalla, arte lineal y poco color.
La razón principal para usar PNG en lugar de GIF desde un punto de vista legal se trata aquí:
http://www.cloanto.com/users/mcb/19950127giflzw.html
Las patentes aparentemente expiraron en 2004, pero la idea de que se pueda utilizar PNG como código abierto en lugar de GIF resulta atractiva para muchas personas.
(png referencia de código abierto: http://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS)
Tenga cuidado con los cambios de color al utilizar PNG.Este enlace ofrece un ejemplo y contiene muchos más enlaces con explicaciones adicionales:
http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx
Las imágenes GIF no están sujetas a este problema.
No creo que haga mucha diferencia (a los clientes no les importa).Personalmente, elegiría los PNG porque son un estándar del W3C.
Tenga cuidado con los efectos de transparencia PNG:No funcionan con IE6.
Para las imágenes en la web, cada formato tiene sus pros y sus contras.Para imágenes de tipo fotográfico (es decir, muchísimos colores, sin bordes duros), utilice un formato JPEG.
Para íconos y similares, puedes elegir entre PNG y GIF.Los GIF están limitados a 256 colores.Los PNG pueden tener formato como GIF (es decir, 256 colores, con transparencia de 1 bit que funcionará en IE6), pero para imágenes pequeñas son levemente más grande que los GIF.Los PNG de 24 bits admiten tanto una gran gama como transparencia alfa (aunque es problemático en IE6).
PNGS es su única opción realmente sensata para cosas como capturas de pantalla (es decir, muchos colores y bordes duros), y personalmente, eso es con lo que me quedo la mayor parte del tiempo, a menos que tenga algo para lo que JPEG sea más adecuado (como una foto).
El PNG indexado (menos de 256 colores) en realidad siempre es más pequeño que el gif, así que lo uso la mayor parte del tiempo.
Para gráficos generados por computadora (es decir,dibujado por usted mismo en Photoshop, Gimp, etc.) JPG está fuera de discusión, porque tiene pérdidas, es decir,obtienes píxeles grises aleatorios.Para imágenes estáticas, PNG es mejor en todos los sentidos:más colores, transparencia escalable (digamos, 10% transparente, .gif solo admite 0% y 100%), pero existe el problema de que algunas versiones de Internet Explorer no hacen la transparencia PNG correctamente, por lo que obtienes un fondo plano y no transparente. eso se ve feo.Si no te importan esos usuarios de IE, elige PNG.
Por cierto, si quieres animaciones, opta por GIF.
PNG es un reemplazo 100% de los archivos GIF y es compatible con todos los navegadores web que pueda encontrar.
Hay muy, muy pocas situaciones en las que sería preferible GIF.El más importante es la animación: el estándar GIF89a admite animación y prácticamente todos los navegadores la admiten, pero el antiguo formato PNG no; necesitaría usar MNG para eso, que tiene compatibilidad limitada con el navegador.
Prácticamente todos los navegadores admiten transparencia de un solo bit en archivos PNG (el tipo de transparencia que ofrece el formato GIF).Hay una falta de soporte en IE6 para la transparencia total de 8 bits de PNG, pero eso se puede rectificar en la mayoría de las situaciones con un poco de magia CSS.
Si sus archivos PNG son más grandes que los archivos GIF equivalentes, es casi seguro que se debe a que su imagen de origen tiene más de 256 colores.Los archivos GIF están indexados en una paleta máxima de 256 colores, mientras que los archivos PNG en la mayoría de los programas de gráficos se guardan de forma predeterminada en un formato sin pérdidas de 24 bits.Si el tamaño del archivo es más importante que los colores precisos, guarde el archivo como un PNG indexado de 8 bits y debería ser equivalente a GIF o mejor.
Es posible "piratear" un archivo GIF para que tenga más de 256 colores usando una combinación de fotogramas de animación con banderas de no reemplazar y múltiples paletas, pero este enfoque prácticamente se ha olvidado desde la llegada de PNG.
Un problema importante con los GIF es que es un formato protegido por patentes (EDITAR:Aparentemente esto ya no es cierto).Si eso no te importa, no dudes en utilizar GIF.Los PNG tienen mucha más flexibilidad que los GIF, particularmente en el área del espacio de color, pero esa flexibilidad a menudo significa que querrás "optimizar" los PNG antes de publicarlos.Una búsqueda en la 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 básicamente no fue un iniciador por alguna razón.
"Puede que sean solo las herramientas que estoy usando, pero los archivos GIF generalmente parecen ser un poco más pequeños que un PNG comparable, pero usarlos parece tan de 1987".
Probablemente sean tus 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 malas herramientas". continuado...
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 un formato gráfico para su sitio, es probable que PNG sea el mejor.
Personalmente uso bastante gif 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 desventaja en el uso de gifs.
Si se vuelven más pequeños y no tiene nada que ganar al usar las funciones que ofrece PNG (que es transparencia del canal alfa y más de 256 colores), entonces no veo ninguna razón por la que deba usar PNG.
Los archivos gif tenderán a ser un poco más pequeños ya que no admiten un canal alfa de transparencia (y tal vez por otras razones).Personalmente, no creo que valga la pena preocuparse tanto por la diferencia de tamaño como antes.La mayoría de las personas utilizan la Web con algún tipo de banda ancha ahora, por lo que dudo que noten una diferencia.
Probablemente sea más importante utilizar el tipo de imágenes con las que funcionan mejor sus herramientas de manipulación.
Además, me gusta la posibilidad de poner una imagen en cualquier fondo y tener una sombra paralela, lo que me orienta más hacia el formato png.
Normalmente uso gif por el tamaño, pero también hay png-8, que también tiene 256 colores.
Si necesitas cosas semitransparentes elegantes, usa png-24.
Normalmente uso la función "guardar para web" en Photoshop, que te permite jugar con el tipo de archivo, la cantidad de colores, etc. y ver el resultado antes de guardar.Por supuesto, usaría el más pequeño posible, que todavía se ve bien a mis ojos.
Utilizo jpg para todas las imágenes no transparentes.Puedes controlar la compresión, lo cual me gusta.encontré este sitio web que compara los dos.jpg es más pequeño y se ve mejor.
