En Google, buscamos constantemente maneras 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 representan hasta del 60% al 65% de los 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 total de renderización. El tamaño de la página es especialmente importante para los 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, compatible con Chrome, Opera y Android. Se optimizó para permitir imágenes más rápidas y pequeñas en la Web. El tamaño de las imágenes WebP es aproximadamente un 30% más pequeño en comparación con las imágenes PNG y JPEG con una calidad visual equivalente. Además, el formato de imagen WebP tiene paridad de funciones 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 que On2 Technologies creó 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érdidas.

• 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 por el momento no está disponible con ningún otro formato.

• Animación: Admite imágenes animadas en color verdadero.

• Metadatos:Puede tener metadatos EXIF y XMP (por ejemplo, que usan las cámaras).

• Perfil de color: Es posible que tenga un perfil de ICC incorporado.

Debido a una mejor compresión de imágenes y la compatibilidad con todas estas funciones, WebP puede ser un excelente reemplazo para la mayoría de los formatos de imagen: PNG, JPEG o GIF. Mejor aún, ¿sabías que WebP permite nuevas oportunidades de optimización de imágenes, como el soporte para imágenes con pérdidas con transparencia? Así es. WebP es la navaja suiza de formatos de imagen.

Entonces, ¿cómo se logra esta magia? Es momento de ponernos las mangas y echar un vistazo.

WebP con pérdida

