JPEG vs PNG vs BMP vs GIF vs SVG

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

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

BMP – Mapa de bits. Este fue probablemente el primer tipo de formato de imagen digital que puedo recordar. Cada imagen en una computadora parecía esos días para ser un 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 se guardan en JPEG. BMP es la plataforma de base para muchos otros tipos de archivos.

JPG / JPEG – (Joint Photographic Experts Group) El formato Jpeg se utiliza para fotografías a color, o cualquier imagen con muchas mezclas o degradados. No es bueno con bordes afilados y tiende a difuminar un poco a menos que se almacena en alta calidad. Este formato se popularizó con la invención de la cámara digital. La mayoría, si no todas, las cámaras digitales descargar 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 en última instancia ocupan menos espacio.

GIF – (Graphics Interchange Format) El formato GIF se utiliza mejor para texto, dibujos lineales, capturas de pantalla, dibujos animados y animaciones. 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 utiliza comúnmente para la carga rápida de páginas web. También hace 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érdidas 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. Uso .png para logotipos y capturas de pantalla. Una de sus capacidades más asombrosas es poder comprimir imágenes sin pérdidas (sin pérdida de píxeles), aunque el tamaño comprimido final varía entre los editores de imágenes.

TIFF – (Tagged Image File Format) Este formato de archivo no se ha actualizado desde 1992 y ahora es propiedad de Adobe. Puede almacenar una imagen y datos (etiquetas) en el único archivo. TIFF puede ser comprimido, pero es más bien su capacidad de almacenar datos de imagen en un formato sin pérdidas que hace un archivo TIFF un archivo de imágenes útil, porque a diferencia de los archivos JPEG estándar, un archivo TIFF utilizando compresión sin pérdida -saved sin perder calidad de imagen. Este archivo se utiliza comúnmente para escanear, enviar por fax, procesamiento de textos, etc. Ya no es un formato de archivo común para usar con tus fotos digitales, ya que jpeg es de gran calidad y ocupa menos espacio.

En estilo xkcd de lbrandy.com :

texto alternativo

Usted debe ser consciente de algunos factores clave …

En primer lugar, hay dos tipos de compresión: Lossless y Lossy .

  • Sin pérdidas significa que la imagen se hace más pequeña, pero sin detrimento de la calidad.
  • Pérdida significa que la imagen se hace (incluso) más pequeña, pero en detrimento de la calidad. Si guardó una imagen en un 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 sólo puede almacenar un número limitado de colores (generalmente 256), controlados por el autor, en algo llamado un mapa de color
  • Directo significa que usted puede almacenar muchos miles de colores que no han sido elegidos directamente por el autor

BMP – sin pérdidas / indexadas y directas

Este es un formato antiguo. Se trata de Lossless (no se pierden datos de imagen al guardar), pero también hay poca o ninguna compresión, lo que significa que el ahorro como BMP resulta en 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 utiliza 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 / sólo 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 se utiliza realmente buena compresión, pero sólo puede almacenar una paleta Indexada. Esto significa que para la mayoría de los casos de uso , sólo puede haber un máximo de 256 colores diferentes en el archivo. Eso suena como una pequeña cantidad, y lo es.

Las imágenes GIF también se pueden animar y tener transparencia.

Bueno para: Logotipos, dibujos lineales y otras imágenes simples que necesitan ser pequeñas. Sólo realmente utilizado para sitios web.

GIF vs JPEG


JPEG – Pérdida / Directa

Las imágenes JPEG fueron diseñadas para que las imágenes fotográficas detalladas sean lo más pequeñas posible eliminando la información que el ojo humano no notará. Como resultado es un formato Lossy, y guardar el mismo archivo una y otra vez dará lugar a más datos que se pierden 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érdidas significa que es mala para logos y dibujos de líneas: no sólo se verán borrosas, sino que también tendrán un tamaño de archivo mayor en comparación con GIFs!

Bueno para: Fotografías. También, gradientes.

JPEG vs GIF


PNG-8 – sin pérdida / indexado

