Estudo do formato de imagem WebP do Google

[Bitetti]

Ao ver um site usando largamente esse formato ( e descobrindo q o meu Linux ainda n abre ele) resolvi estudar mais a fundo.
Ps.: Dê uma forcinha p meu blog compartilhando o link deste artigo http://bit.ly/14iMQAR

Esse formato de imagem promete diminuir em até 50% a velocidade de carga de páginas, mas ainda não se popularizou e tão pouco parece ter chegado ao nível de usuário final. Mas já esta aparecendo sites com suporte a WebP. Então resolvi estuda-la mais a fundo.

O WebP promete usar o melhor dos já conhecidos formatos PNG e JPEG e ainda acrescenta algumas coisas novas. São tantas que dá caimbra no cérebro de pensar, mas em termos leigos: A compressão de imagem ficou muito mais inteligente, com algorítimos (técnicas) ninjas.

Aqui esta uma tabela com experimentos. A esquerda esta a imagem obtida e a direita as informações sobre a mesma, que são a forma de obtenção, o tamanho em bytes (quanto menor melhor) e dados mais abrangentes.
Nota: Não se preocupe com o código que aparece na forma de obtenção, explicarei isto mais abaixo.

PNG Original feito no GIMP
13.602bytes.
Imagem com todas as cores possíveis 24-bit + aplha.
Sem compressão esta imagem teria 295.936 bytes.

simples jpeg
11.281 bytes.
Versão JPEG da imagem acima para comparação de tamanho.


11.038 bytes.
Imagem com canal alpha limpo ( descarta informação de cor onde é transparente);
LossLess – A compressão é sem perda de dados;

Código: Selecionar todos

cwebp -alpha_cleanup -alpha_filter best -lossless calibri_gimp_alpha.png -o calibri_gimp_alpha.lossless.webp

4.288 bytes.
Imagem com canal alpha limpo ( descarta informação de cor onde é transparente);
A compressão tem uma perda de informação para reduzir o tamanho;

Código: Selecionar todos

cwebp -alpha_cleanup -alpha_filter best calibri_gimp_alpha.png -o calibri_gimp_alpha.webp

8.670 bytes.
Imagem sem canal alpha (opaca, bom para fotos);
LossLess – A compressão é sem perda de dados;

Código: Selecionar todos

cwebp -noalpha -lossless calibri_gimp_alpha.png -o calibri_gimp_noalpha.lossless.webp

2.534 bytes.
Imagem sem canal alpha (opaca, bom para fotos);
A compressão tem uma perda de informação para reduzir o tamanho;

Código: Selecionar todos

cwebp -noalpha calibri_gimp_alpha.png -o calibri_gimp_noalpha.webp

Exemplo de uso real

153.960 bytes.
Essa imagem é um tipico uso real, um elemento de página que se mistura ao fundo. Possui uma grande variação de tons para ser bem realista, oque gera arquivos maiores.

simples jpeg
34.958 bytes.
Versão JPEG da imagem acima para comparação de tamanho.


105.514 bytes.
Imagem com canal alpha limpo ( descarta informação de cor onde é transparente);
LossLess – A compressão é sem perda de dados;

Código: Selecionar todos

cwebp -alpha_cleanup -alpha_filter best -lossless calibri_g.png -o calibri_g.lossless.webp

24.086 bytes.
Imagem com canal alpha limpo ( descarta informação de cor onde é transparente);
A compressão tem uma perda de informação para reduzir o tamanho;

Código: Selecionar todos

cwebp -alpha_cleanup -alpha_filter best calibri_g.png -o calibri_g.webp

Conclusão

Altamente recomendado, só que não podemos usa-lo em massa ainda.

A mistura do JPEG com o PNG é um sonho que antes só era possível com o uso do Flash e o formato WebP ainda apresenta uns outros recursos interessantes. Senso franco não aposto todas as fichas que isto irá aumentar tanto a velocidade da Internet, se compararmos com a tecnologia atual temos o problema real de que muitas, mas muitas, pessoas não exploram os recursos dos formatos que temos para reduzir seu tamanho, então não vejo porque isto não vá ocorrer também com o WebP que ainda por cima tem muito mais recursos (e os usuários costumam ter uma fobia de ver e mexer em opções de configuração).

Não temos como prever a demanda. Atualmente apenas o Google Chrome suporta o formato. Ele ainda não é reconhecido nem pelas distribuições Linux, onde essas inovações são testadas inicialmente. Então por enquanto se você quer usar este formato lembre-se de ter alternativas para os navegadores diferentes.


Instalação

Para quem quer testa recomendo baixar o executável de linha de comando. Os plugins que achei estão muito desatualizados, mas deixarei o link para download:

Plugin para GIMP
Plugin para Photoshop

Agora o método de instalação do conversor da própria Google:

Baixe o arquivo para seu sistema aqui;

Extraia os arquivos em alguma pasta;

No Linux entre nela (na pasta) pelo shell e digite:

Código: Selecionar todos

chmod +x cwebp
chmod +x dwebp
sudo mv cwebp /usr/bin
sudo mv dwebp /usr/bin

No Windows mova os arquivos cwebp.exe e dwebp.exe para a pasta C:\Windows\system32;

Pronto, ao executar um terminal você pode usar os comandos disponíveis no cwebp.

Há alguns exemplos de uso na tabela de imagens acima, por exemplo:

Código: Selecionar todos

cwebp -alpha_cleanup -alpha_filter best calibri_gimp_alpha.png -o calibri_gimp_alpha.webp

Edit: Sei q não dá p ver algumas coisas por causa do fundo branco, lá no blog há um fundo colorido para se perceber o alpha.

[abdo]

Interessante, porem é como voce diz, por enquanto só o chrome/chromiun abre as imagens .webp abri o forum inicialmente no qupzilla e depois tive que ir ao chromiun ver as imagens...
Acho que o formato só se populariza depois que os principais navegadores derem suporte ao mesmo...
pois é dificil você fazer um site com imagens que não irão abrir... já basta os flash da vida...

[Exploit]

no chromium funciona..

mas nunca tinha ouvido falar sobre esse formato.. parece interessante..

[Claudio Novais]

Infelizmente no Firefox não funciona.

Em todo o caso, parece-me algo com muito potencial tanto por esses testes apresentados como pelo facto de ter uma licença aberta, BSD, o que significa que os browsers terão a vida bastante facilitada.

Vida longa para a Google e seus projetos para a humanidade!