100 tokens de presente no cadastro
Voltar ao blog
·8 min de leitura

O que é WebP e por que usar na sua loja virtual

O que é WebP, como ele se compara a JPG, PNG e AVIF e como usar na sua loja virtual para as páginas de produto carregarem mais rápido sem perder qualidade.

JJ

Fundador do Pictulab

O que é WebP e por que usar na sua loja virtual

WebP é um formato de imagem criado pelo Google que comprime as fotos mais do que JPG e PNG, com qualidade visual bem parecida. Ele aceita transparência e animação, e os principais navegadores já abrem o formato: Chrome, Firefox, Edge e Safari. Se você quer saber o que é WebP e se vale a pena usar na sua loja virtual, a resposta curta é: na maioria dos casos, sim. As páginas de produto ficam mais leves e carregam mais rápido, e o cliente vê a mesma coisa.

A seguir, você vai entender como ele funciona, onde ganha e onde perde para outros formatos e como começar a usar sem dor de cabeça.

O que é WebP, em poucas palavras

WebP é um formato de arquivo de imagem, assim como JPG ou PNG. O Google lançou o formato em 2010 e foi ampliando seus recursos desde então. Os arquivos têm a extensão .webp.

A ideia é simples: guardar a mesma imagem ocupando menos espaço. Segundo a documentação oficial do Google para desenvolvedores:

  • Imagens WebP sem perda ficam 26% menores que os PNG equivalentes.
  • Imagens WebP com perda ficam entre 25% e 34% menores que JPG de qualidade comparável.

A economia real varia de foto para foto, mas em catálogos com centenas de imagens a diferença aparece.

Tênis esportivo branco fotografado sobre fundo neutro em uma página de produto

Como funciona: com perda e sem perda

O WebP tem dois modos de compressão, e vale saber quando usar cada um.

WebP com perda

Descarta informações que o olho quase não percebe, como faz o JPG. É o modo indicado para fotos de produto, imagens de ambientação e banners. Dá para ajustar a qualidade: valores entre 75 e 85 costumam equilibrar bem peso e nitidez.

WebP sem perda

Mantém todos os pixels intactos, como o PNG. Combina com logotipos, ícones, artes com texto ou imagens com contornos bem definidos.

Transparência e animação

O WebP aceita canal alfa (fundo transparente) tanto no modo com perda quanto no sem perda. Isso é uma vantagem sobre o PNG: você pode ter um produto recortado com fundo transparente em um arquivo bem mais leve. Ele também aceita animação, como alternativa ao GIF.

WebP x JPG, PNG e AVIF

WebPJPGPNGAVIF
Compressão com perdaSimSimNãoSim
Compressão sem perdaSimNãoSimSim
TransparênciaSimNãoSimSim
AnimaçãoSimNãoNão (APNG à parte)Sim
Compatibilidade com programas antigosMédiaMuito altaMuito altaBaixa a média

O WebP não ganha em tudo. Em alguns pontos, outros formatos empatam ou saem na frente:

  • Compatibilidade: o JPG ganha. Praticamente qualquer programa, celular, cliente de e-mail ou impressora abre JPG. Alguns editores antigos, certas plataformas e alguns marketplaces ainda não aceitam WebP no upload.
  • Compressão: o AVIF costuma ganhar. Esse formato mais recente muitas vezes gera arquivos ainda menores que o WebP com qualidade parecida. Em troca, a codificação é mais lenta e o suporte nas ferramentas é menor.
  • Fidelidade de cor em detalhes finos: JPG ou PNG podem ganhar. O WebP com perda reduz a informação de cor (subamostragem 4:2:0). Em tecidos com estampas muito finas ou textos coloridos pequenos, pode aparecer uma leve suavização.
  • Tamanho máximo: os outros empatam ou ganham. O WebP vai até 16.383 × 16.383 pixels. Para a web sobra, mas não serve para arquivos de impressão gigantes.

Resumindo: o WebP é uma ótima escolha para exibir imagens na web. Para guardar os originais ou mandar para a gráfica, continue usando JPG, PNG ou TIFF.

A mesma foto de uma bolsa de couro em duas versões idênticas lado a lado

Por que usar WebP no seu e-commerce

Páginas que carregam mais rápido

Numa loja virtual, as imagens costumam ser o que mais pesa em cada página. Na página de produto, a foto principal muitas vezes é o maior elemento carregado. O Google mede isso com a métrica LCP (Largest Contentful Paint), uma das Core Web Vitals.

Com arquivos mais leves, essa imagem aparece antes, principalmente no celular com internet lenta. Uma loja rápida oferece uma experiência melhor, e o Google considera a experiência da página nos resultados de busca.

Produtos recortados mais leves

Se você usa fotos de produto sem fundo para aplicar sobre as cores da marca ou em montagens, até agora o caminho era o PNG, que pesa bastante. Com WebP você mantém a transparência e o arquivo diminui bastante.

Menos armazenamento e menos tráfego

Cada visita baixa as suas imagens. Arquivos menores significam menos dados transferidos do seu servidor ou CDN. Se a sua hospedagem cobra ou limita por espaço ou tráfego, isso também faz diferença.

Um só formato para vários usos

