# WebP vs PNG e JPG: formatos modernos para a web [Canonical HTML page](https://gradiently.design/pt-pt/guide/webp-images) O teu site não tem de servir os mesmos ficheiros que publicas no Instagram. O WebP e o AVIF fazem o mesmo trabalho do PNG e do JPG com menos bytes, se os configurares bem. ## The short version - O WebP é um formato de imagem que pode ser com perdas como o JPG ou sem perdas como o PNG, e suporta transparência e animação. - Com qualidade visual semelhante, os ficheiros WebP costumam ser bem mais pequenos do que os equivalentes em JPG e PNG. - Todas as versões atuais do Chrome, Safari, Firefox e Edge suportam WebP, por isso só é preciso alternativa para navegadores muito antigos. - O AVIF comprime mais do que o WebP e já é amplamente suportado, mas codifica mais devagar. - Guarda o PNG e o JPG para carregamentos em plataformas sociais e para ficheiros que envias a pessoas; usa WebP ou AVIF no teu próprio site. Na questão **WebP vs PNG** e JPG, o WebP ganha no teu próprio site: pode comprimir como um JPG ou sem perdas como um PNG, suporta transparência e produz ficheiros mais pequenos com a mesma qualidade visual. Todos os navegadores atuais o suportam. Onde o PNG e o JPG continuam a ganhar é em todo o lado fora do teu site: carregamentos no Instagram e no LinkedIn, anexos de email, ficheiros para clientes e gráficas. Por isso a regra prática é simples. Faz e guarda os originais em PNG, serve WebP (ou AVIF) aos visitantes. ## O que é o WebP O WebP é um formato de imagem desenvolvido pela Google e documentado em [web.dev](https://web.dev/articles/serve-images-webp). Um só formato cobre o que antes exigia três: fotografias com perdas como o JPG, gráficos sem perdas com transparência como o PNG e pequenas animações como o GIF. A poupança vem de uma compressão mais inteligente, que prevê cada bloco de píxeis a partir dos vizinhos e guarda apenas a diferença. | Característica | 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 nos navegadores | Universal | Universal | Todos os atuais | Todos os atuais | | Aceite pelas plataformas sociais | Sim | Sim | De forma irregular | Raramente | Confirma o suporte atual em [caniuse.com](https://caniuse.com/webp) se o teu público usa dispositivos antigos. ## WebP vs PNG para gráficos e transparência Para logótipos, imagens de interface e recortes, o WebP sem perdas mantém cada píxel como o PNG e costuma ser mais pequeno. O WebP com perdas e transparência é o maior ganho: um recorte de produto que precisa de uma margem suave e translúcida pode ficar numa fração do tamanho do PNG sem diferença visível. Os gradientes são a exceção que pede cuidado. Uma mistura escura e suave pode formar bandas em WebP com perdas, tal como no JPG. Se a tua imagem de cabeçalho é sobretudo gradiente, compara com perdas em alta qualidade contra sem perdas, e pensa se devia sequer ser uma imagem: um [gradiente em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient) não custa nenhuma transferência. - Azul-marinho escuro: testa sem perdas: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Rosa pálido: perdas, alta qualidade: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Três tons vivos: com perdas serve: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` As misturas escuras e subtis mostram primeiro a compressão; as vivas e agitadas escondem-na. Escolhe as definições do WebP pelo conteúdo, não por hábito. ## WebP vs JPG para fotografias Para fotografias, o WebP com perdas a uma qualidade de cerca de 75 a 80 costuma igualar um JPG a 85 sendo mais pequeno. A diferença soma-se em páginas com muitas imagens: grelhas de produtos, portefólios, blogues. Numa única fotografia de cabeçalho o ganho é real mas menos dramático, e acertar nas dimensões em píxeis importa mais do que o formato. 1. **Primeiro o tamanho** Exporta a fotografia no maior tamanho em que realmente é mostrada. Um [cabeçalho de site](https://gradiently.design/pt-pt/guide/website-hero-background) de 1920×1080 nunca precisa de um original de 6000 píxeis. 2. **Escolhe uma qualidade** Começa com WebP com perdas a 80. Olha para a pele, os céus e os cantos escuros com zoom a 100% e depois vai baixando até algo mudar, e volta um passo atrás. 3. **Faz versões mais pequenas** Exporta larguras de 640, 1280 e 1920 píxeis para os telemóveis descarregarem a pequena. 4. **Serve com srcset** Deixa o navegador escolher a largura certa com `srcset` e `sizes`, como no código abaixo. ## AVIF vs WebP O AVIF é mais recente e costuma comprimir mais do que o WebP, sobretudo em fotografias e tons suaves. É suportado em todos os grandes navegadores atuais. Os seus custos são uma codificação mais lenta, que pesa se converteres imagens em tempo real, e menos ferramentas que o abram. 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 suporta e recorre à `img`. A largura e a altura impedem o esquema de saltar durante o carregamento. Se usas uma framework ou uma CDN de imagens, ela pode fazer tudo isto automaticamente a partir de um só original carregado. Confirma o que ela produz antes de converteres o que quer que seja à mão. > **WebP animado e GIF** O WebP animado é muito mais leve do que o GIF e mantém a cor completa, por isso serve para pequenos gráficos em loop numa página. Para algo com mais de uns segundos, um vídeo MP4 ou WebM sem som é ainda mais leve. O guia [GIF vs MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4) compara-os em pormenor. ## Onde o PNG e o JPG ainda ganham ### Usa WebP ou AVIF - Imagens no teu próprio site - Grelhas de produtos e galerias - Imagens de blogue e artigos - Recortes transparentes na web ### Usa PNG ou JPG - Carregamentos no Instagram, LinkedIn, X e Facebook - Imagens de pré-visualização de ligação Open Graph - Ficheiros que envias por email ou a clientes - Originais que vais voltar a editar As plataformas sociais convertem elas próprias os carregamentos, e algumas rejeitam ou tratam mal o WebP. Os rastreadores de pré-visualização de ligações também variam, por isso mantém a tua [imagem Open Graph](https://gradiently.design/pt-pt/guide/open-graph-image-size) como PNG ou JPG de 1200×630. E um WebP enviado a um cliente abre muitas vezes na aplicação errada ou não abre de todo. Uma imagem horizontal de pré-visualização de ligação a anunciar uma coleção de primavera sobre um fundo de gradiente Uma pré-visualização de ligação em 1200×630. Mantém esta em PNG para o rastreador de cada plataforma a conseguir ler. ## Como converter PNG em WebP A ferramenta de linha de comandos gratuita da Google, `cwebp`, converte um ficheiro ou uma pasta inteira, e a maioria dos editores de imagem e ferramentas de design já exporta WebP diretamente. ```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 ``` Guarda os originais em PNG. Converter WebP de volta em PNG não recupera o pormenor perdido pela compressão com perdas. Os teus ficheiros de design originais podem ficar em PNG: o Gradiently exporta designs em PNG e JPG, que são as entradas certas para este passo e os ficheiros certos para todos os carregamentos sociais. Para perceber as definições de qualidade, lê [compressão de imagens sem estragar gradientes](https://gradiently.design/pt-pt/guide/image-compression); para o par mais antigo, [PNG vs JPG](https://gradiently.design/pt-pt/guide/png-vs-jpeg); e para a lista completa de velocidade, [otimizar imagens para a web](https://gradiently.design/pt-pt/guide/lighthouse-image-performance). ## FAQ ### O WebP é melhor do que o PNG? Num site, normalmente sim: o WebP sem perdas mantém os mesmos píxeis num ficheiro mais pequeno e suporta transparência. Para carregamentos sociais e ficheiros que envias a pessoas, o PNG é mais seguro porque abre em todo o lado. ### Todos os navegadores suportam WebP? Todas as versões atuais do Chrome, Safari, Firefox e Edge suportam WebP. Usa um elemento `picture` com alternativa em JPG ou PNG se precisares de chegar a navegadores muito antigos. ### Devo usar AVIF ou WebP? O AVIF costuma ser mais pequeno, o WebP codifica mais depressa e é suportado por mais ferramentas. Servir primeiro AVIF com alternativa em WebP dá à maioria dos visitantes o ficheiro mais pequeno. ### Posso carregar WebP no Instagram? O suporte é irregular, por isso carrega antes PNG ou JPG no tamanho exato, como 1080×1350 para um post vertical. ### O WebP suporta transparência? Sim, tanto no modo com perdas como sem perdas, o que o torna um bom substituto dos PNG transparentes na web.