PNG es un formato más reciente, y PNG-8 (la versión indexada de PNG) es realmente un buen reemplazo para GIF. Por desgracia, sin embargo, tiene algunos inconvenientes: En primer lugar no puede soportar animación como GIF puede (bien puede, pero sólo Firefox parece apoyar, a diferencia de 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, el software importante como Photoshop tiene muy mala implementación del formato. (Damn you, Adobe!) PNG-8 sólo puede almacenar 256 colores, como GIF.

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

PNG-8 vs GIF

Nota importante: Photoshop no admite transparencia alfa para archivos PNG-8. (Damn you, Photoshop!) Hay maneras de convertir Photoshop PNG-24 a PNG-8 archivos, manteniendo su transparencia, sin embargo. Un método es PNGQuant , otro es guardar sus archivos con Fireworks .


PNG-24 – sin pérdida / directo

PNG-24 es un gran formato que combina la codificación sin pérdidas con el color directo (miles de colores, al igual que JPEG). Es muy similar a BMP en ese sentido, excepto que PNG realmente comprime imágenes, por lo que resulta en archivos mucho más pequeños. Desafortunadamente, los archivos PNG-24 seguirán siendo mucho más grandes que los JPEG, GIF y PNG-8, así que todavía necesitas considerar si realmente quieres usar uno.

A pesar de que 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 será probablemente al menos 5 veces mayor que una imagen JPEG equivalente, con muy poca mejora en la calidad visible. (Por supuesto, esto puede ser un resultado deseable si no estás preocupado por el tamaño del archivo, y quieres obtener la mejor calidad de imagen que puedas.)

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


SVG – Sin pérdidas / Vector

Un tipo de archivo que actualmente está creciendo en popularidad es SVG, que es diferente a todo lo anterior en que es un formato de archivo vectorial (el anterior es todo raster ). Esto significa que en realidad se compone de líneas y curvas en lugar de píxeles. Al acercar una imagen vectorial, sigue viendo una curva o una línea. Al acercar una imagen ráster, verá píxeles.

Por ejemplo:

PNG vs SVG

SVG vs PNG

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

Además, los archivos SVG se escriben utilizando XML, y por lo tanto se puede abrir y editar en un editor de texto, que se puede manipular sobre la marcha, si lo desea. Por ejemplo, puede usar JavaScript para cambiar el color de un icono SVG en un sitio web como si fuera un texto (es decir, no necesita una segunda imagen).

¡Espero que eso ayude!

Las respuestas existentes incluyen muy pocos datos técnicos, por lo que voy a incluir que aquí.

  • JPEG : color de hasta 24 bits (posiblemente más?), Compresión variable (usualmente alta), pérdida, sin soporte alfa
  • PNG : hasta 48 bits de color, compresión moderada, sin pérdidas, soporte alfa
  • BMP : hasta 24 bits de color, muy poca compresión, sin pérdidas, soporte alfa
  • GIF : hasta 8 bits de color, 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 ordenador funcionan con una profundidad de color de 24 bits. El ojo humano puede distinguir sobre muchos colores. La profundidad adicional del color es sobre todo poder conservar la información de un sensor de modo que la manipulación de una fotografía tenga más datos a trabajar con. Tratar de representar una fotografía en color de 8 bits va a resultar en grumosidad.

Compresión

Esto básicamente se refiere a cuán grande será el archivo final. Más compresión es igual a un archivo más pequeño. Sin embargo, JPEG consigue tamaños de archivo pequeños arrojando datos lejos. Esto se conoce como compresión "con pérdidas", ya que nunca podrá recuperar los datos sin comprimir originales. Su compresión también se optimiza para fotografías en las que los bordes de alto contraste son poco frecuentes. Como se indica en otras respuestas, es una mala elección para cualquier otra cosa que las 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 utiliza como uno de los 256 colores. PNG y BMP tienen la capacidad de marcar cada píxel como opaco, transparente o parcialmente transparente, como un pedazo de vidrio coloreado. Más comúnmente, hay 256 niveles de transparencia, aunque PNG realmente puede tener hasta 65.536 niveles. JPEG no tiene soporte para la transparencia.

Animación

Efectivamente, de estos formatos, sólo GIF tiene cualquier soporte para la animación. Hay 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 se ven en las páginas web se implementan en Flash.

  • Utilice GIF si la imagen tiene pocos colores (como iconos). También se puede utilizar para imágenes animadas (como banners publicitarios).
  • Utilice JPG si la imagen tiene muchos colores (como fotos). JPEG es lo mismo.
  • Utilice BMP si desea guardar la imagen sin compresión. Tamaño de archivo mucho mayor!
  • Utilice PNG si desea publicar la imagen en la web y estar al día con los estándares modernos. Pros: Conveniente como reemplazo moderno para el GIF y el JPG, y es un estándar abierto, y permite la transparencia. Contras: No es compatible con software antiguo, y el tamaño del archivo puede ser mayor que el GIF o JPG comparable.

Introduzca aquí la descripción de la imagen


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, 800 × 600 imágenes BMP son siempre 1,37 MiB como el popular fondo de pantalla "Bliss" de WinXP.
  • Transparencia / translucidez no soportada
  • No se recomienda para nada

JPG:

  • Compresión con pérdida.
  • La cantidad de la pérdida se puede fijar, por ejemplo, mientras que crea un gráfico y ahorra en Photoshop.
  • Ahorrar como de mayor calidad significa menos pérdida de colores / profundidad y alto tamaño de archivo, y viceversa.
  • Transparencia / translucidez no soportada
  • Recomendado para fotografías, no para gráficos / iconos

PNG:

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

GIF:

  • Soporta transparencia pero no transparencia
  • Recomendado sólo para gráficos / iconos ANIMADOS
  • Tal vez las fotografías en movimiento en los marcos de Harry Potter son GIFs: D

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

Simple guid:

  • Para fotografías, utilice:
    • Formatos crudos específicos de la cámara si tiene equipo profesional y desea hacer un montón de post-procesamiento
    • JPEG de lo contrario (para publicar fotos en la web, tendrá que convertir los formatos sin formato a JPEG también)
  • Para cualquier cosa con bordes afilados, líneas finas y pocos colores (como capturas de pantalla o logotipos) utilice:
    • GIF si estás haciendo una página web que tiene que soportar navegadores muy antiguos (IE 6 principalmente), o si quieres hacer animaciones sencillas
    • PNG de lo contrario
  • No hay una buena razón para usar BMP, a menos que un programa específico no acepte otros formatos.
    Intereting Posts