Pregunta PNG vs. GIF vs. JPEG vs. SVG: ¿Cuándo es mejor usarlo?


¿Cuándo se deben usar ciertos tipos de archivos de imágenes al construir sitios web o interfaces, etc.?

¿Cuáles son sus puntos fuertes y débiles?

Sé que PNG y GIF no tienen pérdidas, mientras que JPEG tiene pérdidas.
¿Pero cuál es la principal diferencia entre PNG y GIF?
¿Por qué debería preferir uno sobre el otro? ¿Qué es SVG y cuándo debería usarlo?

Si no te importa cada píxel, ¿siempre debes usar JPEG porque es el más "liviano"?


524
2018-02-25 18:21


origen


Respuestas:


Debe tener en cuenta algunos factores clave ...

Primero, hay dos tipos de compresión: Sin pérdida y Pérdida.

  • Sin pérdida significa que la imagen se hace más pequeña, pero sin detrimento de la calidad.
  • Pérdida significa que la imagen está hecha (incluso) más pequeña, pero en detrimento de la calidad. Si guardó una imagen en formato Lossy una y otra vez, la calidad de la imagen empeoraría progresivamente.

También hay diferentes profundidades de color (paletas): Color indexado y Color directo.

  • Indexado significa que la imagen solo puede almacenar un número limitado de colores (generalmente 256), controlados por el autor, en algo llamado Mapa de colores
  • Directo significa que puedes almacenar muchos miles de colores que no han sido elegidos directamente por el autor

BMP - Sin pérdida / indexado y directo

Este es un formato antiguo. No tiene pérdida (no se pierden datos de imagen al guardar), pero también hay poca o ninguna compresión en absoluto, lo que significa que se guardará ya que BMP da como resultado tamaños de archivo MUY grandes. Puede tener paletas de indexado y directo, pero eso es un pequeño consuelo. Los tamaños de archivo son tan innecesariamente grandes que nadie realmente usa este formato.

Bueno para: Nada realmente. No hay nada BMP sobresale en, o no se hace mejor por otros formatos.

BMP vs GIF


GIF - Sin pérdida / solo indexado

GIF usa compresión sin pérdida, lo que significa que puede guardar la imagen una y otra vez y nunca perder datos. Los tamaños de archivo son mucho más pequeños que BMP, porque realmente se usa una buena compresión, pero solo puede almacenar una paleta indexada. Esto significa que para la mayoría de los casos de uso, solo puede haber un máximo de 256 colores diferentes en el archivo. Eso suena como una cantidad bastante pequeña, y lo es.

Las imágenes GIF también pueden ser animadas y tener transparencia.

Bueno para: Logotipos, dibujos lineales y otras imágenes simples que deben ser pequeñas. Solo realmente usado para sitios web.

GIF vs JPEG


JPEG - Lossy / Direct

Las imágenes JPEG fueron diseñadas para hacer que las imágenes fotográficas detalladas sean lo más pequeñas posible eliminando información que el ojo humano no notará. Como resultado, es un formato Lossy, y guardar el mismo archivo una y otra vez dará como resultado la pérdida de más datos a lo largo del tiempo. Tiene una paleta de miles de colores y es ideal para fotografías, pero la compresión con pérdidas significa que es malo para logotipos y dibujos: no solo se verán borrosos, sino que también tendrán un tamaño de archivo mayor que los GIF.

Bueno para: fotografías. Además, degradados.

JPEG vs GIF


PNG-8 - Sin pérdida / indexado

PNG es un formato más nuevo, y PNG-8 (la versión indexada de PNG) es realmente un buen reemplazo para los GIF. Lamentablemente, sin embargo, tiene algunos inconvenientes: en primer lugar, no puede admitir animaciones como GIF (puede hacerlo, pero solo Firefox parece soportarlo, a diferencia de la animación GIF que es compatible con todos los navegadores). En segundo lugar, tiene algunos problemas de soporte con navegadores más antiguos como IE6. En tercer lugar, un software importante como Photoshop tiene una implementación muy pobre del formato. (¡Maldito seas, Adobe!) PNG-8 solo puede almacenar 256 colores, como GIF.

