Imagens WebP e desempenho

Diz-se que uma imagem vale mais que mil palavras, mas on-line, uma imagem pode valer mil kilobytes ou mais! O HTTP Archive mostra que as imagens representam, em média, 64% do tamanho total de uma página da Web. Com isso em mente, a otimização de imagens é fundamental, especialmente quando se considera que até 40% dos usuários abandonarão uma solicitação se ela não for carregada em 3 segundos. O problema com a otimização de imagens surge quando os designers querem manter os tamanhos dos arquivos de imagem pequenos sem sacrificar a qualidade da imagem. As tentativas anteriores de criar novos tipos de arquivos de imagem otimizados, melhores do que os formatos padrão JPEG, PNG e GIF, não tiveram êxito.

Digite WebP

WebP é um tipo de arquivo de imagem que foi criado em 2010 e está sendo desenvolvido atualmente pelo Google. Esse formato de imagem oferece compressão com e sem perdas para imagens na Internet.
Vários grandes nomes estão fazendo campanha para o uso do WebP, principalmente Google, Facebook e Ebay.

Na Aristotle, estamos sempre experimentando técnicas que melhoram o desempenho do site para nossos clientes, por isso realizamos testes A/B para entender o impacto do WebP na qualidade da imagem e a melhor forma de implementá-lo nos projetos de nossos clientes.

Um dos principais motivos pelos quais consideramos usar o WebP é o tamanho menor do arquivo. De acordo com o Google:

• *Os arquivos de imagem sem perdas do WebP são 26% menores do que os PNGs. *
• *Os arquivos de imagens com perdas do WebP são 25 a 34% menores do que as imagens JPEG em um índice SSIM equivalente. *
• O WebP suporta transparência sem perdas (também conhecida como canal alfa) com apenas 22% mais bytes.

Os testes da Aristotle encontraram prós e contras no formato de imagem WebP:

Pros	Cons
* Menor tamanho de arquivo	* Suporte fraco ao navegador
* Algoritmo de compressão diferente	* O artefato tem aparência plástica
* Gradações de cores mais suaves	* Interface de exportação ruim
* Máscara de canal alfa

Qualidade da imagem

O WebP usa um novo algoritmo de compactação, portanto, os artefatos (distorção ou degradação) têm uma aparência diferente dos outros tipos de arquivo. O WebP faz um bom trabalho ao manter as bordas nítidas em uma foto, mas, é claro, perde detalhes e texturas, como seria de se esperar em um arquivo com perdas. Enquanto um arquivo JPEG comparável exibe artefatos tremidos em áreas sólidas, o WebP apresenta gradações suaves até as configurações de qualidade mais baixas. Uma desvantagem disso é que os rostos humanos podem assumir uma aparência plástica ou posterizada em configurações mais baixas.

Há alguns outros aspectos a serem considerados no formato de imagem WebP:

• As configurações de compactação não correspondem “uma a uma” com JPEGs. Não espere que um JPEG com 50% de qualidade corresponda a um WebP com 50% de qualidade. A qualidade cai bastante na escala de qualidade do WebP, portanto, é melhor começar com uma qualidade alta e ir diminuindo.
  

• Outra vantagem que muda o jogo é a capacidade de adicionar uma máscara de canal alfa, da mesma forma que um PNG. No entanto, ao contrário de sua contraparte sem perdas, muitas vezes é possível comprimir uma imagem WebP utilizável para cerca de 1/10 do tamanho de seu equivalente em PNG. Esse é o uso realmente destacado do WebP, que traz um exército de opções e recursos que, de outra forma, paralisariam um site com tamanhos de arquivo pesados. Um exemplo real comprimiu um PNG de 880kb (24 bits com canal alfa) para 41kb – uma economia de 95% no arquivo. Embora essa não seja a norma, ela ilustra as possibilidades… -#13;
  

• Para reduzir ainda mais o tamanho do arquivo, recomendamos omitir os metadados desmarcando “Save Metadata” (Salvar metadados) na caixa de diálogo. Para economizar ainda mais na compactação, selecione “lossy alpha channel” (canal alfa com perdas). As configurações de qualidade do canal alfa refletem as da imagem. Por exemplo, uma imagem com 50% de qualidade terá um canal alfa com perdas de 50% de qualidade. Em nossos testes, esperávamos artefatos ao redor da borda mascarada, mas também houve alterações perceptíveis na compactação de toda a imagem. Certamente consideramos essa uma opção para reduzir ainda mais o tamanho dos arquivos, mas recomendamos monitorar de perto a qualidade da imagem ao fazer isso. Observe também se há faixas indesejáveis nos canais alfa com desvanecimentos graduais.
  
  

Ficamos entusiasmados ao ver que o um plug-in do Photoshop estava disponível para o formato WebP. Isso permite uma maneira fácil de ajustar as configurações de qualidade das imagens WebP. A interface do plug-in deixa a desejar, pois não foi totalmente adotada pelo Adobe Photoshop. No momento, o senhor não pode visualizar uma imagem para avaliar as configurações de qualidade, o que é uma grande desvantagem. Como solução alternativa, o senhor pode usar o navegador Google Chrome para fazer uma comparação rápida entre os arquivos. Também é um pouco difícil acessar a caixa de diálogo de salvamento. Para economizar tempo, recomendamos que o senhor configure um atalho de teclado para evitar visitas repetidas ao menu suspenso “Save as”. Apesar dessas ressalvas, ainda vale a pena o trabalho.

