No Google, estamos constantemente procurando maneiras de fazer com que as páginas da Web carreguem mais rápido. Uma maneira de fazer isso é diminuir o tamanho das imagens da Web. As imagens compreendem de 60% a 65% dos bytes na maioria das páginas da Web, e o tamanho da página é um fator importante no tempo total de renderização. O tamanho da página é bastante importante para dispositivos móveis, em que imagens menores economizam largura de banda e duração da bateria.
WebP é um novo formato de imagem desenvolvido pelo Google e compatível com o Chrome, o Opera e o Android, otimizado para permitir imagens mais rápidas e menores na Web. As imagens WebP são cerca de 30% menores em tamanho em comparação com imagens PNG e JPEG com qualidade visual equivalente. Além disso, o formato de imagem WebP também tem paridade de recursos com outros formatos. Ela aceita estas opções:
Compressão com perda:é baseada na codificação de frames-chave VP8. VP8 é um formato de compactação de vídeo criado pela On2 Technologies como sucessor dos formatos VP6 e VP7.
Compressão sem perda: o formato de compactação sem perda é desenvolvido pela equipe do WebP.
Transparência:o canal alfa de 8 bits é útil para imagens gráficas. O Canal Alfa pode ser usado com o RGB com perda, um recurso que atualmente não está disponível com nenhum outro formato.
Animação:oferece suporte a imagens animadas em cores verdadeiras.
Metadados:pode ter metadados EXIF e XMP (usados por câmeras, por exemplo).
Perfil de cores:pode ter um perfil ICC incorporado.
Devido à melhor compactação de imagens e ao suporte para todos esses recursos, o WebP pode ser um excelente substituto para a maioria dos formatos de imagem: PNG, JPEG ou GIF. Melhor ainda, você sabia que o WebP permite novas oportunidades de otimização de imagens, como suporte a imagens com perda de transparência? Sim. WebP é o canivete suíço dos formatos de imagem.
Então, como essa mágica acontece? Vamos arregaçar as mangas e dar uma olhada nos bastidores.
WebP com perda
A compactação com perda do WebP usa a mesma metodologia do VP8 para prever frames de vídeos. O VP8 é baseado na previsão de bloco e, como qualquer codec baseado em bloco, o VP8 divide o frame em segmentos menores, chamados de macroblocos.
Dentro de cada macrobloco, o codificador pode prever informações redundantes de movimento e cor com base em blocos processados anteriormente. O frame da imagem é "chave" no sentido de que usa apenas os pixels já decodificados no bairro espacial imediato de cada um dos macroblocos e tenta preencher a parte desconhecida. Isso é chamado de codificação preditiva. Consulte codificação intraframe do vídeo VP8.
Os dados redundantes podem ser subtraídos do bloco, o que resulta em uma compactação mais eficiente. Só resta uma pequena diferença, chamada residual, para transmitir em forma compactada.
Depois de serem sujeitos a uma transformação matematicamente invertível (a famosa DCT, que significa transformação discreta de cosseno), os resíduos normalmente contêm muitos valores zero, que podem ser compactados com muito mais eficiência. O resultado é então quantizado e codificado de entropia. Curiosamente, a etapa de quantização é a única em que os bits são descartados com perda. Procure a divisão por QPj no diagrama abaixo. Todas as outras etapas são invertíveis e sem perdas.
O diagrama a seguir mostra as etapas envolvidas na compactação com perda do WebP. Os atributos diferenciais do JPEG estão circulados em vermelho.
O WebP usa a quantização de blocos e distribui bits de forma adaptável em diferentes segmentos de imagem: menos bits para segmentos de baixa entropia e bits mais altos para segmentos de entropia mais alta. O WebP usa a codificação de entropia aritmética, alcançando uma compressão melhor em comparação com a codificação Huffman usada em JPEG.
Modos de previsão interna do VP8
Os modos de previsão intra-VP8 são usados com três tipos de macroblocos:
- Luma 4x4
- Lâmpa de 16 x 16
- Chroma de 8 x 8
Quatro modos comuns de previsão interna são compartilhados por esses macroblocos:
H_PRED (previsão horizontal). Preenche cada coluna do bloco com uma cópia da coluna esquerda, L.
V_PRED (previsão vertical). Preenche cada linha do bloco com uma cópia da linha acima, A.
DC_PRED (previsão de DC). Preenche o bloco com um único valor usando a média dos pixels na linha acima de A e a coluna à esquerda de L.
TM_PRED (previsão do TrueMotion). Um modo que recebe esse nome de uma técnica de compactação desenvolvida pela On2 Technologies. Além da linha A e da coluna L, TM_PRED usa o pixel P acima e à esquerda do bloco. As diferenças horizontais entre os pixels em A (a partir de P) são propagadas usando os pixels de L para iniciar cada linha.
O diagrama abaixo ilustra os diferentes modos de previsão usados na compactação com perdas do WebP.
Para blocos de luma 4x4, há seis outros modos internos semelhantes a V_PRED e H_PRED, mas que correspondem à previsão de pixels em direções diferentes. Mais detalhes sobre esses modos podem ser encontrados no Guia do VP8 Bitstream.
Quantização de bloco adaptativo
Para melhorar a qualidade de uma imagem, ela é segmentada em áreas que têm recursos visivelmente semelhantes. Para cada um desses segmentos, os parâmetros de compactação (etapas de quantização, intensidade de filtragem etc.) são ajustados de maneira independente. Isso produz uma compressão eficiente redistribuindo bits para onde eles são mais úteis. O VP8 permite no máximo quatro segmentos, uma limitação do bitstream do VP8.
Por que o WebP (com perda) é melhor que o JPEG
A programação de previsão é uma das principais razões pelas quais o WebP vence o JPEG. Bloquear a quantização adaptativa também faz uma grande diferença. A filtragem ajuda em taxas de bits médias/baixas. A codificação aritmética booleana fornece ganhos de compressão de 5% a 10% em comparação com a codificação Huffman.
WebP sem perda
A codificação do WebP sem perda é baseada na transformação da imagem usando várias técnicas diferentes. Em seguida, a codificação de entropia é executada nos parâmetros de transformação e nos dados da imagem transformada. As transformações aplicadas à imagem incluem previsão espacial de pixels, transformação de espaço de cor, uso de paletas emergentes localmente, empacotamento de vários pixels em um pixel e substituição alfa. Para a codificação de entropia, usamos uma variante da codificação LZ77-Huffman, que usa codificação 2D de valores de distância e valores esparsos compactos.
Transformação Predictor (espacial)
A previsão espacial é usada para reduzir a entropia, explorando o fato de que os pixels vizinhos são frequentemente correlacionados. Na transformação do preditor, o valor do pixel atual é previsto a partir dos pixels que já foram decodificados (em ordem de linha de verificação), e apenas o valor residual (real - previsto) é codificado. O modo de previsão determina o tipo de previsão a ser usado. A imagem é dividida em várias regiões quadradas e todos os pixels em um quadrado usam o mesmo modo de previsão.
Há 13 modos de previsão possíveis. Os mais comuns são pixels esquerdo, superior, superior esquerdo e superior direito. As restantes são combinações (médias) de esquerda, cima, canto superior esquerdo e canto superior direito.
Transformação de cor (descorrelação)
O objetivo da transformação de cor é decorar os valores R, G e B de cada pixel. A transformação de cor mantém o valor de verde (G) como está, transforma o vermelho (R) com base no verde e transforma o azul (B) com base no verde e depois com base no vermelho.
Como acontece com a transformação do preditor, primeiro a imagem é dividida em blocos, e o mesmo modo de transformação é usado para todos os pixels em um bloco. Para cada bloco, há três tipos de elementos de transformação de cor: verde_para_vermelho, verde_para_azul e vermelho_para_azul.
Subtrair transformação verde
A "transformação subtrair verde" subtrai os valores verdes dos valores vermelho e azul de cada pixel. Quando essa transformação está presente, o decodificador precisa adicionar o valor de verde em vermelho e azul. Esse é um caso especial da transformação geral de decoração de cores acima, frequente o suficiente para justificar um corte.
Transformação de indexação de cores (palettes)
Se não houver muitos valores de pixels exclusivos, pode ser mais eficiente criar uma matriz de índice de cores e substituir os valores de pixel pelos índices da matriz. A transformação de indexação de cores consegue isso. A transformação de indexação de cores verifica o número de valores ARGB exclusivos na imagem. Se esse número estiver abaixo de um limite (256), ele criará uma matriz desses valores ARGB, que será usada para substituir os valores de pixel pelo índice correspondente.
Codificação de cache de cores
A compactação do WebP sem perda usa fragmentos de imagem já vistos para reconstruir novos pixels. Ele também pode usar uma paleta local se nenhuma correspondência interessante for encontrada. Essa paleta é atualizada continuamente para reutilizar cores recentes. Na imagem abaixo, você pode ver o cache de cores local em ação sendo atualizado progressivamente com as 32 cores usadas recentemente à medida que a verificação diminui.
Referência LZ77 para versões anteriores
Referências retroativas são tuplas de código de comprimento e distância. O comprimento indica quantos pixels na ordem da linha de verificação precisam ser copiados. O código de distância é um número que indica a posição de um pixel visto anteriormente, de onde os pixels vão ser copiados. Os valores de comprimento e distância são armazenados usando a codificação de prefixo LZ77.
A codificação de prefixo LZ77 divide valores inteiros grandes em duas partes: o código de prefixo e os bits extras. O código de prefixo é armazenado usando um código de entropia, enquanto os bits extras são armazenados como estão (sem um código de entropia).
O diagrama abaixo ilustra o LZ77 (variante 2D) com correspondência de palavras (em vez de pixels).
WebP com perda com Alfa
Além do WebP com perda (cores RGB) e do WebP sem perda (RGB sem perda com alfa), há outro modo WebP que permite codificação com perda para canais RGB e codificação sem perdas para o Canal Alfa. Essa possibilidade (RGB com perda e Alfa sem perdas) não está disponível no momento com nenhum dos formatos de imagem. Atualmente, os webmasters que precisam de transparência precisam codificar imagens sem perdas em PNG, o que leva a um excesso de tamanho significativa. O WebP alpha codifica imagens com bits baixos por pixel e fornece uma maneira eficaz de reduzir o tamanho dessas imagens. A compactação sem perdas do Canal Alfa adiciona apenas 22% de bytes em vez da codificação WebP com perda (qualidade 90).
Em geral, a substituição do PNG transparente por WebP com perda + alfa oferece, em média, de 60 a 70% de economia de tamanho. Isso tem se mostrado como um ótimo recurso atrativo para sites móveis com muitos ícones (por exemplo, everything.me).
