# WebP vs PNG e JPG: formatos modernos para a web [Canonical HTML page](https://gradiently.design/pt-br/guide/webp-images) Seu site não precisa servir os mesmos arquivos que você posta no Instagram. WebP e AVIF fazem o mesmo trabalho que PNG e JPG com menos bytes, se forem configurados direito. ## The short version - WebP é um formato de imagem que pode ser com perdas como o JPG ou sem perdas como o PNG, e aceita transparência e animação. - Com qualidade visual parecida, os arquivos WebP costumam ser bem menores do que os equivalentes em JPG e PNG. - Todas as versões atuais do Chrome, Safari, Firefox e Edge aceitam WebP, então só é preciso um plano B para navegadores muito antigos. - O AVIF comprime ainda mais do que o WebP e hoje tem amplo suporte, mas demora mais para codificar. - Mantenha PNG e JPG para envios a redes sociais e para arquivos que você manda a outras pessoas; use WebP ou AVIF no seu próprio site. Na disputa **WebP vs PNG** e JPG, o WebP vence no seu próprio site: ele pode comprimir como um JPG ou sem perdas como um PNG, aceita transparência e gera arquivos menores com a mesma qualidade visual. Todos os navegadores atuais o aceitam. PNG e JPG ainda ganham em todo lugar fora do seu site: envios para Instagram e LinkedIn, anexos de e-mail, arquivos para clientes e gráficas. A regra prática é simples. Crie e guarde os originais em PNG e sirva WebP (ou AVIF) aos visitantes. ## O que é o WebP O WebP é um formato de imagem desenvolvido pelo Google e documentado no [web.dev](https://web.dev/articles/serve-images-webp). Um formato só cobre o que antes exigia três: fotos com perdas como o JPG, gráficos sem perdas e com transparência como o PNG e animações curtas como o GIF. A economia vem de uma compressão mais inteligente, que prevê cada bloco de pixels a partir dos vizinhos e guarda só a diferença. | Recurso | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Com perdas | Sim | Não | Sim | Sim | | Sem perdas | Não | Sim | Sim | Sim | | Transparência | Não | Sim | Sim | Sim | | Animação | Não | Limitada (APNG) | Sim | Sim | | Suporte em navegadores | Universal | Universal | Todos os atuais | Todos os atuais | | Aceito por redes sociais | Sim | Sim | De forma irregular | Raramente | Confira o suporte atual no [caniuse.com](https://caniuse.com/webp) se o seu público usa aparelhos antigos. ## WebP vs PNG para gráficos e transparência Para logotipos, imagens de interface e recortes, o WebP sem perdas mantém cada pixel como o PNG e costuma ser menor. O WebP com perdas e transparência é a vitória maior: um recorte de produto que precisa de uma borda suave e translúcida pode ficar com uma fração do tamanho do PNG, sem diferença visível. Gradientes são a exceção que pede cuidado. Uma transição escura e suave pode formar faixas no WebP com perdas, como acontece no JPG. Se a sua imagem principal é quase só gradiente, compare o modo com perdas em alta qualidade com o sem perdas e pergunte-se se ela precisa mesmo ser uma imagem: um [gradiente em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient) não custa download nenhum. - Azul-marinho escuro: teste sem perdas: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Rosa claro: com perdas em alta qualidade: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Três cores vivas: com perdas serve: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Transições escuras e sutis mostram a compressão primeiro; as vivas e agitadas a escondem. Escolha os ajustes do WebP pelo conteúdo, não por hábito. ## WebP vs JPG para fotos Para fotografias, o WebP com perdas em qualidade de 75 a 80 costuma igualar um JPG em 85 sendo menor. A diferença se soma em páginas com muitas imagens: grades de produtos, portfólios, blogs. Em uma única foto principal o ganho é real, mas menos dramático, e acertar as dimensões em pixels importa mais do que o formato. 1. **Primeiro o tamanho** Exporte a foto no maior tamanho em que ela realmente aparece. Um [topo de site](https://gradiently.design/pt-br/guide/website-hero-background) de 1920×1080 nunca precisa de um original de 6000 pixels. 2. **Escolha uma qualidade** Comece o WebP com perdas em 80. Olhe pele, céus e cantos escuros com zoom de 100%, depois vá baixando até algo mudar e volte um passo. 3. **Faça versões menores** Exporte larguras de 640, 1280 e 1920 pixels para que os celulares baixem a pequena. 4. **Sirva com srcset** Deixe o navegador escolher a largura certa com `srcset` e `sizes`, como no código abaixo. ## AVIF vs WebP O AVIF é mais novo e costuma comprimir mais do que o WebP, sobretudo em fotografias e tons suaves. Ele é aceito em todos os principais navegadores atuais. Seus custos são a codificação mais lenta, o que importa se você converte imagens na hora, e menos ferramentas que o abrem. Muitos sites servem AVIF primeiro, WebP em segundo e JPG por último, e deixam o navegador usar o primeiro que entende. ```html Evening light over the harbour ``` O navegador usa a primeira `source` que aceita e recorre à `img`. A largura e a altura evitam que o layout pule durante o carregamento. Se você usa um framework ou uma CDN de imagens, ele pode fazer tudo isso sozinho a partir de um único original enviado. Confira o que ele gera antes de converter qualquer coisa à mão. > **WebP animado e GIF** O WebP animado é muito mais leve do que o GIF e mantém todas as cores, então serve para pequenos gráficos em loop em uma página. Para qualquer coisa com mais de alguns segundos, um vídeo MP4 ou WebM sem som é ainda mais leve. [GIF vs MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4) compara os dois em detalhe. ## Onde PNG e JPG ainda ganham ### Use WebP ou AVIF - Imagens no seu próprio site - Grades de produtos e galerias - Imagens de blog e de artigos - Recortes transparentes na web ### Use PNG ou JPG - Envios para Instagram, LinkedIn, X e Facebook - Imagens de prévia de link Open Graph - Arquivos que você envia por e-mail ou a clientes - Originais que você vai editar de novo As redes sociais convertem os envios sozinhas, e algumas rejeitam ou tratam mal o WebP. Os rastreadores de prévia de link também variam, então mantenha sua [imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-image-size) como PNG ou JPG de 1200×630. E um WebP enviado a um cliente muitas vezes abre no app errado ou não abre. Uma imagem larga de prévia de link anunciando uma coleção de primavera sobre um fundo de gradiente Uma prévia de link em 1200×630. Mantenha esta em PNG para que o rastreador de qualquer plataforma consiga ler. ## Como converter PNG em WebP A ferramenta de linha de comando gratuita `cwebp`, do Google, converte um arquivo ou uma pasta inteira, e a maioria dos editores de imagem e ferramentas de design hoje exporta WebP direto. ```bash # lossy, good for photos cwebp -q 80 photo.png -o photo.webp # lossless, good for logos and interface graphics cwebp -lossless logo.png -o logo.webp # a whole folder for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done ``` Guarde os originais em PNG. Converter WebP de volta para PNG não restaura o detalhe perdido pela compressão com perdas. Seus arquivos originais de design podem continuar em PNG: o Gradiently exporta designs em PNG e JPG, que são as entradas certas para esta etapa e os arquivos certos para qualquer envio a redes sociais. Para entender a lógica dos ajustes de qualidade, leia [compressão de imagem sem estragar gradientes](https://gradiently.design/pt-br/guide/image-compression); para o par mais antigo, [PNG vs JPG](https://gradiently.design/pt-br/guide/png-vs-jpeg); e para a lista completa de velocidade, [otimização de imagens para a web](https://gradiently.design/pt-br/guide/lighthouse-image-performance). ## FAQ ### O WebP é melhor do que o PNG? Em um site, em geral sim: o WebP sem perdas mantém os mesmos pixels em um arquivo menor e aceita transparência. Para envios a redes sociais e arquivos que você manda a outras pessoas, o PNG é mais seguro porque abre em qualquer lugar. ### Todos os navegadores aceitam WebP? Todas as versões atuais do Chrome, Safari, Firefox e Edge aceitam WebP. Use um elemento `picture` com um plano B em JPG ou PNG se precisar alcançar navegadores muito antigos. ### Devo usar AVIF ou WebP? O AVIF costuma ser menor; o WebP codifica mais rápido e é aceito por mais ferramentas. Servir AVIF primeiro com WebP como plano B dá à maioria dos visitantes o menor arquivo. ### Posso enviar WebP para o Instagram? O suporte é irregular, então envie PNG ou JPG no tamanho exato, como 1080×1350 para um post retrato. ### O WebP aceita transparência? Sim, tanto no modo com perdas quanto no sem perdas, o que o torna um bom substituto para PNGs transparentes na web.