Imagens WebP e a relação com o Mobile First

WebP (pronuncia-se Weppy) é um novo formato de imagem desenvolvido pelos engenheiros da Google.

O formato reduz o tamanho do arquivo consideravelmente e mantém a qualidade das imagens.

O formato de imagem WebP tem uma relação direta com o Mobile First, uma vez que seu foco é contribuir para o carregamento mais rápido das páginas.

Quem se beneficia com um novo formato de imagem?

Os mais beneficiados de um formato de imagem que carrega mais rapidamente são os usuários.

No Brasil, temos uma realidade de internet lenta através da navegação com os dispositivos móveis. Logo, toda contribuição para o carregamento rápido é super válido.

O carregamento mais rápido das páginas melhora a experiência do usuário, que por conseguinte consome mais conteúdo e interage mais com sua marca.

Dessa forma, entendemos que trabalhamos um benefício para os profissionais de marketing.

Uma melhor performance contribui para conquistar melhores posições no Google, reduzir o bounce rate das páginas e aumentar o quality score em sua conta em rede de Ads.

Com o formato ainda conseguimos beneficiar dois outros times: o de infraestrutura e financeiro.

Através desse formato, que tem um menor tamanho de arquivo, conseguimos reduzir o consumo de tráfego de dados.

E sabemos que a redução de banda impacta diretamente no financeiro, é redução de custo.

O que você sabe sobre o formato de imagem WebP?

Tweet

Uma visão sobre o formato de imagem WebP e os demais

Em projetos digitais é comum fazermos uso de três formatos de imagens:

1. JPEG;
2. PNG;
3. GIF / GIF Animado.

O formato JPEG é muito utilizado para fotografias.

PNG para vetores e transparência.

GIF, em sua maioria, no formato animado.

O formato WebP consegue agregar o melhor dos três formatos mais utilizados.

Isto é, consegue garantir uma animação, transparência e qualidade das imagens.

Sobre o suporte dos navegadores de internet

Embora o formato de imagem WebP não seja suportado por todos os navegadores de internet, é preciso pensar diferente esse suporte.

Entregue o formato WebP para quem o suporta, e o formato original (JPG, GIF, PNG) para quem não consegui renderizar.

Além disso, a medida que os navegadores forem adicionando suporte, seu site já estará atualizado.

Podemos separar os browsers em três grupos. São eles:

1. Os que suportam o WebP com perda;
2. Os que suportam sem perdas e a camada alfa;
3. E os que suportam com animação.

Os que suportam o WebP com perda

• Google Chrome (desktop) 17+
• Google Chrome for Android version 25+
• Microsoft Edge 18+
• Firefox 65+
• Opera 11.10+
• Native web browser, Android 4.0+ (ICS)

Os que suportam sem perdas e a camada alfa

• Google Chrome (desktop) 23+
• Google Chrome for Android version 25+
• Microsoft Edge 18+
• Firefox 65+
• Opera 12.10+
• Native web browser, Android 4.2+ (JB-MR1)
• Pale Moon 26+

E os que suportam com animação

• Google Chrome (desktop and Android) 32+
• Microsoft Edge 18+
• Firefox 65+
• Opera 19+

Como converter suas imagens para WebP

O melhor caminho é realizar um processo automatizado.

Caso contrário será preciso novos esforços com a base legada de imagens, e rever processos daqui em diante.

No WP Host, o produto de hospedagem para WordPress da Apiki, realizamos isso automaticamente para nossos clientes.

Além disso, ainda servimos as imagens através do GoCache, nosso parceiro de CDN.

Temos diversas opções de conversores de imagens para o referido formato. Tanto para Linux, Windows e Mac.

Também há opções para abrir e salvar o formato no Photoshop, ou fazer uso de ferramentas de conversão on-line.

Conheça as ferramentas, plugins e conversores para o formato de imagem WebP

Tweet

Conclusão

O Google realiza predominantemente uma indexação mobile first.

Muitos sites tiveram significativas perdas em suas pontuações de performance através dos serviços PageSpeed Insights e Lighthouse.

Imagens, e conteúdo multimídia, são um dos vilões que prejudicam a performance do seu projeto.

O formato de imagem WebP será seu grande aliado para avançar em performance no mobile.

E por conseguinte ajudará também no desktop.

Você já tem utilizado o WebP em seus projetos?