Conteúdo desta galeria
Esta galeria apresenta alguns exemplos de imagens para mostrar dois novos modos de WebP: WebP sem perda e com perda de WebP com Alfa (suporte a transparência).
Comparação lado a lado
A tabela abaixo apresenta imagens PNG (compactadas com pngcrush e pngout), Imagens WebP e imagens com perda de WebP com Alpha para comparação comparação. As imagens são sobrepostas em um fundo quadriculado, como em softwares gráficos.
Observe que usamos a qualidade webp 90 para imagens com perda de WebP com alfa e qualidade padrão para imagens WebP sem perda. Consulte Para mais detalhes, consulte a seção Como reproduzir as imagens.
Apresentamos as imagens WebP, convertidas de volta para PNG, para navegadores é capaz de renderizar WebP. Se você tiver um navegador compatível, poderá encontrar o links para os arquivos WebP abaixo. Além disso, as imagens nesta página são reduzidos para facilitar a visualização. Clique em qualquer imagem para ver em tamanho real imagem.
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 de 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 para bebês da minha página de usuário" 2 | ||
 Tamanho de arquivo otimizado para PNG: 38,1 KB |
 Tamanho do arquivo WebP sem perda: 27,0 KB |
 Tamanho do arquivo com perda de WebP (com alfa): 13,8 KB |
| "Demonstração de transparência de PNG" 3 | ||
 Tamanho de 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 de 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 de 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 superior):
| "Rosa amarela": | Arquivo WebP sem perda (80,1 KB) | Arquivo WebP com perda (com Alfa) (18,4 KB) |
| "smoking para bebês da minha página de usuário": | Arquivo WebP sem perdas (27,0 KB) | Arquivo WebP com perda (com Alfa) (14,1 KB) |
| "Demonstração de transparência em PNG": | Arquivo WebP sem perda (149,1 KB) | Arquivo WebP com perda (com Alfa) (52,6 KB) |
| "189o aniversário de Gregor Mendel": | Arquivo WebP sem perda (33,3 KB) | Arquivo WebP com perda de memória (com Alfa) (19,0 KB) |
| "Cartão de bússola transparente para sobreposições": | Arquivo WebP sem perdas (97,1 KB) | Arquivo WebP com perda de memória (com Alfa) (57,3 KB) |
Créditos da imagem
As imagens nesta página vêm de várias fontes diferentes. Créditos para as imagens acima estão listadas aqui em ordem.
| 1 |
"Fotos sem custo financeiro de banco de fotos em alta resolução - Rosa amarela 3 - Flores" Autor da imagem: Jon Sullivan Este arquivo é de domínio público. Origem JPEG |
| 2 |
"smoking para bebês da minha página de usuário" Autor da imagem: Fizyplankton Este arquivo é de domínio público. Origem do PNG |
| 3 |
"Demonstração de transparência de PNG" Autor da imagem: código-fonte do POV-Ray Foto licenciada de acordo com a Creative Commons (link em inglês) Licença Attribution-Share Alike 3.0 (sem portabilidade). Origem do PNG |
| 4 |
"189o aniversário de Gregor Mendel" Autor da imagem: equipe do Google Doodle Agradecemos à equipe do Google Doodle por esta imagem. Origem do PNG |
| 5 |
"Card de bússola transparente para sobreposições" Autor da imagem: Denelson83 Este arquivo é licenciado Creative Commons (link em inglês) Licença Attribution-Share Alike 3.0 (sem portabilidade). Origem do PNG |
Como reproduzir as imagens
Por uma questão de reprodutibilidade e para demonstrar o uso de alguns WebP parâmetros de compactação, descrevemos aqui as etapas exatas para gerar as imagens da galeria.
Ferramentas
Para compactação PNG, o melhor resultado de pngcrush 1.8.13 e 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 camada "sem perdas" na ferramenta cwebp para converter PNG em WebP- sem perdas. Para ter o mínimo de saída, a linha de comando exata usada foi da seguinte forma:
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
Renderizar o WebP sem perda
Convertemos imagens sem perda de WebP de volta para PNG usando a ferramenta dwebp para renderização. A linha de comando exata foi a seguinte:
dwebp webp_lossless.webp -o output.png
Compactação para WebP sem perda (com Alfa)
Usamos a ferramenta cwebp para converter PNG em WebP sem perda (com Alfa). Selecionamos Qualidade WebP de 90 (compactação com perda) e qualidade alfa de 100 (sem perdas) compactação). A linha de comando exata foi a seguinte:
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
Renderizar a perda de WebP (com Alfa)
Convertemos as imagens com perda de WebP (com alfa) de volta para PNG usando a ferramenta dwebp para renderização. A linha de comando exata foi a seguinte:
dwebp webp_alpha.webp -o output.png