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 imagen y cuáles son las principales diferencias entre estos formatos.

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.

En estilo xkcd de lbrandy.com :

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.

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.

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.

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.

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:

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!

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.

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

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

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.

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.