La compresión con pérdida de WebP usa la misma metodología que VP8 para predecir fotogramas (de 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 información redundante de movimientos y colores en función de los bloques procesados con anterioridad. El marco de imagen es "clave" en el sentido de que solo usa los píxeles ya decodificados en la zona espacial inmediata de cada uno de los macrobloques y trata de llenar la parte desconocida de ellos. 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 nos queda una pequeña diferencia, llamada residual, para transmitir de forma comprimida.

Después de estar sujetos a una transformación matemáticamente invertible (la famosa DCT, que significa transformación de coseno discreto), los residuales generalmente contienen muchos valores cero, que se pueden comprimir de manera mucho más eficaz. El resultado se cuantiza y se codifica en la entropía. De manera curiosa, 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 sin pérdida.

En el siguiente diagrama, se muestran los pasos necesarios para la compresión con pérdida de WebP. Las características diferenciadoras en comparación con JPEG están rodeadas de rojo.

WebP usa la cuantización de bloques y distribuye bits de forma adaptable en diferentes segmentos de imágenes: menos bits para segmentos de baja entropía y bits más altos para segmentos de entropía más alta. WebP usa la codificación de entropía aritmética, que mejora una compresión en comparación con la codificación Huffman que se usa en JPEG.

Modos de predicción intrapredicción de VP8

Los modos dentro de la predicción de VP8 se usan con tres tipos de macrobloques:

• Luma 4x4
• Luma de 16 × 16
• Croma de 8x8

Estos macrobloques comparten cuatro modos comunes dentro de la predicción:

• H_PRED (predicción horizontal). Rellena cada columna del bloque con una copia de la columna izquierda, L.

• V_PRED (predicción vertical). Rellena cada fila del bloque con una copia de la fila anterior, A.

• DC_PRED (predicción de DC). Rellena el bloque con un solo valor mediante el uso del promedio de los píxeles en la fila superior a A y la columna a la izquierda de L.

• TM_PRED (predicción de TrueMotion). Es un modo que recibe su nombre de una técnica de compresión desarrollada por On2 Technologies. Además de las filas A y L, TM_PRED usa el píxel P arriba y a la izquierda del bloque. Las diferencias horizontales entre los píxeles de A (a partir de P) se propagan con los píxeles de L para comenzar 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 de luma de 4x4, hay seis modos intra adicionales similares a V_PRED y H_PRED, pero que corresponden a la predicción de píxeles en diferentes direcciones. Puedes encontrar más detalles sobre estos modos en la Guía de transmisión de bits de VP8.

Cuantización de bloques adaptable

Para mejorar la calidad de una imagen, esta se segmenta en áreas que tienen características visiblemente similares. Para cada uno de estos segmentos, los parámetros de compresión (pasos de cuantización, intensidad del filtrado, etc.) se ajustan de forma independiente. Esto permite una compresión eficiente mediante la redistribución de los bits donde son más útiles. VP8 permite un máximo de cuatro segmentos (una limitación del flujo de bits de 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 sobre JPEG. La cuantización por bloques adaptables también hace una gran diferencia. El filtrado ayuda con tasas de bits medias y 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érdidas se basa en la transformación de la imagen con varias técnicas diferentes. Luego, se realiza la codificación de entropía en los parámetros de transformación y en los datos de imágenes transformados. Las transformaciones aplicadas a la imagen incluyen la predicción espacial de píxeles, la transformación del espacio de color, el uso de paletas emergentes a nivel local, el empaquetado de varios píxeles en un píxel y el reemplazo alfa. Para la codificación de entropía, usamos una variante de la codificación LZ77-Huffman, que utiliza codificación 2D de valores de distancia y valores dispersos compactos.

Transformación de predictor (espacial)

La predicción espacial se usa para reducir la entropía, ya que se aprovecha el hecho de que los píxeles cercanos a menudo están correlacionados. En la transformación de predictor, se predice el valor de píxel actual a partir de los píxeles que ya están decodificados (en el orden de la 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 de un cuadrado usan el mismo modo de predicción.

Existen 13 modos de predicción posibles diferentes. Los predominantes son los píxeles izquierdo, superior, superior izquierdo y superior derecho. Las restantes son combinaciones (promedios) de izquierda, superior, superior izquierda y superior derecha.

Transformación de color (descorrelación)

El objetivo de la transformación de color es decorrelacionar 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 función del verde y, luego, transforma el azul (B) sobre el verde y, luego, el rojo.

Como en el caso de la transformación de 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 verde

La “transformación 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 al rojo y al azul. Este es un caso especial de la transformación general de descorrelación del color mencionada anteriormente, lo suficientemente frecuente como para garantizar un corte.

Transformación de indexación de colores (paletas)

Si no hay muchos valores de píxeles únicos, puede ser más eficiente crear un array de índice de color y reemplazar los valores de píxeles por los índices del array. Esto se logra mediante la transformación de indexación de colores. La transformación de indexación de colores verifica la cantidad de valores ARGB únicos en la imagen. Si ese número está por debajo de un umbral (256), crea un array de esos valores ARGB, que luego se usa para reemplazar los valores de píxeles con el índice correspondiente.

Codificación de la caché de colores

La compresión de WebP sin pérdida utiliza 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 colores local se actualiza de forma progresiva con los 32 colores usados recientemente a medida que el análisis disminuye.

Referencia anterior de LZ77

Las referencias hacia atrás son tuplas de longitud y código de distancia. La longitud indica cuántos píxeles en orden de línea de análisis se copiarán. El código de distancia es un número que indica la posición de un píxel visto previamente, desde el cual se copiarán los píxeles. Los valores de longitud y distancia se almacenan mediante la codificación con el prefijo LZ77.

La codificación con 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 con un código de entropía, mientras que los bits adicionales se almacenan tal como están (sin un código de entropía).

En el siguiente diagrama, se ilustra el LZ77 (variante 2D) con concordancia de palabras (en lugar de píxeles).

WebP con pérdida con alfa

Además de WebP (colores RGB) con pérdida y WebP sin pérdida (RGB sin pérdida con alfa), hay otro modo WebP que permite la codificación con pérdidas para canales RGB y la codificación sin pérdidas para el canal alfa. Esa posibilidad (RGB con pérdida y alfa sin pérdidas) no está disponible actualmente con ninguno de los formatos de imagen existentes. Hoy en día, los webmasters que necesitan transparencia deben codificar imágenes sin pérdida en PNG, lo que genera un tamaño excesivo. WebP alfa codifica imágenes con pocos bits por píxel y proporciona una manera eficaz de reducir el tamaño de esas imágenes. La compresión sin pérdida del canal alfa agrega solo 22% de bytes a la codificación WebP con pérdida (calidad 90).

En general, reemplazar el PNG transparente por WebP con pérdida + alfa proporciona una reducción de tamaño del 60-70% en promedio. Esto está confirmado como una gran función de atracción para los sitios móviles con íconos. (por ejemplo, everything.me).