Formatos de imágenes de sitios web de alta resolución

Todos conocemos la expresión "una imagen vale más que mil palabras", pero ¿cómo puede asegurarse de que obtiene el valor de las mil palabras? ¿Hay alguna forma de que sus imágenes valgan incluso más? Elegir el formato óptimo de una imagen para un dispositivo específico mediante una condición de red determinada a través de un navegador concreto puede ayudarle a maximizar el impacto de sus imágenes.

Echemos un vistazo a las funciones, las características y la compatibilidad de los formatos de imagen más comunes en los sitios web actuales: GIF, JPEG y PNG. También ofrecemos la misma información para los formatos introducidos recientemente (y para aquellos específicos para navegadores): WebP, JPEG 2000 y JPEG XR. Por último, trataremos el formato BPG (Better Portable Graphics): un nuevo formato de imagen diseñado con el fin de sustituir al formato JPEG.

GIF

Graphics Interchange Format (GIF) es un formato de imagen de mapa de bits que ha pasado a ser de uso generalizado en la web gracias a su gran compatibilidad y portabilidad.

El formato soporta un máximo de 8 bits por píxel para cada imagen, lo que permite que una única imagen incluya hasta 256 colores diferentes. También es compatible con la animación (permite una paleta independiente de hasta 256 colores para cada fotograma) y 1 bit de transparencia.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera


Sí    


JPEG

Joint Photographic Experts Group (JPEG) es un archivo de imagen con pérdidas. Las imágenes JPEG tienen varias extensiones de archivos como .jpg, .jpe, .jif, .jfif y .jfi. Los archivos JPG tienen 2 formatos secundarios, JPG/Exif (para cámaras digitales y equipos fotográficos) y JPG/JFIF (para la web).

JPEG soporta hasta 16,8 millones de colores diferentes. Por otro lado, no admite la animación ni la transparencia.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera


Sí    


PNG

Los archivos PNG (Portable Network Graphics) son un formato sin pérdidas, por lo que la compresión no afecta a la calidad de la imagen. PNG se creó como una sustitución de mejora de código abierto para archivos Graphics Interchange Format (GIF) y es el formato de compresión de imágenes sin pérdidas más usado en Internet.

PNG-8 soporta 256 colores y 1 bit de transparencia, y PNG-24 soporta 24 bits y 16,8 millones de colores. PNG es compatible con la transparencia escalable (desde la opacidad a la transparencia completa) a través del canal alfa.

La animación es compatible gracias a la extensión Animated Portable Network Graphics (APNG). Permite que los archivos PNG animados funcionen de forma similar a los archivos GIF animados, mientras que los GIF no soportan las imágenes de 24 bits y 8 bits transparencia. También mantiene la compatibilidad con versiones anteriores de archivos PNG no animados. Por el momento, APNG no ha tiene mucha popularidad y, por eso, no ha conseguido ser compatible con la mayoría de los navegadores principales.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Básico

Sí    

>=7
Animado No

Sí    

No
No

WebP

WebP es un formato de imagen moderno desarrollado por Google que utiliza tanto la compresión con pérdida como sin pérdida. Este formato abierto se distribuyó ampliamente en 2010 para proporcionar un nuevo estándar de compresión con pérdida para gráficos web. Al igual que JPEG, puede producir gráficos a color real en paquetes de tamaños más pequeños, al tiempo que mantiene una calidad de imagen similar.

WebP soporta 24 bits y 16,8 millones de colores. También es compatible con la animación, los perfiles ICC, los metadatos XMP y la transparencia a través del canal alfa.

Además del formato de archivo simple/básico, WebP también es compatible con formatos extendidos y animados. El contenedor extendido permite la incrustación de metadatos avanzados, incluidos el perfil de color, el control de animación, EXIF y XMP. El formato de imágenes animadas incluye varios fotogramas, así como fragmentos ANIM (parámetros de animación global) y ANIMF (información de fotogramas únicos).

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Básico >=9
>=29
No  
No
No
>=11,5
Animado >=32
No
No   
No
No
>=20
Extendido >=23
>=29
No   
No
No
>=12,1

JPEG 2000

JPEG 2000 (JP2) es un sistema de codificación y un estándar de compresión de imágenes con pérdida y sin pérdida. Fue creado por el comité Joint Photographic Experts Group en el año 2000 con la intención de sustituir al formato estándar JPEG. Mientras JP2 puede admitir cualquier profundidad en bits del color, la mayoría de las implementaciones utilizan colores de 24 bits.

JP2 (basado en ondículas) no es compatible con versiones anteriores de JPEG (basado en coseno discreto). JP soporta la transparencia, pero no la animación.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
No

No
>=5
No
No

JPEG XR

JPEG XR (eXtended Range) es un estándar de compresión sin pérdidas y con pérdidas y un formato de archivo para imágenes fotográficas de tono continuo, basado en una tecnología desarrollada originalmente y patentada por Microsoft bajo el nombre HD Photo. JPEG XR admite una profundidad de color de hasta 32 bits, además de transparencia a través de un canal alfa. Por otro lado, no soporta la animación.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
No
No No     No
>=10
No

BPG

BPG (Better Portable Graphics) es un nuevo formato de imagen que tiene como objetivo sustituir al formato de imagen JPEG cuando la calidad o el tamaño del archivo sea un problema. Cuenta con una alta relación de compresión, ya que los archivos son mucho más pequeños que los archivos JPEG de calidad similar. BPG soporta la compresión con pérdida y sin pérdida, además de la transparencia (a través de un canal alfa), la animación y los metadatos incrustados (metadatos de perfiles de color, XMP y EXIF). Además, soporta 14 bits por canal de color (frente a los 8 bits por canal de JPEG).

Actualmente, ningún navegador nativo soporta el formato BPG. Para ver imágenes BPG se requiere una biblioteca JavaScript de 56 KB (después de la compresión mediante GZIP).

Resumen

En la siguiente tabla se resume y ofrece información adicional sobre las capacidades y las características de todos los formatos de imagen que se han tratado.

GIF
JPEG PNG: Básico PNG: Animado
JPEG 2000
JPEG XR
WebP: Básico WebP: Extendido WebP: Animado
Color indexado

No


No
No No No No  
Color pleno
No

Sí  
Sí  
Transparencia binaria

No
Sí   No
No No No No  
Transparencia total
No 
No 
Sí  
No
No
No
No  
Submuestreo de croma
No

No   No  Sí 
4:2:0 4:2:0 4:2:0  
Carga progresiva


Sí  

No
No
No  
Animación
No
No  

No No No
No
Sí  
Compresión con pérdida


Sí  



Sí  
Compresión sin pérdida
No
No
Sí  

No
Sí  
Ahorro de bytes
Deficiente
Aceptable
Deficiente  
Aceptable
Bueno
Bueno Bueno
Bueno
Bueno  

Obtenga más información sobre cómo gestionar los formatos de imagen online más populares con Akamai Image Manager.