Fotos, artes, imagens com fundo transparente e pequenas animações: o WebP resolve tudo num formato só. Isso facilita organizar o catálogo.

Quando não vale a pena usar WebP

  • Arquivos originais e de trabalho. Guarde sempre o original em alta qualidade (JPG, PNG, TIFF ou RAW). Converta para WebP só a versão que vai para o site.
  • Upload em marketplaces ou redes sociais. Confira quais formatos cada plataforma aceita antes de enviar. Na dúvida, o JPG continua sendo a opção segura.
  • E-mail marketing. Nem todo cliente de e-mail exibe WebP. Em newsletters, JPG e PNG são mais confiáveis.
  • Impressão. Gráficas e catálogos impressos trabalham com outros formatos.

Camiseta de algodão dobrada com estampa de listras finas fotografada de perto

Como converter suas imagens para WebP passo a passo

Você não precisa instalar nada. Com o conversor de imagens da Pictulab dá para transformar seus JPG e PNG em WebP direto no navegador. É grátis e as imagens não são enviadas para nenhum servidor: tudo acontece no seu próprio computador.

  1. Deixe as fotos no tamanho certo. Não publique uma imagem de 4.000 pixels se ela vai aparecer com 1.200. Redimensionar costuma economizar mais do que trocar de formato.
  2. Converta para WebP. Escolha compressão com perda para fotos e sem perda para logotipos ou artes.
  3. Ajuste a qualidade. Comece por volta de 80 e compare. Se não notar diferença, experimente baixar um pouco.
  4. Confira os detalhes. Dê zoom nas áreas mais delicadas: costuras, texturas, textos em etiquetas.
  5. Comprima se precisar. Com a ferramenta para comprimir imagem você reduz ainda mais o peso final.

Se precisar do produto recortado, primeiro remova o fundo e depois exporte em WebP para manter a transparência com pouco peso.

Como usar WebP na sua loja virtual

WordPress e WooCommerce

O WordPress aceita o upload de imagens WebP na biblioteca de mídia desde a versão 5.8. Você pode subir seus arquivos .webp diretamente ou usar um plugin de otimização que gere versões WebP automaticamente.

Plataformas hospedadas

Algumas plataformas de e-commerce otimizam as imagens e entregam formatos modernos por conta própria aos navegadores compatíveis. Consulte a documentação da sua antes de converter tudo na mão: pode ser que ela já faça isso por você.

Site sob medida: o elemento picture

Se você tem acesso ao código, o elemento <picture> permite oferecer WebP e deixar um JPG de reserva para navegadores antigos:

Prompt
<picture>
  <source srcset="bolsa-marrom.webp" type="image/webp">
  <img src="bolsa-marrom.jpg" alt="Bolsa de couro marrom com alça curta" width="1200" height="1200">
</picture>

O navegador escolhe o primeiro formato que entende. Assim ninguém fica sem ver a foto.

  • Dê bons nomes aos arquivos: bolsa-couro-marrom-frente.webp diz muito mais que IMG_4532.webp.
  • Escreva textos alternativos descritivos para acessibilidade e SEO de imagens.
  • Informe largura e altura no HTML para evitar que o layout pule durante o carregamento.
  • Use carregamento lento (loading="lazy") nas imagens que não aparecem logo ao abrir a página, mas não na foto principal.
  • Mantenha uma qualidade padrão em todo o catálogo para as páginas de produto ficarem uniformes.

Para se aprofundar, veja também [ENLACE: como comprimir imagens para loja virtual sem perder qualidade] e [ENLACE: tamanhos de imagem recomendados para páginas de produto].

Conjunto de produtos de beleza com fundo transparente aplicados sobre um fundo em tom pastel

E se você também quer criar ou melhorar suas fotos de produto com IA, dá para testar na Pictulab. Comece grátis — 100 tokens de presente, sem cartão.

Perguntas frequentes

O WebP perde qualidade em relação ao JPG?

No modo com perda, assim como o JPG, ele descarta parte da informação. Com a qualidade bem ajustada, a diferença normalmente não é visível a olho nu, e o arquivo fica mais leve. No modo sem perda, nada se perde.

Todos os navegadores abrem WebP?

Os principais navegadores atuais, como Chrome, Firefox, Edge e Safari, exibem sem problema. Só versões muito antigas não têm suporte; para elas, você pode usar o elemento <picture> com um JPG de reserva.

WebP melhora o SEO da minha loja?

Não é um fator de ranqueamento por si só. O que ele faz é reduzir o peso das páginas, o que melhora a velocidade de carregamento e métricas como o LCP, que fazem parte da experiência da página considerada pelo Google.

É melhor WebP ou AVIF?

O AVIF costuma comprimir mais, mas demora mais para codificar e é aceito por menos ferramentas. O WebP oferece um bom equilíbrio entre economia e compatibilidade. Muitos sites entregam AVIF com WebP ou JPG como reserva.

Como converter para WebP sem enviar minhas fotos para a internet?

Com o conversor da Pictulab a conversão acontece no seu navegador: as imagens não são enviadas para nenhum servidor e a ferramenta é gratuita.

Crie conteúdo visual com IA para o seu negócio

Gere, edite e organize suas imagens em uma única plataforma. Comece grátis, sem cartão.

Começar grátis

Continue lendo