Bueno para: Lo principal que PNG-8 hace mejor que los GIF es tener soporte para Alpha Transparency.

PNG-8 vs GIF


PNG-24 - Sin pérdida / directo

PNG-24 es un gran formato que combina la codificación Lossless con el color directo (miles de colores, al igual que JPEG). Es muy parecido a BMP en ese sentido, excepto que PNG realmente comprime imágenes, por lo que resulta en archivos mucho más pequeños. Lamentablemente, los archivos PNG-24 seguirán siendo más grandes que los JPEG (para fotos) y GIF / PNG-8 (para logotipos y gráficos), por lo que aún debe considerar si realmente desea usar uno.

Aunque los PNG-24 permiten miles de colores mientras tienen compresión, no están destinados a reemplazar imágenes JPEG. Una fotografía guardada como PNG-24 probablemente sea al menos 5 veces más grande que una imagen JPEG equivalente, con muy poca mejora en la calidad visible. (Por supuesto, este puede ser un resultado deseable si no le preocupa el tamaño del archivo y desea obtener la mejor calidad de imagen posible).

Al igual que PNG-8, PNG-24 también admite transparencia alfa.


SVG - Lossless / Vector

Un tipo de archivo que actualmente está creciendo en popularidad es SVG, que es diferente de todo lo anterior en que es un vector formato de archivo (los anteriores son todos raster) Esto significa que en realidad está compuesto de líneas y curvas en lugar de píxeles. Cuando amplía una imagen vectorial, aún ve una curva o una línea. Cuando amplía una imagen ráster, verá píxeles.

Por ejemplo:

PNG vs SVG

SVG vs PNG

Esto significa que SVG es perfecto para logotipos e íconos que desea conservar con nitidez en pantallas Retina o en diferentes tamaños. También significa que un pequeño logotipo de SVG se puede usar a un tamaño mucho más grande (más grande) sin degradar la calidad de la imagen, algo que requeriría un archivo separado más grande (en términos de tamaño de archivo) con formatos de trama.

Los tamaños de archivo SVG a menudo son pequeños, incluso si son visualmente muy grandes, lo cual es genial. Sin embargo, vale la pena tener en cuenta que depende de la complejidad de las formas utilizadas. Los SVG requieren más poder de cómputo que las imágenes de trama porque los cálculos matemáticos están involucrados en dibujar las curvas y líneas. Si su logotipo es especialmente complicado, podría ralentizar la computadora de un usuario, e incluso tener un tamaño de archivo muy grande. Es importante que simplifique sus formas vectoriales tanto como sea posible.

Además, los archivos SVG están escritos en XML, por lo que se pueden abrir y editar en un editor de texto (!). Esto significa que sus valores pueden ser manipulados sobre la marcha. Por ejemplo, podría usar JavaScript para cambiar el color de un icono de SVG en un sitio web, al igual que lo haría con algún texto (es decir, sin necesidad de una segunda imagen), o incluso animarlos.

En general, son mejores para formas planas simples como logotipos o gráficos.

¡Espero que eso ayude!


1311
2017-10-13 10:45



JPEG no es el más ligero para todo tipo de imágenes (o incluso la mayoría). Las esquinas y las líneas rectas y los "rellenos" simples (bloques de color sólido) aparecerán borrosos o tendrán artefactos dependiendo del nivel de compresión. Es un formato con pérdida, y funciona mejor para fotografías donde no se pueden ver los artefactos con claridad. Las líneas rectas (como en dibujos y cómics y similares) se comprimen muy bien en PNG y no tienen pérdidas. GIF solo debe utilizarse cuando desee que la transparencia funcione en IE6 o si desea animación. GIF solo admite una paleta de 256 colores, pero también es sin pérdida.

