Notas da equipe sobre ofício, formatos e as pequenas decisões por trás de um bom resultado.
Como o WebP alcança tamanhos menores que o PNG
O WebP usa dois modos distintos de compressão. O modo exato combina previsão espacial e de cor com uma etapa de codificação de entropia mais sofisticada que o DEFLATE do PNG. Esse modo alcança taxas de compressão cerca de 26% melhores em imagens típicas, segundo o teste publicado pelo Google. O modo com compressão aplica uma transformação por blocos parecida com a compressão de vídeo, projetada para descartar informação perceptualmente irrelevante enquanto preserva o que o olho realmente vê. Para imagens com camada de transparência, o WebP usa uma sub-compressão no modo exato separada para os dados de transparência. Aplica compressão com compressão aos dados RGB, e é por isso que o WebP com compressão e transparência pode ser cerca de três vezes menor que um PNG com qualidade visual equivalente. O DEFLATE do PNG é apenas no modo exato e não consegue aproveitar o compromisso perceptual que o modo com compressão explora. Essa diferença de formato explica a distância de tamanho.
O camada de transparência em detalhe
Tanto o PNG quanto o WebP suportam transparência de 8 bits. Isso significa que cada ponto pode guardar um valor de opacidade de 0 (totalmente transparente) a 255 (totalmente opaco). Quando o motor de imagem da plataforma recria um PNG em WebP, ele lê os valores RGBA de cada ponto. Os valores de transparência são passados diretamente para a etapa de compressão do WebP, onde são preservados no modo exato. Isso ocorre independente de como os dados RGB são tratados. O resultado é que cada área transparente do PNG com opacidade zero, cada ponto semitransparente entre 1 e 254 e cada ponto opaco em 255 mapeia para o mesmo estado exato no WebP. Para um logo com sombras suaves ou texto com suavização de borda sobre um fundo transparente, a suavidade das bordas sobrevive intacta. Isso contrasta com o JPG, que não tem suporte de transparência na sua especificação de formato e precisa compor a imagem sobre uma cor de fundo antes de gravar.
Core Web Vitals e a escolha do formato de imagem
O Largest Contentful Paint mede quanto tempo leva para o maior elemento visível da página aparecer na janela de visualização. Para a maioria das páginas de conteúdo, esse elemento é a imagem principal. O Google usa o LCP como sinal de ranqueamento na sua avaliação de Core Web Vitals. As imagens PNG são uma fonte recorrente de falhas de LCP por causa do tamanho do arquivo. Um PNG fotográfico em resolução 4K pode facilmente ter vários megabytes, enquanto uma saída WebP com qualidade equivalente fica abaixo de um megabyte. A especificação de formato de imagem tem impacto direto nesse número. Mudar de PNG para WebP em imagens acima da dobra é uma forma comprovada de reduzir o LCP sem mudar o layout, o conteúdo ou a qualidade visual percebida. O PageSpeed Insights e as ferramentas do navegador marcam PNG como formato de nova geração quando detectados como candidatos ao LCP.
Saída com compressão e o ajuste quase exato
A gravação de WebP oferece um parâmetro de qualidade de 0 a 100, onde valores mais altos preservam mais detalhe ao custo de arquivos maiores. Esta ferramenta grava em um ajuste fixo quase exato, sintonizado para equilibrar fidelidade visual e tamanho de arquivo. Esse ajuste é calibrado para as categorias típicas de ativos web: fotografias, gráficos de interface e ícones. Nesse ajuste, a saída é perceptualmente indistinguível do PNG de origem em tamanhos normais de visualização. A diferença existe apenas na precisão em nível de bit, não no resultado visual. Se você comparar as duas imagens em uma tela normal, elas vão parecer idênticas. A principal evidência de que a diferença é real, não teórica, é o tamanho do arquivo: tipicamente 40 a 70% menor em fotografias. Para uso na web, isso é o que importa.
Comportamento dos metadados
O fluxo usado para a conversão de PNG para WebP retira os metadados EXIF, IPTC e XMP da saída. Isso corresponde ao comportamento observado nos três principais motores de navegador. Os perfis de cor ICC são tratados de forma inconsistente. O Chrome e o Safari preservam a marca de perfil ICC sRGB na saída WebP. O Firefox retira todos os metadados, incluindo o perfil ICC. O resultado líquido é que a saída WebP deste conversor não tem EXIF, IPTC nem XMP. Se você precisar preservar metadados de localização, copyright ou câmera, guarde o PNG original ao lado do WebP de saída. Para uso em web, onde os metadados não são renderizados e apenas aumentam o tamanho do arquivo, a remoção é o comportamento correto. Metadados de câmera como ISO e abertura importam para fotógrafos, mas não para visitantes de uma página web, e o conversor remove esse peso extra automaticamente.
Quando manter o PNG e quando o WebP basta
A árvore de decisão prática é curta. Se o destino final da imagem é uma página ou aplicação web, e o ambiente de renderização é qualquer navegador de 2020 em diante, o WebP é o formato de exportação certo. Se a imagem precisa abrir em um aplicativo de design como Figma, Sketch ou Affinity Designer, confirme o suporte a WebP na versão específica que você usa, já que o suporte varia. Se a imagem for usada em um fluxo de impressão, o PNG ou o TIFF são preferidos, já que a maioria dos RIPs de impressão não lida com WebP. Se a imagem for enviada por e-mail, o PNG é mais seguro, já que os clientes de e-mail são notoriamente inconsistentes com formatos modernos. Se a imagem for usada como arquivo de trabalho editado e regravado várias vezes, mantenha o PNG como master. O WebP em qualidade quase exata é um excelente formato de entrega, e o PNG é o melhor formato de arquivo e edição. O fluxo ideal mantém o PNG como original e exporta para WebP na entrega web.