JPEG vs PNG vs BMP vs GIF vs SVG

40

Me gustaría saber cuál de estos formatos requiere menos memoria para la misma calidad de imagen y cuáles son las principales diferencias entre estos formatos.

Narek
fuente
15
Por cierto, JPG y JPEG se refieren a lo mismo (véase, por ejemplo, en.wikipedia.org/wiki/JPEG ), por lo que el título podría simplificarse un poco.
Jonik
1
¿No está seguro de cómo mi respuesta no responde a su pregunta original y cómo responde su respuesta elegida ...? : - /
Django Reinhardt
44
> cuál de estos formatos requiere menos memoria Um, defina "menos memoria". ¿Quiere decir que ocupa menos espacio en disco? (JPEG para fotos, PNG y / o GIF para capturas de pantalla). ¿Quiere decir que el archivo comprimido ocupa menos espacio en la memoria? (. Igual que el espacio en disco) ¿Se refiere a la imagen decodificada ocupa menos espacio en la memoria ( Ninguno ; todos ellos son esencialmente los mismos cuando se decodifica a prima.)
Synetech

Respuestas:

54

De Cuál es la diferencia entre TIFF, GIF, JPG, JPEG, PNG, BMP y un archivo?

BMP - Mapa de bits. Este fue probablemente el primer tipo de formato de imagen digital que recuerdo. Cada imagen en una computadora parecía esos días como una BMP. En Windows XP, el programa Paint guarda sus imágenes automáticamente en BMP. Sin embargo, en Windows Vista y las imágenes posteriores ahora se guardan en JPEG. BMP es la plataforma base para muchos otros tipos de archivos.

JPG / JPEG - (Joint Photographic Experts Group) El formato Jpeg se usa para fotografías en color, o cualquier imagen con muchas mezclas o gradientes. No es bueno con bordes afilados y tiende a desenfocarlos un poco a menos que se almacenen en alta calidad. Este formato se hizo popular con la invención de la cámara digital. La mayoría, si no todas, las cámaras digitales descargan fotos a su computadora como un archivo Jpeg. Obviamente, los fabricantes de cámaras digitales ven el valor en imágenes de alta calidad que finalmente ocupan menos espacio.

GIF : el formato GIF (formato de intercambio de gráficos) se utiliza mejor para texto, dibujos lineales, capturas de pantalla, dibujos animados y animaciones. El GIF está limitado a un número total de 256 colores o menos, por lo que las imágenes GIF son relativamente pequeñas. Se usa comúnmente para la carga rápida de páginas web. También es un gran banner o logotipo para su página web. Las imágenes animadas también se pueden guardar en formato GIF como una secuencia de imágenes estáticas. Por ejemplo, un banner parpadeante se guardaría como un archivo Gif.

PNG - (Portable Networks Graphic) Este formato sin pérdida es uno de los mejores formatos de imagen. No siempre fue compatible con todos los navegadores web o software de imagen, pero hoy en día es el mejor formato de imagen para el sitio web. Yo uso .png para logotipos y capturas de pantalla. Una de sus capacidades más asombrosas es poder comprimir imágenes sin pérdida (sin pérdida de píxeles), aunque el tamaño comprimido final varía entre los editores de imágenes.

TIFF - (Formato de archivo de imagen etiquetada) Este formato de archivo no se ha actualizado desde 1992 y ahora es propiedad de Adobe. Puede almacenar una imagen y datos (etiquetas) en un archivo. TIFF se puede comprimir, pero es más bien su capacidad de almacenar datos de imagen en un formato sin pérdida lo que hace que un archivo TIFF sea un archivo de imagen útil, porque a diferencia de los archivos JPEG estándar, un archivo TIFF que utiliza compresión sin pérdida (o ninguno) puede editarse y volver a -grabado sin perder calidad de imagen. Este archivo se usa comúnmente para escaneo, fax, procesamiento de texto, etc. Ya no es un formato de archivo común para usar con sus fotos digitales, ya que JPEG es de gran calidad y ocupa menos espacio.

