Imagens Webp- como esse formato pode reduzir o peso de suas imagens e acelerar o carregamento de seu blog

Quem edita um blog frequentemente precisa lidar com edição de imagens, nem que seja ao menos para redimensionar uma foto. Isso é o básico do básico, mas para que o blog realmente tenha imagens bonitas e relevantes ao conteúdo é preciso muito mais do que apenas redimensionar: ajustar cores e tons, inserir texto na imagem, cortar, girar.
Aí, com a imagem pronta é só postar, certo? Errado!

Também é preciso escolher o melhor formato, se .jpg, .gif ou .png... e depois reduzir o peso da imagem ao mínimo possível, para somente aí publica-la no blog. Essa é a rotina de quem tem um blog. Escrever um post perfeito é só o começo... a imagem, ou as imagens que ilustrarão esse post possuem, elas próprias, suas próprias regras e exigências...
Sobre reduzir o peso das imagens já ensinei como fazer isso: Como reduzir o peso das imagens e melhorar o carregamento do blog

WebP- o formato de imagem que  foi descoberto por acaso

Cite acima os 3 formatos mais comuns de imagens que encontramos em blogs e sites web afora. Certamente você conhece todos e sabe a diferença entre um e outro e quando é indicado usar .jpg, .gif ou .png.
Mas hoje quero te falar de um 4º formato, relativamente novo e que recentemente passou a ser suportado por navegadores outros que não apenas o Chrome.
Estou falando do formato .WebP.

WebP (pronuncia-se weppy) é um formato de imagem desenvolvida pela Google Inc., com o objetivo de diminuir o tamanho dos arquivos e garantir uma transferência mais rápida para quem possui uma internet lenta.
O WebP foi descoberto “por acaso” quando os engenheiros do Google estavam trabalhando em um CODEC de vídeo(VP8) e conseguiram chegar a uma compressão de imagem melhor que a do formato .jpg, o mais leve até então.

Resumindo: imagens nesse formato são infinitamente mais leves, carregam muito mais rápido, consomem menos banda e impactam diretamente no índice de velocidade do blog.
E a gente sabe que velocidade de carregamento é um dos principais fatores de ranqueamento usados pelo Google para posicionar blogs e sites em resultados de pesquisa.

Como converter imagens .jpg ou .png em .webp? E como usar no blog?

Mas vamos para a parte prática desse artigo?
Observe as imagens abaixo:

Uma delas é .jpg, outra é .png e outra é .webp. Só olhando você é capaz de dizer qual é qual?
Difícil, né? Possuem diferenças muito sutis, tem que olhar com atenção pra detectar.

A primeira é .jpg e pesa 77 kb, a segunda é .png e pesa 162kb. e a última é uma imagem convertida para ser .webp e pesa apenas 24kb.
Não é incrível?

Lembrando que comprimi e otimizei as 2 primeiras como sempre faço, pois o peso original delas passaria dos 400kb. em formato .jpg e chegaria a mais de 1000kb. em formato .png sem compressão alguma.
Mas não precisa otimizar antes. Pode converter direto do peso original que o conversor faz a otimização e a conversão ao mesmo tempo.

Pois bem, agora que já provei o quanto adotar o formato .webp pode reduzir o peso de suas imagens vou deixar os links de alguns sites que fazem essa conversão:

1- Convertio: basta acessar a página, carregar as imagens que deseja converter (pode ser .jpg ou .png) e clicar em Converter.
É rápido e simples, daí é só baixar as imagens já convertidas e carrega-las normalmente em seu post.
Convertio também oferece uma extensão para o Chrome, o que facilita muito a vida.
Tem um porém: apenas 10 minutos de conversão por dia no plano gratuito. #mimata rsrsrs

2- Online Convert: mesmo processo: carregue as imagens que deseja, clique para iniciar a conversão e faça o download das imagens já convertidas.
Uma dica: imagens no formato .jpg não dão certo nesse site. Ele converte mas na hora de carregar no Blogger dá erro. Se optar por usa-lo converta imagens no formato .png que dá certinho. É o que mais tenho usado  pois ele oferece muitos outros serviços de conversão além das imagens.

3- WebP Converter: aparece uma caixa com publicidade mas é só clicar dentro dela em uma área vazia e abre a janela para você selecionar sua imagem, que após convertida é baixada automaticamente.
Só dá pra converter uma imagem por vez. A redução de peso é menor do que os 2 sites anteriores mas a qualidade é maior.

4- Ezgif: bem completo e legal, oferece alguns recursos básicos de edição além da conversão propriamente dita.
Dá pra visualizar antes como a imagem vai ficar ao ser convertida.
E também dá pra converter de .webp para os formatos tradicionais.
Ah, produz gifs e outros recursos, muito legal!
Acho que, para iniciar, é o melhor serviço.

5- Também é possível baixar plugins para abrir e salvar imagens WebP no Photoshop. Nunca usei mas se quiser tentar:
http://telegraphics.com.au/sw/product/WebPFormat#webpformat
E aqui:
https://github.com/fnordware/AdobeWebM

Nem tudo são flores no mundo WebP

Mas não vá embora ainda, nem tudo são flores e eu tenho algumas considerações a fazer:

1- Nem toda imagem ficará igualmente boa ao ser convertida para o formato .webp. Imagens com texto sobreposto costumam perder nitidez e brilho. Tem que testar e avaliar se a perda de qualidade compensa o ganho no peso.

2- Blogs que usam slides podem apresentar problemas ao terem imagens .wepb inseridas como primeira imagem do post.
Aparentemente, pelos testes que fiz, alguns slides não capturam imagens nesse formato e como a quase totalidade dos slides usa a primeira imagem do post na captura ele pode não funcionar.
A dica é usar a primeira imagem do post em  .jpg ou .png e as demais em .webp caso o post tenha muitas fotos e seu slide tenha apresentado conflito. Mas é raro, tá?.

3- Nos testes que fiz todos os navegadores exibem as imagens sem erros, mas fique atento pois o Explorer pode dar defeito se for versão mais antiga.

4- Uso Chrome no meu smarphone e as imagens são exibidas sem erros. Testa aí no seu, tá?

5- Ao baixar as imagens convertidas para .webp você vai notar que ela não aparece na pasta onde foi salva. Aparece o logo do Chrome e  o nome que voce deu para a imagem. Pode ser uma coisa chata mas nada grave.

6- Outra coisa chatinha é que editores de imagem como Photofiltre, Photoscape, etc... não abrem imagens .webp.
Então, obviamente, tem que editar a imagens antes de converte-la.


E terminei!
Tenho usado há algumas semanas imagens em formato .webp e notei que sim, o blog carrega mais rápido.
Fiz um teste agora no Page Speed Insights e o carregamento no desktop está assim:

Varia, depende da hora do teste, mas tem melhorado e no geral, por causa das imagens convertidas, reduzi em quase 2 segundos o tempo de carregamento.
E cada milésimo de segundo conta, nessa web cada vez mais apressada, né?