Entonces, básicamente, aquí hay una forma de decidir el formato de la imagen:

  • GIF si necesita animación o transparencia que funcione en IE6 (nota, la transparencia PNG funciona después de IE6)
  • JPEG si la imagen es una fotografía.
  • PNG si se necesitan líneas rectas como en un cómic u otro dibujo o si se necesita un amplio rango de colores con transparencia (y IE6 no es un factor)

Y como se comentó, si no está seguro de lo que calificaría, pruebe cada formato con diferentes índices de compresión y pondere la calidad y el tamaño de la imagen y elija cuál cree que es la mejor. Solo estoy dando reglas generales.


47
2018-02-25 18:25



Google ha escrito sobre esto muy bien. De Seleccionar el formato de imagen correcto, puedes encontrar un diagrama de flujo para tomar la decisión:

Selecting right image formate


38
2018-06-06 16:04



Normalmente voy con PNG, ya que parece tener algunas ventajas sobre GIF. Solía ​​haber restricciones de patente en GIF, pero esas han expirado.

Los GIF son adecuados para arte de líneas con bordes afilados (como logotipos) con una cantidad limitada de colores. Esto aprovecha la compresión sin pérdida del formato, que favorece las áreas planas de color uniforme con bordes bien definidos (en contraste con JPEG, que favorece gradientes suaves e imágenes más suaves).

Los GIF se pueden usar para animaciones pequeñas y clips de película de baja resolución.

En vista de la limitación general de la paleta de imágenes GIF a 256 colores, por lo general no se usa como formato para fotografía digital. Los fotógrafos digitales usan formatos de archivo de imagen capaces de reproducir una mayor gama de colores, como TIFF, RAW o el JPEG con pérdida, que es más adecuado para comprimir fotografías.

El formato PNG es una alternativa popular a las imágenes GIF, ya que utiliza mejores técnicas de compresión y no tiene un límite de 256 colores, pero los PNG no admiten animaciones. Los formatos MNG y APNG, ambos derivados de PNG, admiten animaciones, pero no se usan ampliamente.


7
2018-02-25 18:30



JPEG tendrá mala calidad alrededor de bordes afilados, etc. Por esta razón, no es adecuado para la mayoría de los gráficos web. Se destaca en las fotografías.

Comparado con GIF, PNG ofrece una mejor compresión, una paleta más grande y más funciones, incluida la transparencia. Y no tiene pérdida.


6
2018-02-25 18:27



GIF está limitado a 256 colores y no admite transparencia real. Debe usar PNG en lugar de GIF porque ofrece una mejor compresión y características. PNG es ideal para imágenes pequeñas y simples como logotipos, iconos, etc.

JPEG tiene una mejor compresión con imágenes complejas como fotos.


4
2018-02-25 18:29



png tiene una paleta de colores más ancha que gif y gif es properitary mientras que png no es. GIF puede hacer animaciones, lo que normal-png no puede. png-transparency solo es compatible con un navegador más reciente que IE6, pero hay una solución de Javascript para ese problema. Ambos admiten transparencia alfa. En general, diría que debes usar png para la mayoría de los gráficos web mientras usas jpeg para fotos, capturas de pantalla o similares porque la compresión png no funciona demasiado bien en ese momento.


3
2018-02-25 18:26



GIF basado en una paleta de 256 colores por imagen (al menos en su versión básica). PNG puede hacer "TrueColour", es decir, 16,7 millones de colores fuera de la caja. Los PNG sin pérdida se comprimen mejor que los GIF sin pérdida. GIF puede hacer transparencias "binarias" (0% de opacidad u 100% de opacidad). PNG puede manejar transparencias alfa.

Con todo, si no necesita usar imágenes transparentes Alpha y admite IE6, PNG es probablemente la mejor opción cuando necesita imágenes perfectas para píxel para ilustraciones vectoriales y cosas por el estilo. JPG es inmejorable para fotografías.


2
2018-02-25 18:26