harrymc
fuente
1
Tenga en cuenta que sin un "hack" de clases, IE6 todavía no soporta transparencia alfa en archivos PNG es decir, áreas de transparencia que son semi opaco
Josh Comley
2
... y una cantidad sorprendente de personas todavía usa IE6 ( tinyurl.com/56kp ). ¡Y MS quiere apoyarlo hasta 2014! :( ( tinyurl.com/qvdyn5 )
Josh Comley
9
BMP: esta no es la base para otros formatos de archivo. Hasta donde yo sé, el encabezado BMP y la estructura de archivos no se comparten con otros formatos (a diferencia de TIFF, por ejemplo). JPEG: Fue creado y existió en la web antes de que las cámaras digitales se volvieran frecuentes. Además, muchas cámaras digitales permiten guardar un formato "en bruto", que generalmente es un TIFF, aunque con contenidos específicos del proveedor. GIF: no está restringido a 256 colores por imagen, solo a 256 colores por fotograma (consulte en.wikipedia.org/wiki/Graphics_Interchange_Format#True_color ).
Joey el
44
TIFF: el formato de archivo y contenedor predominante para imágenes en bruto de cámaras digitales (las que no apuntan y disparan). TIFF permite datos casi arbitrarios (por lo tanto etiquetados ), lo que también significa que admite métodos de compresión arbitrarios de LZW (GIF), LZ77 (PNG) a JPEG y otros. También TIFF permite múltiples imágenes (páginas) en un archivo.
Joey el
44
Mientras que la respuesta es bueno en responder a la diferencia de los formatos de imagen en términos de historia y de uso general, la respuesta original preguntó acerca de los tamaños relativos y la calidad también ...
camster342
76

En estilo xkcd de lbrandy.com :

texto alternativo

Robert MacLean
fuente
44
Ilustra el punto muy bien :) (incluso si nunca he visto a nadie abogar por esa política de '¡Siempre JPEG!')
Jonik
77
+1 Dado que esta imagen ilustra muy bien el problema de JPEG ...
Johan
55
¡Ojalá pudiera duplicar el voto! ¡Envío esto a todos los que me envían archivos basura!
Tim Büthe el
3
© 2008 Louis Brandy. Todos los derechos reservados....?
Arjan
3
Facebook tiene, por ejemplo, esta política 'Siempre JPEG'. Subo una bonita imagen PNG sin pérdida de 99 KB y Facebook la convierte en un feo JPEG de 175 KB.
Paul
63

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 archivo son tan innecesariamente grandes que nadie usa realmente este formato.

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

BMP vs GIF


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 utiliza 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.

GIF vs JPEG


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, por lo que 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.

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 (bueno, sí, 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-8 vs GIF

Nota importante: Photoshop no admite Transparencia alfa para archivos PNG-8. (¡Maldita sea, Photoshop!) Sin embargo, hay formas de convertir Photoshop PNG-24 en archivos PNG-8 manteniendo su transparencia. Un método es PNGQuant , otro es guardar sus archivos con Fireworks .


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, como JPEG). Es muy parecido a BMP en ese sentido, excepto que PNG realmente comprime las imágenes, por lo que resulta en archivos mucho más pequeños. Lamentablemente, los archivos PNG-24 seguirán siendo mucho más grandes que los JPEG, GIF y PNG-8, 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 - Sin pérdidas / 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 ráster, verás píxeles.

Por ejemplo:

PNG vs SVG

SVG vs PNG

Esto significa que SVG es perfecto para logotipos e iconos que desea conservar la nitidez en las pantallas Retina o en diferentes tamaños.

Además, los archivos SVG se escriben usando XML, por lo que pueden abrirse y editarse en un editor de texto, para que pueda manipularse sobre la marcha, si lo desea. 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).

¡Espero que eso ayude!

Django Reinhardt
fuente
Buena ilustracion. Tenga cuidado con los artefactos causados ​​por la compresión. Creo que JPEG como los formatos de compresión de video tiene el problema de que las zonas rojas sólidas tenderán a "sangrar" en los bordes.
James P.
1
Te equivocas sobre PNG que no admite animación. PNG puede hacerlo bien, la mayoría de los visores y navegadores no lo admiten. en.wikipedia.org/wiki/APNG Firefox lo soporta bastante bien, parece. people.mozilla.com/~dolske/apng/demo.html
Rob
1
@DjangoReinhardt Sé que incluiste un ejemplo en tu respuesta, pero en lo que respecta a los SVG frente a PNG, ¿en qué circunstancias podríamos ver un SVG más grande (en tamaño de archivo) frente a un PNG?
Hanna
1
@Johannes Gran pregunta. Hay algunas desventajas en SVG, especialmente si son particularmente complicadas (o mal guardadas, pero eso es culpa del autor, no del formato del archivo). Intentaré agregar algo que responda a esto, aunque sospecho que un SVG siempre será más pequeño (o de igual tamaño) que un PNG.
Django Reinhardt
1
Otro hecho divertido: los archivos BMP tienen un tamaño similar a PNG si los comprime.
jiggunjer
28

