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
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:
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
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é?
Adorei esse seu post e suas dicas !!!.Parabéns! !!!
ResponderExcluirAdorei a dica!
ResponderExcluirEu 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!
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.
ResponderExcluirO blogger não está mais aceitando o upload desse tipo de formato de imagem? Aqui para mim está dando erro só nesse formato...
ResponderExcluir