En Google, buscamos constantemente formas de hacer que las páginas web se carguen más rápido. Una forma de hacerlo es reducir el tamaño de las imágenes web. Las imágenes comprenden hasta el 60% y el 65% de bytes en la mayoría de las páginas web, y el tamaño de la página es un factor importante en el tiempo de procesamiento total. El tamaño de la página es especialmente importante para dispositivos móviles, en los que las imágenes más pequeñas ahorran ancho de banda y duración de batería.
WebP es un nuevo formato de imagen desarrollado por Google y compatible con Chrome, Opera y Android, que está optimizado para permitir imágenes más rápidas y pequeñas en la Web. Las imágenes WebP son aproximadamente un 30% más pequeñas de tamaño que las imágenes PNG y JPEG con una calidad visual equivalente. Además, el formato de imagen de WebP también tiene paridad de atributos con otros formatos. Es compatible con:
Compresión con pérdida: La compresión con pérdida se basa en la codificación de fotogramas clave VP8. VP8 es un formato de compresión de video creado por On2 Technologies como sucesor de los formatos VP6 y VP7.
Compresión sin pérdida: El equipo de WebP desarrolla el formato de compresión sin pérdida.
Transparencia: el canal alfa de 8 bits es útil para imágenes gráficas. El canal Alfa se puede usar junto con RGB con pérdida, una función que actualmente no está disponible con ningún otro formato.
Animación: Admite imágenes animadas a color verdadero.
Metadatos: Es posible que tengan metadatos EXIF y XMP (por ejemplo, cámaras).
Perfil de color: Puede tener un perfil de ICC incorporado.
Debido a una mejor compresión de imágenes y compatibilidad con todas estas funciones, WebP puede ser un reemplazo excelente para la mayoría de los formatos de imagen: PNG, JPEG o GIF. Mejor aún, ¿sabías que WebP habilita nuevas oportunidades de optimización de imágenes, como la compatibilidad con imágenes con pérdida y con transparencia? Así es. WebP es la navaja suiza de formatos de imagen.
¿Cómo se hace esto? Vamos a levantarnos y mirar más allá.
WebP con pérdida
La compresión con pérdida de WebP usa la misma metodología que VP8 para predecir los fotogramas (video). VP8 se basa en la predicción de bloques y, al igual que cualquier códec basado en bloques, VP8 divide el marco en segmentos más pequeños llamados macrobloques.
Dentro de cada macrobloque, el codificador puede predecir la información redundante de movimientos y colores en función de bloques procesados anteriormente. El marco de imagen es &key; en el sentido de que solo usa los píxeles ya decodificados en el barrio espacial inmediato de cada uno de los macrobloques y trata de completar su parte desconocida. Esto se denomina codificación predictiva (consulta codificación dentro del fotograma del video VP8).
Los datos redundantes se pueden restar del bloque, lo que da como resultado una compresión más eficiente. Solo queda una pequeña diferencia, llamada residual, para transmitir en forma comprimida.
Después de estar sujetos a una transformación matemáticamente invertible (el famoso DCT, que significa transformación de coseno discreto), por lo general, los residuales contienen muchos valores cero, que se pueden comprimir de manera mucho más efectiva. Luego, el resultado se cuantifica y se codifica con entropía. Curiosamente, el paso de cuantización es el único en el que los bits se descartan con pérdida (busca la división por QPj en el siguiente diagrama). Todos los demás pasos son invertibles y no tienen pérdida.
En el siguiente diagrama, se muestran los pasos relacionados con la compresión con pérdida WebP. Las características diferenciadoras en comparación con JPEG tienen un círculo rojo.
WebP usa la cuantización de bloques y distribuye bits de manera adaptable en diferentes segmentos de imágenes: menos bits para segmentos de entropía baja y bits más altos para segmentos de entropía más altos. WebP usa la codificación de entropía aritmética, lo que logra una mejor compresión en comparación con la codificación Huffman que se usa en JPEG.
Modos de predicción dentro de VP8
Los modos dentro de la predicción del VP8 se usan con tres tipos de macrobloques:
- Luma 4 x 4
- 16x16 luma
- croma 8x8
Estos macrobloques comparten cuatro modos comunes dentro de la predicción:
H_PRED (predicción horizontal). Completa cada columna del bloque con una copia de la columna izquierda, L.
V_PRED (predicción vertical). Completa cada fila del bloque con una copia de la fila anterior, A.
DC_PRED (predicción de CC) Rellena el bloque con un solo valor mediante el promedio de los píxeles de la fila superior A y la columna a la izquierda de L.
TM_PRED (predicción de TrueMotion). Un modo que obtiene su nombre de una técnica de compresión desarrollada por On2 Technologies. Además de la fila A y la columna L, TM_PRED usa el píxel P que se encuentra arriba y a la izquierda del bloque. Las diferencias horizontales entre los píxeles en A (a partir de P) se propagan con los píxeles de L para iniciar cada fila.
En el siguiente diagrama, se ilustran los diferentes modos de predicción que se usan en la compresión con pérdida de WebP.
Para los bloques luma de 4 x 4, hay seis modos intra adicionales similares a V_PRED y H_PRED, pero que corresponden a predicciones de píxeles en diferentes direcciones. Puedes encontrar más detalles sobre estos modos en la Guía de VP8 Bitstream.
Cuantización de bloques adaptable
Para mejorar la calidad de una imagen, esta se segmenta en áreas que tienen características que se ven similares. Para cada uno de estos segmentos, los parámetros de compresión (pasos de cuantización, intensidad del filtro, etc.) se ajustan de forma independiente. Esto produce una compresión eficiente mediante la redistribución de los bits en el lugar en que son más útiles. VP8 permite un máximo de cuatro segmentos (una limitación de la transmisión de bits VP8).
Por qué WebP (con pérdida) es mejor que JPEG
La codificación de predicciones es una de las principales razones por las que WebP gana por sobre JPEG. El bloqueo de la cuantificación adaptable también marca una gran diferencia. Filtrar ayuda con tasas de bits promedio/bajas. La codificación aritmética booleana proporciona ganancias de compresión del 5% al 10% en comparación con la codificación Huffman.
WebP sin pérdida
La codificación WebP sin pérdida se basa en la transformación de la imagen mediante varias técnicas diferentes. Luego, se realiza la codificación de entropía en los parámetros de transformación y los datos de imagen transformados. Las transformaciones aplicadas a la imagen incluyen la predicción espacial de los píxeles, la transformación del espacio de color, el uso de paletas emergentes locales, el empaquetado de varios píxeles en un píxel y el reemplazo de alfa. Para la codificación de entropía, usamos una variante de codificación LZ77-Huffman, que utiliza codificación 2D de valores de distancia y valores dispersos compactos.
Transformación Predictor (espacial)
La predicción espacial se usa para reducir la entropía mediante la explotación del hecho de que los píxeles vecinos suelen estar correlacionados. En la transformación de predictor, el valor de píxel actual se predice a partir de los píxeles que ya están decodificados (en orden de línea de análisis), y solo se codifica el valor residual (real - previsto). El modo de predicción determina el tipo de predicción que se usará. La imagen se divide en varias regiones cuadradas y todos los píxeles en un cuadrado usan el mismo modo de predicción.
Existen 13 modos de predicción diferentes. Los píxeles más comunes son los de la izquierda, la parte superior izquierda y los píxeles superior derecho. Las restantes son combinaciones (promedio) de izquierda, superior, superior izquierda y superior derecha.
Transformación color (descorrelación)
El objetivo de la transformación de color es decorar los valores R, G y B de cada píxel. La transformación de color mantiene el valor verde (G) tal como está, transforma el rojo (R) en verde y transforma el azul (B) en verde y, luego, en rojo.
Al igual que con la transformación del predictor, primero, la imagen se divide en bloques y se usa el mismo modo de transformación para todos los píxeles de un bloque. Para cada bloque, hay tres tipos de elementos de transformación de color: green_to_red, green_to_blue y red_to_blue.
Restar transformación verde
La transformación “Restar verde” resta los valores verdes de los valores rojo y azul de cada píxel. Cuando esta transformación está presente, el decodificador debe agregar el valor verde a rojo y azul. Este es un caso especial de la transformación de descorrelación de color general mencionada con la frecuencia suficiente como para justificar un corte.
Transformación Indexación de colores (paletas)
Si no hay muchos valores de píxeles únicos, puede ser más eficiente crear un arreglo de índice de colores y reemplazar los valores de píxeles por los índices del arreglo. La transformación de indexación de colores lo logra. La transformación de indexación de colores comprueba la cantidad de valores ARGB únicos en la imagen. Si ese número está por debajo de un umbral (256), crea un arreglo de esos valores ARGB, que luego se usa para reemplazar los valores de píxeles con el índice correspondiente.
Codificación de caché de color
La compresión WebP sin pérdida usa fragmentos de imágenes ya vistos para reconstruir píxeles nuevos. También puede usar una paleta local si no se encuentra una coincidencia interesante. Esta paleta se actualiza continuamente para reutilizar colores recientes. En la siguiente imagen, puedes ver que la caché de color local en acción se actualiza de forma progresiva con los 32 colores utilizados recientemente a medida que el análisis baja.
Referencia de la versión anterior de LZ77
Las referencias inversas son tuplas de código de longitud y distancia. La longitud indica cuántos píxeles de la línea de análisis se deben copiar. El código de distancia es un número que indica la posición de un píxel visto con anterioridad, desde el cual se copiarán los píxeles. Los valores de longitud y distancia se almacenan mediante la codificación de prefijo LZ77.
La codificación de prefijo LZ77 divide los valores enteros grandes en dos partes: el código de prefijo y los bits adicionales. El código de prefijo se almacena mediante un código de entropía, mientras que los bits adicionales se almacenan como están (sin un código de entropía).
En el siguiente diagrama, se ilustra la LZ77 (variante 2D) con coincidencia de palabras (en lugar de píxeles).
WebP con pérdida con alfa
Además de WebP con pérdida (colores RGB) y WebP sin pérdida (con pérdida de RGB con alfa), hay otro modo WebP que permite la codificación con pérdida para canales RGB y la codificación sin pérdidas. Esta posibilidad (con RGB con pérdida y alfa sin pérdida) no está disponible actualmente con ninguno de los formatos de imagen existentes. En la actualidad, los webmasters que necesitan transparencia deben codificar las imágenes sin pérdida de PNG, lo que genera un aumento considerable del tamaño. WebP Alfa codifica imágenes con pocos bits por píxel y proporciona una forma efectiva de reducir el tamaño de esas imágenes. La compresión sin pérdidas del canal alfa agrega solo un 22% de bytes sobre la codificación WebP con pérdida (calidad 90).
En general, reemplazar PNG transparente con WebP con pérdida + alfa permite ahorrar, en promedio, entre un 60 y 70% del tamaño. Esto se confirmó como una función muy atractiva para los sitios móviles con muchos íconos (por ejemplo, everything.me).