Com uma economia significativa no tamanho do arquivo, boa qualidade e um canal alfa revolucionário, o WebP parece ser um verdadeiro concorrente entre outros formatos de imagem. Embora os resultados dos testes tenham sido otimistas, é estranho que não tenha havido um vencedor claro entre os formatos. O WebP geralmente se saiu muito bem em relação aos outros formatos, mas os JPEGs ou PNGs de 8 bits ocasionalmente ainda superam o WebP em tamanho e/ou qualidade. Não deixe de fazer muitos testes antes de implementar o WebP, pois ele pode não ser ideal para suas necessidades.

Implementação

Depois que os designers da Aristotle determinaram que o WebP seria uma ferramenta eficiente a ser usada em seu processo, recorremos aos nossos desenvolvedores para testar a implementação. O WebP só é suportado nativamente no Chrome, Opera, Opera Mini, Android Browser e Chrome para Android. O Firefox, o IE e o Safari não têm suporte nativo, embora o Firefox tenha um histórico com o WebP. Felizmente, há algumas soluções alternativas para a falta de suporte dos navegadores.

Em nossa pesquisa, encontramos três opções viáveis para implementar imagens WebP. Queríamos ter certeza de que usaríamos a melhor opção em termos de tamanho de página, tendo em mente que o Índice de Velocidade é uma métrica importante e levando em conta os polyfills de Javascript necessários. Um polyfill é um código Javascript implementado para fornecer uma tecnologia que não é fornecida nativamente em um navegador.

Executamos quatro experimentos para considerar a direção a seguir.

1. O primeiro teste usou um JPEG normal como controle, e os outros três testes implementaram as opções listadas abaixo. Usamos uma imagem JPEG e uma imagem WebP de qualidade semelhante (JPEG de 269 kb e WebP de 52 kb). Aqui o senhor pode ver os resultados de todos os quatro testes.
   

2. No teste dois, incluímos um arquivo de 67kb WebP polyfill fornecido por Dominik Homberger. Ele permite a implementação do WebP em todos os principais navegadores, até mesmo no IE 6 e superior. Esse é um polyfill útil porque não exige que o usuário altere a sintaxe do no código existente, basta alterar .jpeg ou .png para .webp e o polyfill fará o trabalho para o senhor.
   

3. Nossa próxima abordagem foi usar o o Picturefill polyfill para permitir o uso de , mesmo que o não seja suportado nativamente. Isso permite que os desenvolvedores usempara usar o WebP se o navegador for compatível com o formato de imagem e fazer um fallback para JPEG, PNG ou outro tipo de imagem se o WebP não for compatível. (Há outros poderes incríveis que o possui, mas isso não é relevante para este artigo).

4. O quarto teste usou o código no .htaccess do servidor para implementar o WebP. Essa opção foi fornecida por Vincent Orback. Usando essa abordagem, o código .htaccess procurará uma versão WebP de cada imagem em uma página. Se o navegador for compatível com WebP e houver uma imagem WebP disponível, ele usará a imagem WebP em vez de JPEG ou PNG. Isso é útil e economiza bastante tempo, pois o senhor não precisa alterar a sintaxe do no código ou a extensão de suas imagens para .webp.

Após analisar os dados, determinamos que o WebP polyfill (Teste 2) foi a menor implementação que funcionou em todos os navegadores, mas não ficamos impressionados com a métrica do Índice de velocidade desse método.

• O uso do WebP polyfill pareceu carregar visualmente pior do que o teste de controle JPEG e as outras implementações, exceto no iOS.
  

• Também observamos que, nos dispositivos iOS, o tamanho dos arquivos era 100 kb maior do que nos outros dispositivos. Parece que no iOS 5.1, IE 8 e IE 9 a imagem WebP é baixada três vezes. Embora as duas solicitações extras não sejam ideais, isso ainda é menor do que o equivalente em JPEG. Não testamos isso em versões atualizadas do iOS, portanto, há uma chance de que isso seja resolvido no iOS 6 e posterior. Estamos inclinados a usar essa implementação inicialmente devido ao melhor suporte do navegador.

Olhando para o futuro

Embora o WebP polyfill seja um ótimo patch por enquanto, sabemos que essa implementação não será a melhor no futuro se outros navegadores começarem a oferecer suporte ao WebP. Nossa esperança é que o Safari, o Firefox e o IE (especialmente o Spartan Browser que virá no Windows 10) adotem o formato de imagem WebP em breve. Quando começarmos a ver uma adoção maior, implementaremos o método usado no Teste 3, usando o para servir imagens WebP para navegadores compatíveis e servir um arquivo JPEG ou PNG quando o WebP não for compatível. Planejamos implementar esse método quando o Firefox começar a oferecer suporte, pois a maioria dos visitantes dos sites de nossos clientes usa o Chrome e o Firefox.

O WebP não vai tirar o JPEG ou o PNG de cena, mas é uma excelente ferramenta para adicionar ao seu arsenal. Prepare-se para dar as boas-vindas ao WebP e prepare-se para fazer alguns de seus próprios testes e comparações a cada novo projeto!