¿Cuáles son los diferentes casos de uso de PNG vs. GIF vs. JPEG vs. SVG?

¿Cuándo se deben usar ciertos tipos de archivos de imagen al crear 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 debo usarlo?

Si no le importan todos y cada uno de los píxeles, ¿debería usar siempre JPEG ya que es el "más claro"?

Debe tener en cuenta algunos factores clave ...

Primero, hay dos tipos de compresión: sin pérdida y con pérdida .

• Sin pérdida significa que la imagen se hace más pequeña, pero sin perjudicar la calidad.
• Pérdida significa que la imagen se hace (incluso) más pequeña, pero en detrimento de la calidad. Si guarda una imagen en un formato con pérdida una y otra vez, la calidad de la imagen empeorará 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 puede almacenar miles de colores que no han sido elegidos directamente por el autor.

BMP : sin pérdidas / 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, lo que significa que guardar como 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 los archivos son tan innecesariamente grandes que nadie realmente usa este formato.

Bueno para: nada realmente. No hay nada en lo que BMP sobresalga, o otros formatos no lo hacen mejor.

GIF : sin pérdida / solo indexado

GIF utiliza compresión sin pérdidas, lo que significa que puede guardar la imagen una y otra vez y nunca perder ningún dato. Los tamaños de archivo son mucho más pequeños que BMP, porque en realidad 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 se usa realmente para sitios web.

JPEG : con pérdida / directa

Las imágenes JPEG fueron diseñadas para hacer imágenes fotográficas detalladas lo más pequeñas posible al eliminar información que el ojo humano no notará. Como resultado, es un formato con pérdida, y guardar el mismo archivo una y otra vez dará como resultado que se pierdan más datos con el tiempo. Tiene una paleta de miles de colores y, por lo tanto, es ideal para fotografías, pero la compresión con pérdida significa que es malo para logotipos y dibujos lineales: ¡no solo se verán borrosos, sino que esas imágenes también tendrán un tamaño de archivo más grande en comparación con los GIF!

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

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 puede GIF (bueno, puede, pero solo Firefox parece admitirlo, a diferencia de la animación GIF que es compatible con todos los navegadores). En segundo lugar, tiene algunos problemas de soporte con navegadores antiguos como IE6. En tercer lugar, un software importante como Photoshop tiene una implementación muy pobre del formato. (¡Maldita sea, 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-24 - Sin pérdidas / Directo

PNG-24 es un gran formato que combina la codificación sin pérdida con el color directo (miles de colores, al igual que JPEG). Es muy similar a BMP en ese sentido, excepto que PNG realmente comprime las imágenes, por lo que resulta en archivos mucho más pequeños. Desafortunadamente, los archivos PNG-24 seguirán siendo más grandes que 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 será 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 alfa-transparencia.

SVG - Sin pérdida / Vector

Un tipo de archivo que actualmente está creciendo en popularidad es SVG, que es diferente de todo lo anterior en que es un formato de archivo vectorial (los anteriores son todos de trama ). Esto significa que en realidad se compone de líneas y curvas en lugar de píxeles. Cuando acercas una imagen vectorial, aún ves una curva o una línea. Cuando acercas una imagen rasterizada, verás píxeles.

Por ejemplo:

Esto significa que SVG es perfecto para logotipos e iconos que desea conservar la nitidez en las pantallas Retina o en diferentes tamaños. También significa que se puede usar un logotipo SVG pequeño en un tamaño mucho más grande (más grande) sin degradación en 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 ráster.

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 potencia informática que las imágenes ráster porque los cálculos matemáticos están involucrados en el dibujo de 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 pueden abrirse y editarse 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 ícono SVG en un sitio web, como si fuera texto (es decir, no necesita una segunda imagen), o incluso animarlos.

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

¡Espero que eso ayude!

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 según el 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, etc.) se comprimen muy bien en PNG y no tienen pérdidas. GIF solo debe usarse cuando desea que la transparencia funcione en IE6 o desea animación. GIF solo admite una paleta de 256 colores, pero también es sin pérdidas.

Básicamente, aquí hay una manera de decidir el formato de 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 hay líneas rectas como en un cómic u otro dibujo o si se necesita una amplia gama 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 relaciones de compresión y evalúe la calidad y el tamaño de la imagen y elija cuál cree que es mejor. Solo estoy dando reglas generales.

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

Los GIF son adecuados para dibujos lineales de bordes afilados (como logotipos) con un número limitado de colores. Esto aprovecha la compresión sin pérdidas del formato, que favorece á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 pequeñas animaciones 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, generalmente no se usa como formato para fotografía digital. Los fotógrafos digitales utilizan formatos de archivo de imagen capaces de reproducir una mayor gama de colores, como TIFF, RAW o 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.

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

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

GIF está limitado a 256 colores y no admite transparencia real. Debería 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.