Las respuestas existentes incluyen muy pocos datos técnicos, así que los incluiré aquí.

  • JPEG : color de hasta 24 bits (¿posiblemente más?), Compresión variable (generalmente alta), con pérdida, sin soporte alfa
  • PNG : color de hasta 48 bits, compresión moderada, sin pérdida, soporte alfa
  • BMP : color de hasta 24 bits, muy poca compresión, sin pérdida, soporte alfa
  • GIF : color de hasta 8 bits, poca compresión, sin pérdidas, soporte de transparencia, soporte de animación

Profundidad del color

  • Color de 8 bits == 256 colores
  • Color de 24 bits == 16,777,216 colores
  • Color de 48 bits == 281,474,976,710,656 colores

La mayoría de los monitores de computadora funcionan con una profundidad de color de 24 bits. El ojo humano puede distinguir sobre tantos colores. La profundidad de color adicional es principalmente para poder retener información de un sensor para que la manipulación de una fotografía tenga más datos con los que trabajar. Intentar representar una fotografía en color de 8 bits resultará en granulosidad.

Compresión

Esto básicamente se refiere a qué tan grande será el archivo final. Más compresión equivale a un archivo más pequeño. Sin embargo, JPEG alcanza archivos de tamaño pequeño al descartar datos. Esto se conoce como compresión "con pérdida", porque nunca puede recuperar los datos originales sin comprimir. Su compresión también está optimizada para fotografías donde los bordes de alto contraste son poco comunes. Como se indicó en otras respuestas, es una mala elección para cualquier otra cosa que no sean fotografías.

Alfa / Transparencia

Alfa se refiere a la transparencia, pero implica que hay más de un nivel de transparencia. GIF tiene la capacidad de definir píxeles transparentes, pero es opaco o 100% transparente, y "transparente" se usa como uno de los 256 colores. PNG y BMP tienen la capacidad de marcar cada píxel como opaco, transparente o parcialmente transparente, como una pieza de vidrio coloreado. Con mayor frecuencia, hay 256 niveles de transparencia, aunque PNG puede tener hasta 65.536 niveles. JPEG no tiene soporte para transparencia.

Animación

Efectivamente, de estos formatos, solo GIF tiene soporte para animación. Existen especificaciones para la animación con PNG (MNG, APNG) y JPEG (MJPEG), pero no son ampliamente compatibles. (APNG funciona en versiones recientes de Firefox y Opera). En la práctica, la mayoría de las animaciones que ve en las páginas web se implementan en Flash.

wfaulk
fuente
APNG está ganando mucho apoyo.
Phoshi
Bastante seguro. No me había dado cuenta.
wfaulk
Bueno, la mayoría de los navegadores modernos lo admiten, pero es poco conocido. IE8 no lo admite, no lo creo (pero puede leerlo como PNG, por lo que muestra el primer fotograma)
Phoshi
Gran procesamiento del pensamiento ..
InfantPro'Aravind '
25
  • Use GIF si la imagen tiene pocos colores (como iconos). También se puede usar para imágenes animadas (como banners publicitarios).
  • Use JPG si la imagen tiene muchos colores (como fotos). JPEG es lo mismo.
  • Use BMP si desea guardar la imagen sin compresión. ¡Tamaño de archivo mucho más grande!
  • Use PNG si desea publicar la imagen en la web y estar actualizado con los estándares modernos. Pros: Adecuado como reemplazo moderno para GIF y JPG, y es un estándar abierto y permite transparencia. Contras: No es compatible con software anterior, y el tamaño del archivo puede ser mayor que el de GIF o JPG comparables.
