Formatos de compresión comunes para imágenes web
PNG es un formato de compresión sin pérdidas muy popular y compatible con todos los navegadores. Proporciona una calidad de imagen excelente, pero normalmente tiene tasas de compresión más bajas.
En este artículo, utilizaremos imágenes PNG como base para examinar y calificar la calidad de la imagen frente a otros formatos de compresión con pérdida.
Aunque el formato PNG está desactualizado y es más grande, todavía tiene un lugar en la web, especialmente en aplicaciones donde la calidad de la imagen es fundamental. PNG también se recomienda para imágenes con bordes muy nítidos, como las que contienen texto. Para este tipo de imágenes, comprimir imágenes de texto usando PNG en realidad tiene la ventaja de tasas de compresión más altas y mejor calidad que otros formatos, incluida la compresión con pérdida.
PNG tiene dos modos: profundidad de color de 24 bits u 8 bits. El primero se utiliza para representar fotografías y el segundo para representar imágenes de texto, fotografías monocromáticas o imágenes de logotipos.
BMP es solo un contenedor de imágenes y no proporciona capacidades de compresión. Este formato se utiliza principalmente para el procesamiento de imágenes, como las paletas de colores en Windows.
El tamaño de BMP es fácil de calcular. Por ejemplo, una imagen RGB con una resolución de 1920x1080p ocupará aproximadamente 1920 x 1080 x 3 espacio de almacenamiento, que es aproximadamente 5 MB de espacio de almacenamiento. eso BMP El tamaño del archivo es significativamente mayor que los formatos comprimidos, incluido PNG. En términos generales, las imágenes BMP no deben usarse en sitios web a menos que existan circunstancias especiales, pero de hecho hay muchas imágenes BMP en sitios web. En términos generales, las imágenes BMP no deben usarse en sitios web a menos que existan circunstancias especiales, pero de hecho hay muchas imágenes BMP en sitios web.
En términos generales, si desea un archivo más pequeño, el tiempo de procesamiento necesario para codificar el archivo será mayor, mientras que el tiempo de decodificación generalmente no diferirá demasiado.
Recordemos que la calidad de la imagen BMP es muy buena y ampliamente soportada por los navegadores, pero el tamaño del archivo es muy grande.
GIF es muy popular como formato de animación, ya sean emoticones de imágenes dinámicas reenviadas en WeChat o imágenes dinámicas en sitios web, puedes verlo en todas partes y todos los navegadores admiten imágenes GIF.
GIF es una mezcla de compresión con y sin pérdidas. La representación de píxeles no tiene pérdidas, pero la profundidad del color está limitada a 8 bits por píxel (es decir, cada imagen se convierte a 256 colores, mientras que la imagen original (si está en formato RGB) en realidad se representa con 24 bits por píxel). Esto significa que los archivos contienen menos colores (hasta 256 colores diferentes por archivo), pero el tamaño del archivo es menor. Esta es una comparación de la representación de color de un PNG de 24 bits y un GIF de 8 bits.
Obviamente, las imágenes GIF tienen un efecto de contorno porque los GIF no pueden expresar colores intensos.
Los GIF no son adecuados para representar fotografías ni otras imágenes ricas en contenido. Pero son excelentes para logotipos, íconos, etc. simples, ya que estas imágenes no tienen muchos colores y en su mayoría son colores sólidos. En mi experiencia, los PNG de 8 bits producen archivos más pequeños que los GIF, por lo que, para imágenes estáticas, se recomiendan los PNG de 8 bits.
El formato SVG es muy especial y muy diferente al resto de formatos. Las imágenes SVG almacenan geometría en lugar del valor de cada píxel. Su principal ventaja es que se puede ampliar infinitamente sin perder calidad, como se puede comprobar en la siguiente comparativa:
El tipo de archivo SVG se utiliza principalmente para logotipos, pero también se puede utilizar para imágenes de formas geométricas. . Las principales desventajas de este tipo de archivo son:
Para imágenes pequeñas, como logotipos, el tamaño del archivo suele ser mayor que PNG o WebP, especialmente para logotipos con formas complejas e irregulares. En la mayoría de los casos, no hay forma de convertir una imagen a SVG de manera eficiente (hay algunas herramientas que dicen que pueden hacerlo, pero los resultados no son ideales).
La calidad de imagen de los archivos SVG es muy alta, independientemente del tamaño de visualización. Todos los navegadores modernos lo admiten.
JPEG es el rey de las imágenes web.
La gran mayoría de las imágenes en la web se almacenan en formato JPEG, como se muestra a continuación:
¿Por qué son tan populares los archivos JPEG? Los archivos JPEG son generalmente pequeños para la gran mayoría de archivos. Utiliza un algoritmo de compresión con pérdida que minimiza el tamaño del archivo sacrificando la calidad en áreas donde el ojo humano es menos sensible.
Este método puede reducir significativamente el tamaño del archivo, generalmente sin distorsión perceptible. Comparemos esta foto de Júpiter tomada por la sonda JUNO.
¿Foto PNG original (2 MB)? JPEG Mejor calidad (1MB) Calidad JPEG predeterminada
Con la compresión JPEG podemos reducir significativamente el tamaño de la imagen (más del 90%) sin perder calidad. Tampoco hay una gran pérdida de calidad cuando acercamos estas imágenes.
JPEG no funciona bien con todas las imágenes y, como se mencionó anteriormente en la introducción a PNG, no funciona bien con imágenes con bordes nítidos y menos color. Un ejemplo común es una imagen que contiene texto, otro ejemplo es un logotipo:
En esta imagen, la imagen JPEG tiene un tamaño de aproximadamente 2 KB (el doble del tamaño del archivo PNG) y, cuando se amplía, el tamaño JPEG Los bordes no funcionan tan bien como deberían y los colores aparecen distorsionados. Incluso en las partes de la imagen sin escala, la distorsión es muy notable.
JPEG viene en dos formatos: JPEG básico y JPEG progresivo.
La diferencia visual entre los dos formatos es la forma en que se cargan las imágenes. El formato de referencia carga imágenes de arriba a abajo a medida que llegan los datos. Línea por línea, imprima la imagen completa de una sola vez con muy baja calidad, mejorando la imagen a medida que llegan los datos. La siguiente animación muestra la diferencia:
El mundo más allá de JPEG: WebP
La compresión JPEG puede reducir muy bien el tamaño del archivo, aunque JPG se está volviendo obsoleto. Como usted sabe, TI evoluciona en unos pocos años como un siglo...?
En los últimos años, han surgido algunos métodos de codificación más nuevos (como mozJPG), pero la idea central no ha cambiado.
Al mismo tiempo, existen otros formatos que son superiores en términos de calidad de imagen y tamaño de archivo (BPG, JPEG 2000, JPEG XR), pero debido a que algunos de ellos están protegidos por patentes, no están incluidos. en el Ampliamente utilizado en Internet.
Afortunadamente, WebP está disponible públicamente. Este formato, actualmente desarrollado y de código abierto por Google, utiliza compresión sin pérdidas y con pérdidas para minimizar el tamaño del archivo. Muchos navegadores modernos admiten este formato, pero todavía existen lagunas en la cobertura. En agosto de 2018, casi el 75 % de los usuarios de todo el mundo navegan por la web utilizando un navegador compatible con imágenes WebP. El tamaño de archivo y la calidad de las imágenes WebP parecen prometedores. Además de su excelente rendimiento de compresión, la mayor ventaja de WebP es su versatilidad. Se puede comprimir en formatos con y sin pérdida, con profundidad de color, transparencia y efectos de animación específicos. También sobresale en todas estas áreas.
Para resumir brevemente, se comparan varios formatos de imágenes estáticas de la siguiente manera:
El próximo artículo presentará formatos dinámicos comunes.