Hay un truco que se puede hacer para usar imágenes GIF para mostrar el color verdadero. Se puede preparar una animación GIF con 256 cuadros con paletas de colores con un retraso de 0 cuadros y configurar la animación para que se muestre solo una vez. Por lo tanto, todos los cuadros se pueden mostrar al mismo tiempo. Al final, se representa una imagen GIF de color verdadero.

Muchos programas son capaces de mostrar tales imágenes GIF. Sin embargo, el tamaño del archivo de salida es mayor que un archivo PNG. Debe usarse si es realmente necesario.

png tiene una paleta de colores más amplia que gif y gif es adecuada mientras que png no lo es. gif puede hacer animaciones, lo que normal-png no puede. png-transparent solo es compatible con el navegador más o menos más reciente que IE6, pero hay una solución de Javascript para ese problema. Ambos admiten transparencia alfa. En general, diría que debe usar png para la mayoría de los gráficos web mientras usa jpeg para fotos, capturas de pantalla o similares, porque la compresión png no funciona demasiado bien en esas personas.

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

Con todo, si no necesita usar imágenes alfa-transparentes y es compatible con IE6, PNG es probablemente la mejor opción cuando necesita imágenes con píxeles perfectos para ilustraciones vectoriales y demás. JPG es inmejorable para las fotografías.

A partir de 2018, tenemos varios formatos nuevos, mejor soporte para formatos anteriores y algunos trucos inteligentes de usar videos en lugar de imágenes.

Para fotografias

jpg - sigue siendo el formato de imagen más ampliamente compatible.

webp- Nuevo formato de google. Buen potencial, aunque el soporte del navegador no es excelente.

Para iconos y gráficos

svg- cuando sea posible. Se escala bien en pantallas de retina, editable en editores de texto y personalizable a través de JS / CSS si se carga en DOM.

png- si se trata de gráficos de trama (es decir, cuando se crea en Photoshop). Apoya la transparencia, que es muy esencial en este caso de uso.

Para animaciones

svg- Además de animaciones CSS para gráficos vectoriales. Todas las ventajas de svg + poder de las animaciones CSS.

gif - sigue siendo el formato de imagen animada más ampliamente compatible.

mp4- si las imágenes animadas son realmente videoclips cortos. Twitter / Whatsapp convierte gifs a mp4.

apng- soporte decente para el navegador (es decir, sin IE, Edge), pero crearlo no es tan sencillo como los gifs.

webp- Cerca de usar mp4. Pobre apoyo

Esta es una buena comparación de varios formatos de imágenes animadas.

Finalmente, sea cual sea el formato, asegúrese de optimizarlo: existen herramientas para cada formato (por ejemplo, SVGO, Guetzli, OptiPNG, etc.) y pueden ahorrar un ancho de banda considerable.

La principal diferencia es que GIF está patentado y es un poco más ampliamente compatible. PNG es una especificación abierta y la transparencia alfa no es compatible con IE6. El soporte se mejoró en IE7, pero no se solucionó por completo.

En cuanto a los tamaños de archivo, GIF tiene una paleta de colores predeterminada más pequeña, por lo que tienden a ser tamaños de archivo más pequeños a primera vista. Los archivos PNG tienen una paleta predeterminada más grande, sin embargo, puede reducir su paleta de colores para que, cuando lo haga, den como resultado un tamaño de archivo más pequeño que el GIF. El problema nuevamente es que esta característica no es tan compatible con Internet Explorer.

Además, dado que los PNG pueden admitir transparencia alfa, son la única opción si desea una variación de transparencia distinta de la transparencia binaria.

Si opta por JPEG, y está tratando con imágenes para un sitio web, es posible que desee considerar Google Guetzli codificador perceptual , que está disponible gratuitamente. En mi experiencia, para una calidad fija, Guetzli produce archivos más pequeños que las bibliotecas de codificación JPEG estándar, al tiempo que mantiene la compatibilidad total con el estándar JPEG (por lo que sus imágenes tendrán la misma compatibilidad que las imágenes JPEG comunes).

El único inconveniente es que Guetzli tarda mucho tiempo en codificar ... ¡pero esto se hace solo una vez, cuando prepara la imagen para el sitio web, mientras que los beneficios permanecen para siempre! Las imágenes más pequeñas tardarán menos tiempo en descargarse, por lo que la velocidad de su sitio web aumentará en el uso diario.

GIF tiene una paleta de 8 bits (256 colores), donde PNG tiene una paleta de colores de hasta 24 bits. Entonces, PNG puede admitir más color y, por supuesto, el algoritmo admite la compresión

Como señaló @aarjithn, WebP es un códec para almacenar fotografías.

Este también es un códec para almacenar animaciones (secuencia de imágenes animadas). A partir de 2020, la mayoría de los navegadores convencionales tienen compatibilidad inmediata ( tabla de compatibilidad ). Nota para WIC hay un complemento disponible.

Tiene ventajas sobre GIF porque se basa en un códec de video VP8 y tiene una gama de colores más amplia que GIF, donde GIF limita a 256 colores, lo expande a 2 ²⁴ = 16777216 colores, ahorrando una cantidad significativa de espacio.