Como adicionar imagens WebP no Blogspot ou páginas AMP

Neste artigo, aprenderemos como adicionar imagens WebP em seu Blogspot que são muito úteis em blogs AMP. O AMP tem um recurso de fallback que precisa incluir WebP e outros formatos de imagem tradicionais.

A estrutura AMP retornará automaticamente ao formato de imagem tradicional se o navegador não for compatível com o formato WebP.

WebP é um formato de imagem com compressão com e sem perdas. Foi introduzido pela On2 Technologies, que mais tarde foi adquirida pelo Google. É também um projeto irmão do formato de contêiner multimídia Web M.

De acordo com o Google [Fonte: Novo formato de imagem para a Web]

Imagens sem perdas WebP são 26% menores que PNG. As imagens WebP com perdas são 25-34% menores do que as imagens JPEG comparáveis no índice de qualidade SSIM equivalente.

WebP no Blogspot

Embora o Blogger não suporte oficialmente o upload de formatos de imagem WebP, posso forçar o Google a interpretar imagens como WebP com uma pequena alteração no URL atual.

URL atual

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijlEGogwd1_DY9w4TlYBc-lGuiMP-fg6RI00NpO21EV5ZgtVWB-ecwoP_x1RQvi-pKgeQrt6yuYvbDLYflPQmC7-KoWDVPOtguHorYY0hb3A7BwYm1RXXMX3a5IoJO2PkjQ6wBZ7I4O1c/d/blank-blogger-template.png

URL da WebP

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijlEGogwd1_DY9w4TlYBc-lGuiMP-fg6RI00NpO21EV5ZgtVWB-ecwoP_x1RQvi-pKgeQrt6yuYvbDLYflPQmC7-KoWDVPOtguHorYY0hb3A7BwYm1RXXMX3a5IoJO2PkjQ6wBZ7I4O1c/d-rw/blank-blogger-template.png

Basta adicionar -rw após d ou s600 ou tag semelhante acima.
A estrutura completa da imagem WebP com fallback ficará assim:

<amp-img alt="bloginoobs" height="368" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijlEGogwd1_DY9w4TlYBc-lGuiMP-fg6RI00NpO21EV5ZgtVWB-ecwoP_x1RQvi-pKgeQrt6yuYvbDLYflPQmC7-KoWDVPOtguHorYY0hb3A7BwYm1RXXMX3a5IoJO2PkjQ6wBZ7I4O1c/d-rw/blank-blogger-template.png" width="550">
  <amp-img alt="bloginoobs" fallback="" height="368" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijlEGogwd1_DY9w4TlYBc-lGuiMP-fg6RI00NpO21EV5ZgtVWB-ecwoP_x1RQvi-pKgeQrt6yuYvbDLYflPQmC7-KoWDVPOtguHorYY0hb3A7BwYm1RXXMX3a5IoJO2PkjQ6wBZ7I4O1c/d/blank-blogger-template.png" width="550">
  </amp-img><span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></amp-img>

Altere o URL e cole-o em sua postagem.

Existem ferramentas oficiais que podem ser usadas para converter os formatos PNG, JPG para WebP.

Vale a pena adicionar WebP no Blogspot

Em termos de suporte, o WebP não é suportado por navegadores mais antigos, mas os mais modernos suportam o formato WebP. Quando considero o caso do blogueiro, não consigo fazer upload de imagens WebP diretamente e indiretamente converto imagens para o formato WebP.

SUPORTE COM PERDA DE WEBP

Google Chrome (computador) 17+
Google Chrome para Android versão 25+
Microsoft Edge 18+
Firefox 65+
Ópera 11.10+
Navegador nativo, Android 4.0+ (ICS)

Uma imagem WebP pode ficar maior que a imagem de origem?

Sim, geralmente ao converter de formato com perdas para WebP sem perdas ou vice-versa. Isso se deve principalmente à diferença no espaço de cores (YUV420 vs ARGB) e à conversão entre os dois.

Basta testar com seus links com PNG/JPG e WebP e comparar os tamanhos ao interpretar imagens com essa técnica. No meu caso, o formato WebP para o exemplo acima é 12Kb maior que o formato WebP.

Pode ser porque comprimi minha imagem ou estou usando uma imagem menos colorida. Eu recomendaria usar o WebP para quem já tem seus posts carregados com imagens grandes ou de alta qualidade.

Conclusão

Espero que este artigo sobre Como adicionar WebP no Blogspot ou nas páginas AMP tenha ajudado você a entender mais sobre o WebP. Se você sentir que algo está faltando no meu artigo, por favor me avise.

Você pode comentar livremente suas dúvidas e perguntas abaixo. Se você gostou deste artigo, compartilhe com seus amigos. Obrigado!