Imagens Webp- como esse formato pode reduzir o peso de suas imagens e acelerar o carregamento de seu blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

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

Publicado em 04/02/2019

Imagens Webp- como esse formato pode 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é?





3 comentários

  1. Adorei esse seu post e suas dicas !!!.Parabéns! !!!

    ResponderExcluir
  2. Adorei a dica!

    Eu testei uma conversão na última resenha e realmente, aliviou bem o tamanho. Componho a maioria das minhas imagens no Canva e de saída, elas saem pesadas. Andei testando a compressão pra aliviar o peso delas, mas percebi uma perda de qualidade pra algumas. Essa dica foi de ouro, muito obrigada!

    ResponderExcluir
  3. Nossa, fiquei decepcionada, testei meu blog e ele não chega nem na média, está lento, lento. Vou adotar esse formatos nas imagens com certeza, mas isso são para as próximas postagens? Ou terei que refazer as postagens já publicada com imagens nesse formato? Eu sempre compactei as imagens antes de publicar, mas estou vendo que adiantou pouco.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…