Porque deveríamos usar WebP?

5 min readOct 8, 2019

Formato de imagem criada pelo Google, reduz o tamanho das imagens mantendo a qualidade.

O formato WebP (ou “Weppy”), é um formato de imagem criado pelo Google em meados de 2010, como alternativa para formatos famosos como PNG e JPG, porém com uma compressão melhor sem perder a qualidade.

Mas então por que não usamos isso até hoje? Bom, é isso que vamos entender.

E pra isso, vamos começar falando do porque utilizar.

Por que usar Webp?

Com o WebP é possível utilizar diversos recursos, como compactação de imagem com ou sem perda de qualidade, além de suportar transparência e até mesmo animações.

Em estudos feitos pelo Google, foi constatado que imagens com perda eram 30% menores que o JPG, e sem perda eram em média 25% menores que o PNG.

Como utilizar o WebP?

Existem diversas maneiras de utilizarmos o WebP em nossas páginas. Neste exemplo, utilizarei a tag picture do HTML5, que faz com que browsers que não tenham suporte a esse formato, consigam renderizar a imagem em seu formato original.

<picture>
    <source type="image/webp" srcset="imagem.webp">
    <source type="image/jpeg" srcset="imagem.jpg">
    <img src="imagem.jpg" alt="Esta é minha imagem">
</picture>

Hoje, 80% dos navegadores já suportam esse formato. Portanto, caso seu navegador não esteja na lista dos navegadores suportados, ele renderizará a imagem que você está passando no seu formato JPG, como no exemplo acima.

Transformando imagens em WebP

Existem diversas ferramentas para realizar a conversão de imagens para WebP. Se você pesquisar por “converter PNG para WebP”, irá achar diversos sites que fazem isso. Porém, alguns deles, limitam a quantidade de imagens que você pode fazer por vez.

Caso você deseje transformar uma grande quantidade de arquivos de uma vez só, recomendo utilizar o cwebp, que é uma ferramenta de linha de comando.

# Configurando o command line

Através deste link, você escolhe a versão que se encaixa de acordo com as configurações da sua máquina. No meu meu caso a versão é libwebp-1.0.3-windows-x64.zip.

Após extrair os arquivos para uma pasta específica, basta adicionar este caminho a sua variável de ambiente. (No caso do windows)

Abra as propriedades em ‘Meu Computador’, clique em Configurações avançadas do sistema, e por fim em Variáveis de ambiente.

Feito isto, basta encontrar o parametro Path, e adicionar mais uma linha:

Importante notar que temos que passar todo o caminho até a pasta bin, para que as demais ferramentas também estejam disponíveis.

Feito isto, feche seu terminal e abra-o novamente.

Digite cweb -v . Caso uma mensagem parecida com essa tenha sido mostrada, é sinal que tudo deu certo.

Senão, volte alguns passos e tente repetir o processo novamente.

# Comparando imagens

Com o download da ferramenta concluído e configurado, basta abrir seu terminal preferido e digitar o seguinte comando:

cwebp -q 50 images/girassol.jpg -o images/girassol.webp

Isso faz com que a imagem girassol.jpg seja convertida com a qualidade reduzida em 50% para o formato webp.( 0 é o menor e 100 é o maior)

E o resultado ficou assim:

Imagem original x Imagem webp

Podemos notar uma redução de qualidade na imagem Webp, principalmente no fundo desfocado, onde a imagem acabou ficando mas pixelada, mas sem afetar o contexto no geral.

Agora vamos fazer o mesmo processo, porém utilizando o parametro de qualidade 90.

Note que a diferença é mínima e o ganho foi de aproximadamente 40kb, ou seja, uma redução de quase 30% .

Temos que tomar certo cuidado, pois há momentos em que a conversão do webp pode acabar ficando maior que a da imagem original. Neste caso por exemplo, se você tentar usar o parametro de qualidade 100, a imagem convertida ficará com 203kb.

# Mais imagens de uma vez

Caso você esteja trabalhando em algum projeto, que já possua diversas imagens legadas em uma determinada pasta, como por exemplo a pasta ‘image’, é possível utilizar a mesma ferramenta cweb.

Para convertermos todas a imagens de uma vez, utilizamos o seguinte comando:

`for file in images/*; do cwebp -q 80 "$file" -o "${file%.*}.webp"; done`

Neste caso, todas as imagens dentro da pasta images, serão convertidas para o formato webp com 80% da qualidade original.

Importante não retirar a (`) crase, pois o terminal interpretará como um script.

Sua pasta deverá ficar assim:

girassol.jpg
girassol.webp
rosa.jpg
rosa.webp
margarida.png
margarida.webp

# Quem está usando?

Alguns grandes players do mercado, como Facebook, Mercado Livre, Netflix… já estão utilizando esse formato de imagens.

Um caso bacana é o do Mercado Livre. Diversas imagens de anúncios estão sendo carregadas através do Webp. Óbviamente que ainda existe muito arquivo Gif e PNG ainda sendo utilizados, mas esse já é um grande passo em busca de uma melhoria para o usuário.

# E como saber quando alguém está usando?

Basta abrir o debug do Chrome (F12), ir na aba Network, filtrar por Img e verificar os tipos de imagens que estão sendo carregadas:

# Então, vale a pena?

A resposta é: depende!

É óbvio que em casos de estúdios fotográficos, fotógrafos profissionais, e produtos onde a qualidade da imagem é essencial para o seu negócio, esse formato ainda não é o padrão à ser utilizado. Mas com o passar dos anos, e com a evolução das imagens, acredito que em breve conseguiremos tornar o formato Webp como novo padrão da internet.

Agora, se este não é o seu caso, a resposta é SIM! Se conseguirmos diminuir o tamanho em 30% do nosso bundle de imagens, nosso usuário conseguirá acessar nosso site de forma muito mais rápida e sem honerar na sua experiência.

São pequenas modificações como essa, que fazem com que nosso site ganhe em perfomance e ocasione melhorias constantes para nossos usuários.

Por hoje é isso pessoal, espero que tenham gostado!

Qualquer dúvida, crítica ou sugestão, me procura no twitter @kimuradev

Abraços!