Torben Gundtofte-Bruun
fuente
3
+1 para consideraciones prácticas sobre cuándo usar cada uno.
Andrew Coleson
44
Tenga cuidado con el uso de PNG. Como formato sin pérdida, generalmente no son adecuados para fotografías y similares, debido al tamaño del archivo. Definitivamente no es un "reemplazo moderno" para todos los propósitos. La transcodificación de JPG a PNG sería realmente estúpida.
Paul McMillan
@Paul - Estoy de acuerdo, ciertamente no es útil para todos los propósitos y en particular no para fotos, pero cuando se usa para gráficos web, reemplaza a JPG.
Torben Gundtofte-Bruun
2
No creo que haya una necesidad de BPM hoy en día.
Arjan
1
PNG es casi siempre más pequeño que GIF. Tiene un esquema de compresión superior. Cuando es más grande que el mismo GIF, generalmente es culpa de un software pésimo (por ejemplo, Photoshop antes de CS2). Utilice PNG paletizado (¡no de 24 bits!) Y fíjelos con el optimizador PNG: imageoptim.pornel.net y nunca más querrá perder el ancho de banda en los GIF.
Kornel
13

ingrese la descripción de la imagen aquí


BMP:

  • Formato antiguo Sin pérdida de datos.
  • No comprimido: almacena el valor de cada píxel. Por lo tanto, las imágenes de las mismas dimensiones tienen el mismo tamaño de archivo (kilobytes / megabytes). Por ejemplo, las imágenes de 800 × 600 BMP son siempre 1.37 MiB como el popular fondo de pantalla WinXP "Bliss".
  • Transparencia / translucidez no compatible
  • No recomendado para nada

JPG:

  • Compresión con pérdida.
  • Se puede establecer la cantidad de pérdida, por ejemplo, al crear un gráfico y guardarlo en Photoshop.
  • Guardar como de mayor calidad significa menos pérdida de colores / profundidad y alto tamaño de archivo, y viceversa.
  • Transparencia / translucidez no compatible
  • Recomendado para fotografías, no para gráficos / íconos

PNG:

  • Compresión sin pérdida (sí, lo mejor de ambas PALABRAS / mundos)
  • Admite transparencia y translucidez, ambos son diferentes
  • Recomendado para gráficos / íconos estáticos, no para fotografías

GIF:

  • Apoya la transparencia pero no la translucidez
  • Recomendado solo para gráficos / iconos ANIMADOS
  • Tal vez las fotografías en movimiento en marcos en Harry Potter son GIF: D
Shumon Saha
fuente
1
Buena vista general. Pero, ¿por qué BMP está marcado como "sin pérdida: falso" en la tabla? En el texto, declaras IMHO correctamente que BMP no tiene pérdidas .
mpy
2
Sé que este es un hilo antiguo, y gracias por la respuesta, pero tenga en cuenta que BMP está opcionalmente comprimido con una compresión RLE muy simple y sin pérdidas.
ysap
¿Alguna otra razón por la que NO se recomienda PNG para fotografías, aparte de su tamaño de archivo más grande en comparación con JPEG? Primero escaneé mis fotos antiguas en formato JPEG, luego las volví a escanear en PNG después de darme cuenta de que estaba escaneando una foto que se almacenaría en un formato con pérdida.
JAT86
4

BMP utiliza bits sin formato con un encabezado pequeño o codificación de longitud de ejecución . JPEG utiliza la transformación discreta de coseno . Vea el bloque en la parte inferior de los artículos de Wikipedia para otros algoritmos de compresión / codificación.

Ignacio Vazquez-Abrams
fuente
Me gusta el PCX. Hace mucho tiempo, cuando decidí aprender el ensamblador, para mi primer programa, escribí un visor PCX. Fue bastante educativo. (Yo no escribo un visor JPG). :-D
Synetech
3

Guid simple:

  • Para fotografías, use:
    • Formatos sin formato específicos de la cámara si tiene un equipo profesional y desea realizar un gran procesamiento posterior
    • JPEG de lo contrario (para publicar fotos en la web, también deberá convertir los formatos sin formato a JPEG)
  • Para cualquier cosa con bordes afilados, líneas finas y pocos colores (como capturas de pantalla o logotipos) use:
    • GIF si está haciendo una página web que debe ser compatible con navegadores muy antiguos (principalmente IE 6), o si desea hacer animaciones simples
    • PNG de lo contrario
  • No hay una buena razón para usar BMP, a menos que un programa específico no acepte otros formatos.
Michael Borgwardt
fuente
1
IE ha admitido PNG desde alguna versión 4.x (5 en Mac), pero no es PNG transparente.
Arjan
1
IE6 incluso admite PNG transparente si tiene una transparencia similar a GIF. Solo PNG con alfa completo no es compatible.
Kornel
1
En realidad, se admite Alpha Transparency, siempre que sea un PNG de 8 bits. Extraño, pero cierto.
Django Reinhardt