Imagens transparentes sem o peso do PNG
Durante anos, o PNG foi a única escolha segura para qualquer imagem web com transparência: fotos de produto recortadas, logos sobre cabeçalhos coloridos, ilustrações com sombras suaves. O JPG não guarda transparência de jeito nenhum, então os designers aceitavam os arquivos grandes do PNG como preço a pagar. Uma foto de produto recortada de 1500×1500 px costuma pesar de 1,5 a 3 MB em PNG.
O WebP acaba com esse dilema. Ele suporta um canal alfa completo de 8 bits tanto no modo sem perdas quanto no modo com perdas, então a parte fotográfica da imagem pode ser comprimida como um JPG enquanto a transparência continua suave. A mesma foto de produto recortada costuma ficar entre 150 e 400 KB, e como todo navegador atual exibe WebP, ele pode substituir o PNG direto na maioria dos sites.
Quais PNGs ganham mais
A economia depende do que há dentro do PNG, não só do tamanho do arquivo.
- Conteúdo fotográfico com transparência é o que mais ganha: recortes de produto, retratos com fundo removido, ilustrações com textura. Economias de 70 a 90 por cento são comuns.
- Prints de tela e mockups de interface com degradês, fotos ou sombras geralmente encolhem pela metade ou mais.
- Ícones chapados e logos simples com poucas cores sólidas ganham pouco. O PNG já comprime isso muito bem, e alguns ícones pequenos podem até sair um pouco maiores. Para esses, manter o PNG ou passá-lo pelo Comprimir PNG costuma ser a melhor escolha.
- PNGs já otimizados com redução de paleta economizam menos do que exportações recém-saídas de um programa de design.
A lista de arquivos mostra o tamanho original e o novo de cada imagem, então fica fácil identificar as que não valem a conversão.
Como a conversão é feita
O navegador decodifica cada PNG, desenha-o num canvas no tamanho original em pixels e o codifica com o codificador WebP embutido, num worker em segundo plano quando o navegador permite. A imagem nunca sai do seu dispositivo.
O controle de Qualidade, de 10% a 100% com padrão de 90%, controla a compressão com perdas dos dados de cor. A máscara de transparência é comprimida separadamente das cores e, com os codificadores habituais dos navegadores, não é degradada pelo controle da mesma forma, então as bordas dos recortes continuam limpas mesmo a 75%.
Um detalhe técnico importa em alguns fluxos de trabalho: o canvas trabalha com alfa pré-multiplicado, então os valores de cor dos pixels totalmente transparentes são descartados. Isso é invisível num navegador ou documento. Só faz diferença se você usa PNGs como texturas de jogo ou máscaras que dependem de dados de cor escondidos sob áreas transparentes; mantenha esses em PNG.
Valores de qualidade para gráficos
O padrão de 90% é mais alto que o usado para fotos porque o conteúdo típico de um PNG, como elementos de interface, texto e contornos nítidos, mostra artefatos de compressão antes de uma foto.
- 90% para logos, prints de interface e ilustrações com texto. Visualmente idêntico ao original em quase todos os casos.
- 80% para recortes fotográficos e imagens de destaque em que o tamanho do arquivo importa. As diferenças só aparecem com zoom.
- 95–100% para pixel art, gráficos com linhas finas e prints de texto pequeno. O modo com perdas do WebP guarda a cor em metade da resolução, o que pode borrar linhas coloridas de um pixel; no topo da faixa esse efeito é mínimo.
Se você pretende alterar a imagem depois, guarde o PNG original. O WebP serve para a cópia final publicada, e converter um WebP com perdas de volta com converter WebP para PNG gera um arquivo grande sem recuperar nenhum detalhe perdido.
Como usar o resultado num site
Troque o arquivo de imagem e atualize a extensão na referência; nos navegadores atuais, nenhuma outra mudança de marcação é necessária. Algumas observações práticas:
- Ajuste a imagem ao tamanho de exibição antes de converter. Um logo exibido com 240 px de largura não ganha nada tendo 2400 px.
- O formato WebP tem um limite rígido de 16383 px por lado, então prints muito compridos ou sprite sheets maiores que isso precisam ser divididos.
- São aceitos arquivos de até 50 MB cada, e um lote é convertido com uma única configuração de qualidade e pode ser baixado como ZIP.
- Blocos de texto e outros metadados dentro do PNG não são copiados para o WebP.