Conteúdo desta Galeria
Esta galeria apresenta algumas imagens de exemplo para mostrar dois novos modos de WebP: WebP-lossless e WebP-lossy com Alfa (compatibilidade com transparência).
Comparação lado a lado
A tabela abaixo apresenta imagens em PNG (compactadas com pngcrush e pngout), imagens sem perda de WebP e imagens com perda de WebP com a versão Alfa para comparação lado a lado. As imagens são sobrepostas em um plano de fundo quadriculado, como normalmente feito em softwares gráficos.
Usamos a qualidade 90 do webp para imagens com perda de WebP com qualidade Alfa e padrão para imagens sem perda de WebP. Consulte a seção Como reproduzir as imagens para mais detalhes.
Apresentamos as imagens WebP, convertidas de volta para PNG, para navegadores não capazes de renderizar WebP. Se você tiver um navegador compatível, poderá encontrar os links para os arquivos WebP abaixo. Além disso, as imagens nesta página são reduzidas para facilitar a visualização. Clique em qualquer imagem para ver a imagem em tamanho original.
A tabela também indica o tamanho da imagem recebida em cada modo.
PNG | WebP sem perda | WebP com perda (com Alfa) |
|---|---|---|
| "Rosa amarela" 1 | ||
 Tamanho do arquivo otimizado para PNG: 110,7 KB |
 Tamanho do arquivo WebP sem perda: 79,9 KB |
 Tamanho do arquivo com perda de WebP (com Alfa): 17,7 KB |
| "smoking de bebê da minha página de usuário" 2 | ||
 Tamanho do arquivo otimizado para PNG: 38,1 KB |
 Tamanho do arquivo WebP sem perda: 27 KB |
 Tamanho do arquivo com perda de WebP (com Alfa): 13,8 KB |
| "Demonstração de transparência em PNG" 3 | ||
 Tamanho do arquivo otimizado para PNG: 213,5 KB |
 Tamanho do arquivo WebP sem perda: 149 KB |
 Tamanho do arquivo com perda de WebP (com Alfa): 51,6 KB |
| "189o aniversário de Gregor Mendel" 4 | ||
 Tamanho do arquivo otimizado para PNG: 49,2 KB |
 Tamanho do arquivo WebP sem perda: 33,2 KB |
 Tamanho do arquivo com perda de WebP (com Alfa): 18,3 KB |
| "Cartão de bússola transparente para sobreposições" 5 | ||
 Tamanho do arquivo otimizado para PNG: 126,8 KB |
 Tamanho do arquivo WebP sem perda: 97,1 KB |
 Tamanho do arquivo com perda de WebP (com Alfa): 57,3 KB |
Estes são os links para os arquivos WebP (visíveis no Chrome 22 e versões mais recentes):
| "Rosa amarela": | Arquivo WebP sem perda (80,1 KB) | Arquivo WebP-lossy (com Alfa) (18,4 KB) |
| "tux de bebê para minha página de usuário": | Arquivo WebP sem perda (27,0 KB) | Arquivo WebP-lossy (com Alfa) (14,1 KB) |
| "Demonstração de transperabilidade de PNG": | Arquivo WebP sem perda (149,1 KB) | Arquivo WebP-lossy (com Alfa) (52,6 KB) |
| "189o aniversário de Gregor Mendel": | Arquivo WebP sem perda (33,3 KB) | Arquivo WebP-lossy (com Alfa) (19,0 KB) |
| "Cartão de bússola transparente para sobreposições": | Arquivo WebP sem perda (97,1 KB) | Arquivo WebP-lossy (com Alfa) (57,3 KB) |
Créditos da imagem
As imagens nesta página vêm de várias fontes diferentes. Os créditos das imagens acima estão listados aqui em ordem.
| 1 |
"Banco de fotos sem custo financeiro em alta resolução - Rosa amarela 3 - Flores" Autor da imagem: Jon Sullivan Este arquivo está em domínio público. Fonte JPEG |
| 2 |
"baby tux da minha página de usuário" Autor da imagem: Fizyplankton Este arquivo é de domínio público. Fonte em PNG |
| 3 |
"Demonstração de transparência em PNG" Autor da imagem: código-fonte POV-Ray Foto licenciada de acordo com a Creative Commons Atribuição-Compartilhamento pela mesma licença 3.0 Unported. Fonte em PNG |
| 4 |
"189o aniversário de Gregor Mendel" Autor da imagem: Equipe do Google Doodle Agradecemos à equipe do Google Doodle pela imagem. Fonte em PNG |
| 5 |
"Cartão de bússola transparente para sobreposições" Autor da imagem: Denelson83 Este arquivo é licenciado de acordo com a licença Creative Commons Atribuição-Compartilhamento pela mesma Licença 3.0 Unported. Fonte em PNG |
Como reproduzir as imagens
Para fins de reprodutibilidade e para demonstrar o uso de alguns parâmetros de compactação de WebP, descrevemos aqui as etapas exatas envolvidas ao gerar as imagens nesta galeria.
Ferramentas
Para a recompactação de PNG, o melhor resultado do pngcrush 1.8.13 e do ZopfliPNG 1.0.3 é usado. As seguintes opções de linha de comando são usadas
Pngcrush:
pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
ZopfliPNG:
zopflipng --lossy_transparent input.png output-candidate.png
ZopfliPNG com todos os filtros:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
Para redimensionar algumas das imagens maiores de origem (apenas para visualização), usamos uma
versão recente da ferramenta do ImageMagick chamada convert, disponível em
https://www.imagemagick.org. A linha de comando exata era a seguinte:
convert image.png -resize 240x image_resized.png
Compactação para WebP sem perda
Usamos a opção "sem perdas" na ferramenta cwebp para converter PNG para WebP sem perdas. Para conseguir uma saída mínima, a linha de comando exata usada foi a seguinte:
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
Renderização do WebP sem perda
Convertemos imagens WebP sem perda de volta para PNG usando a ferramenta dwebp para renderização. A linha de comando exata usada era a seguinte:
dwebp webp_lossless.webp -o output.png
Compactação para WebP com perda (com Alfa)
Usamos a ferramenta cwebp para converter PNG em WebP com perda (com Alfa). Selecionamos a qualidade de WebP como 90 (compressão com perdas) e a qualidade Alfa de 100 (compressão sem perdas). A linha de comando exata usada era a seguinte:
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
Renderização do WebP com perda (com Alfa)
Convertemos imagens WebP com perda (com Alfa) de volta para PNG usando a ferramenta dwebp para renderização. A linha de comando exata usada era a seguinte:
dwebp webp_alpha.webp -o output.png