Em uma frase
O WebP é um formato moderno de imagem desenvolvido pelo Google que pega emprestado uns truques de compressão de vídeo para espremer imagens em arquivos significativamente menores do que JPEGs ou PNGs, tudo isso mantendo a mesmíssima qualidade visual.
O problema que ele resolve
Por muito tempo, a internet foi movida visualmente por uma trégua tensa e frágil entre duas facções rivais: JPEG e PNG. (O GIF também estava lá, fazendo barulho no canto, mas já chegaremos nele).
Se você tinha uma fotografia com milhões de cores, usava JPEG. O JPEG era lossy (com perda), o que significa que ele jogava fora dados que seus olhos supostamente não conseguiam ver para economizar espaço. Se você tivesse um logo, texto nítido, ou precisasse de um fundo transparente, usava PNG. O PNG era lossless (sem perda) — ele mantinha cada pixel perfeito, mas, como resultado, o tamanho dos arquivos podia ser astronomicamente pesado. E se você quisesse animação? Usava o GIF, um formato ancião de 1987 que era dolorosamente ineficiente e limitado a 256 cores.
O problema é que as imagens cresceram ao ponto de representar mais de 60% dos bytes baixados de uma página web comum. Conforme o mundo mudou de computadores desktop com banda larga para celulares em redes 3G instáveis, esses formatos de imagem inchados viraram um problema massivo. Imagens lentas para carregar significavam usuários frustrados, carrinhos de compras abandonados, e uma web arrastada parecendo que você estava nadando em melado.
Por volta de 2010, o Google decidiu que esse sistema de dois formatos estava quebrado. Eles tinham acabado de comprar a On2 Technologies, uma empresa que criou um formato de compressão de vídeo chamado VP8. Os engenheiros do Google tiveram um momento eureca: um vídeo nada mais é do que uma sequência rápida de imagens estáticas. E se eles arrancassem a parte de "imagem estática" do codec de vídeo de ponta VP8 e empacotassem isso como um arquivo de imagem independente?
Nascia o WebP. Sua missão era ser o "um formato para a todos governar". Ele suportava compressão lossy que batia o JPEG, compressão lossless que batia o PNG, transparência (alpha channels), e até animação para finalmente aposentar o GIF.
Como funciona por baixo dos panos
Para entender por que o WebP é tão eficiente, você precisa olhar para como ele trapaceia. Ele na verdade não armazena a sua imagem pixel por pixel; ele armazena instruções de como adivinhar matematicamente qual é a cara da sua imagem.
Compressão Lossy: Codificação Preditiva
Quando o WebP opera em modo "lossy" (o substituto do JPEG), ele usa codificação preditiva, um truque herdado direto do codec de vídeo VP8.
O WebP divide sua imagem em "macroblocks" — grades de 16x16 ou 4x4 pixels. Em vez de salvar de forma independente a cor de cada pixel de um bloco, o encoder do WebP olha para os blocos imediatamente acima e à esquerda do bloco atual. Ele pergunta: "Baseado nos pixels que eu já desenhei, eu consigo prever como é este próximo bloco?"
Como a maioria das fotos tem áreas contínuas de cor (tipo um céu azul, uma bochecha lisa ou uma sombra), a previsão muitas vezes é bem certeira. O WebP, então, só salva o residual — a diferença matemática entre a previsão e a imagem real.
Salvando apenas essas pequenas diferenças em vez dos dados completos de cada pixel, o WebP encolhe drasticamente o tamanho do arquivo.
Compressão Lossless: Um Bicho Diferente
O WebP lossless (o substituto do PNG) não usa o VP8. Ele usa um conjunto completamente diferente de técnicas desenhadas pelo Google especificamente para o WebP. Ele conta com uma abordagem em várias etapas:
- Previsão Espacial: Igual ao seu irmão lossy, ele tenta prever os pixels com base nos vizinhos.
- Transformação de Cor: Separa os dados de cor para encontrar redundâncias.
- O Verde é Rei: Usa o canal verde (green channel) como base, prevendo os valores de vermelho e azul com base nos valores de verde (porque os olhos humanos são mais sensíveis ao verde).
- Compressão LZ77: Por fim, pega todos esses dados otimizados e roda numa versão avançada do algoritmo de compressão LZ77 baseado em dicionário.
A Estrutura do Arquivo (RIFF)
Por trás de tudo, o WebP é encapsulado em um container leve chamado RIFF (Resource Interchange File Format). RIFF é uma estrutura de arquivo com tags, o que significa que um arquivo WebP é organizado em chunks (pedaços). Isso permite que o formato adicione facilmente metadados (como dados EXIF da sua câmera) ou perfis de cor ICC sem quebrar a imagem principal.
| Recurso | JPEG | PNG | GIF | WebP |
|---|---|---|---|---|
| Compressão Lossy | Sim | Não | Não | Sim |
| Compressão Lossless | Não | Sim | Sim | Sim |
| Transparência (Alpha) | Não | Sim | 1-bit | Sim (Ambos Lossy e Lossless) |
| Animação | Não | Não | Sim | Sim |
| Economia Média | Base | Base | Base | ~25-34% menor |
Histórias do mundo real
A Avalanche do E-commerce
Um e-commerce de roupas de médio porte percebeu que a sua taxa de rejeição (bounce rate) estava absurdamente alta em dispositivos móveis. Uma auditoria revelou que as páginas do catálogo de produtos estavam baixando quase 15 megabytes de JPEGs em alta resolução. O navegador mobile gastava todo o seu tempo fazendo o parsing de imagens gigantes de cardigãs.
O time de engenharia implementou um pipeline automatizado para servir imagens WebP aos navegadores compatíveis. Ajustando a compressão lossy, eles mantiveram a exata nitidez visual exigida para mostrar as texturas dos tecidos, mas derrubaram o payload total da página para 3,5 megabytes. O tempo de carregamento despencou em 4 segundos. Consequentemente, as taxas de conversão mobile deram um pico de 18%.
A lição: Bytes de imagem são inversamente correlacionados com a receita. Quando você serve arquivos menores, os usuários ficam por ali tempo suficiente para de fato comprar alguma coisa.
A Hero Image Transparente
Um web designer criou uma landing page lindona para um novo produto SaaS. A seção hero trazia uma ilustração 3D intrincada de um rack de servidores flutuando sobre um fundo com gradiente dinâmico feito em CSS. Para isso funcionar, a imagem do rack precisava de um fundo transparente.
O designer exportou a imagem como um PNG-24 com um alpha channel. Por conta do sombreamento complexo e dos milhões de cores na renderização 3D, o PNG pesava absurdos 2,2 megabytes. Carregar a página parecia voltar para a internet discada de 2004.
O desenvolvedor pegou aquele PNG e o converteu para WebP. Ele usou um superpoder bem específico do WebP: RGB lossy com um canal Alpha lossless. Isso significava que as cores eram comprimidas feito um JPEG, mas a transparência continuava com cada pixel perfeito, sem aquelas bordas serrilhadas. O arquivo WebP resultante ficou com 210 kilobytes — uma redução de 90% no tamanho sem nenhuma perda aparente na qualidade.
A lição: Você não precisa mais escolher entre cores ricas de fotografia e um fundo transparente. O WebP dá conta dos dois ao mesmo tempo.
O Blog Entupido de Memes
Um blog popular de cultura pop dependia muito de GIFs animados para mostrar clipes de filmes e reações. Um único artigo podia conter cinco GIFs, baixando 20 megabytes de dados e fazendo notebooks velhos parecerem turbinas de avião enquanto a CPU sofria para decodificar o formato jurássico.
Eles migraram sua biblioteca de mídia para WebP Animado. Como os GIFs salvam cada frame como uma imagem completa, enquanto o WebP Animado usa compressão estilo vídeo para guardar só as diferenças entre os frames, a economia foi astronômica. Um GIF de 5MB virou um WebP de 800KB. O uso da CPU despencou do penhasco.
A lição: O formato GIF pertence a um museu. Para animações curtas e em loop na web, formatos modernos como o WebP (ou vídeos MP4/WebM de verdade) são infinitamente superiores.
Erros e armadilhas comuns
- A Armadilha do Duplo-Lossy: Converter um JPEG supercomprimido e cheio de artefatos num WebP lossy é uma péssima ideia. O algoritmo do WebP na verdade vai tentar preservar perfeitamente aqueles blocos feiosos do JPEG, tratando-os como parte da imagem, o que pode resultar num arquivo maior ou numa imagem muito mais borrada. Sempre converta a partir da fonte com a maior qualidade possível (tipo um arquivo RAW, um PNG de alta resolução ou o JPEG original sem compressão).
- Esquecer da tag HTML
<picture>: Embora o WebP tenha hoje ~97% de suporte global nos navegadores, por anos ele foi uma festa só do Google. O Safari da Apple ficou arrastando os pés para dar suporte ao WebP até o final de 2020. Se você precisa suportar navegadores realmente ancestrais, não dá pra simplesmente jogar um.webpdentro de uma tag<img>. Você precisa usar a tag<picture>para oferecer um fallback:<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="A reliable fallback"> </picture> - Achar que o WebP sempre é o menor de todos: O WebP é fantástico, mas não é mágica. Para formas vetoriais incrivelmente simples e de cores chapadas (tipo um logo minimalista), um SVG vai ser quase sempre menor e infinitamente escalável. Do mesmo jeito, formatos mais novos de próxima geração, como o AVIF, batem o WebP frequentemente em taxas de compressão puras, embora o AVIF exija muito mais poder de processamento na hora do encode.
- Ignorar o tempo de encode no servidor: O WebP exige bem mais poder de CPU pra comprimir do que o JPEG. Se você estiver gerando imagens WebP on-the-fly quando o usuário as solicita, o tempo de CPU necessário para fazer o encode da imagem pode acabar causando um delay que anula totalmente a economia de banda. A conversão para WebP deve ser feita antecipadamente (durante um processo de build ou no momento do upload), e não dinamicamente no primeiro render.
Por que isso merece estar no seu radar
Se você constrói coisas para a internet, performance web não é mais um luxo; é um requisito fundamental. Motores de busca como o Google penalizam ativamente sites lentos em seus rankings, dando um peso pesado a métricas conhecidas como Core Web Vitals (especificamente a Largest Contentful Paint, ou LCP). Como o "maior conteúdo" numa tela costuma ser uma imagem, otimizar essa imagem é a forma mais rápida de melhorar o seu SEO.
Além disso, largura de banda custa dinheiro — tanto pra você (as taxas de egressão de dados da AWS são notoriamente caras) quanto para os seus usuários que usam planos de dados limitados em países em desenvolvimento.
Toda vez que você estiver lidando com avatares enviados por usuários, landing pages gigantescas de marketing, galerias de fotos ou catálogos de e-commerce, o WebP é a escolha pragmática padrão dos anos 2020. Ele entrega o melhor equilíbrio entre suporte amplo dos navegadores, excelente qualidade visual e uma redução drástica no tamanho do arquivo.
Vá mais fundo
- Google Developers: An Image Format for the Web - A documentação oficial, profundamente técnica e a referência para o formato WebP direto dos seus criadores.
- MDN Web Docs: Image file type and format guide - Uma excelente análise da Mozilla de quando usar o WebP contra os outros formatos de imagens para web.
- RFC 6386: VP8 Data Format and Decoding Guide - A especificação base da IETF para o codec de vídeo VP8, a engine que roda por baixo e dá poder à compressão lossy do WebP.
- CanIUse: WebP image format - O rastreador definitivo para compatibilidade entre navegadores, mostrando exatamente quais versões de navegadores suportam o WebP globalmente.