As imagens do site estão atraindo muita discussão, e com uma boa razão: De acordo com o ARQUIVO HTTP, 61% do peso de uma página de um site em um computador desktop são imagens, e essa porcentagem sobe para 65% em dispositivos móveis. E para completar, o número de bytes de imagem cresceu mais de 30% na página média da web ano após ano, à medida que as imagens se tornam cada vez maiores.
Não houve muito progresso no suporte a formatos de imagem desde que os formatos padrão JPEG, GIF e PNG foram trazidos ao mercado há mais de 15 anos. A razão é simples: suportar novos formatos de imagem em diferentes tipos de navegador é difícil. No entanto, dois novos formatos de imagem entraram em cena nos últimos anos e recentemente começaram a ganhar tração como forma de otimizar imagens: WebP (lançado pelo Google) e JPEG XR (apoiado pela Microsoft).
WebP vs JPEG XR
Ambos se baseiam em avanços tecnológicos significativos dos últimos 15 anos e cada um tem seus pontos fortes únicos. Cada formato suporta compressão sem perdas e compressão e transparência total, e o JPEG XR suporta renderização progressiva de imagens. Sites que utilizam esses novos formatos estão vendo resultados significativos, muitas vezes economizando de 25% a 50% dos bytes quando comparados com um JPEG de qualidade semelhante.
A maior desvantagem para ambos — e a adoção recente principal é um pouco lenta — é o suporte ao navegador: o WebP, por exemplo, só é suportado no Chrome, Opera e alguns dispositivos Android mais recentes. JPEG XR é totalmente suportado no IE 10+, com suporte limitado no IE 9. Nem tem suporte para Firefox e Safari. Para muitos usuários que não utilizam esses navegadores, as imagens de um site parecem quebradas.
Facebook suporta WebP
O único grande teste público desses novos formatos veio com a implementação do WebP pelo Facebook na primavera passada. O Facebook foi capaz de entregar imagens aos usuários com navegadores suportados pelo WebP, mas surgiram problemas quando os usuários tentaram acionar as fotos salvando, editando ou recompartilhamentondo-as. Um usuário frustrado perguntou “Como desabilito esse monstro?”
Dicas para implementação do formato de imagem
Os sites podem se beneficiar significativamente dessas novas tecnologias de otimização de imagem, mas precisam manter algumas coisas no fundo de suas mentes quando vão nessa direção:
- Entenda como as pessoas vão usar as imagens do site. No caso do Facebook, o usuário claramente não foi levado em consideração porque baixar, salvar, editar e compartilhar fotos são atividades realizadas por uma porcentagem significativa do público do Facebook.
- A normalização da qualidade importa. As diferenças nas configurações de qualidade precisam ser consideradas ao usar vários formatos de perda. A escolha de configurações de qualidade que produzem degradação de qualidade percebida semelhante pode ser realizada usando um algoritmo como SSIM (similaridade estrutural).
- Use WebP e JPEG XR apenas em casos em que houver suporte ao navegador. Sem crossover no suporte ao navegador, pode fazer sentido para sites que procuram se mover nessa direção para suportar tanto para cobertura máxima.
Há muitas vantagens em usar esses novos formatos de otimização de imagem, e quando os pontos acima forem levados em consideração, os sites verão um desempenho significativamente melhorado e economias de byte. Mais suporte ao navegador – notadamente do Firefox e safari – vai adoçar ainda mais a panela.
