Bem-vindo: Qui, 28 de Março 2024, 12:53 Pesquisa avançada

Estudo do formato de imagem WebP do Google

Você fez algum desenho e quer partilhar? Faça-o aqui! Partilhe Wallpapers, trabalhos de Webdisgn ou até mockups!
Se quiser partilhe também tutoriais de design: do Gimp, Inkscape entre outros programas.

Estudo do formato de imagem WebP do Google

Mensagempor Bitetti » Qua, 7 de Agosto 2013, 14:18

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 :yeah:

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
Imagem 13.602bytes.
Imagem com todas as cores possíveis 24-bit + aplha.
Sem compressão esta imagem teria 295.936 bytes.


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


Imagem 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



Imagem 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



Imagem 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



Imagem 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

Imagem 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
Imagem 34.958 bytes.
Versão JPEG da imagem acima para comparação de tamanho.


Imagem 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



Imagem 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:

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.
Avatar do usuário
Bitetti
 
Mensagens: 875
Registrado em: 03 Janeiro, 2012
Localização: São Paulo

Re: Estudo do formato de imagem WebP do Google

Mensagempor abdo » Qua, 7 de Agosto 2013, 17:25

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...
/+/ Não digo que sou um Vascaíno doente, pois doente é quem não é Vascaíno /+/
Carlos Drummond de Andrade. Vascainos sempre em boa cia...
Club de Regatas Vasco da Gama

Imagem
Avatar do usuário
abdo
 
Mensagens: 696
Registrado em: 08 Abril, 2012
Localização: João Pessoa - PB- Brasil

Re: Estudo do formato de imagem WebP do Google

Mensagempor Exploit » Sex, 16 de Agosto 2013, 4:02

no chromium funciona.. :rox:

mas nunca tinha ouvido falar sobre esse formato.. parece interessante..
Avatar do usuário
Exploit
 
Mensagens: 1297
Registrado em: 31 Agosto, 2011

Re: Estudo do formato de imagem WebP do Google

Mensagempor Claudio Novais » Sex, 16 de Agosto 2013, 18:02

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!
Avatar do usuário
Claudio Novais
Editor do Ubuntued
 
Mensagens: 16869
Registrado em: 25 Maio, 2011


Voltar para Design

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 24 visitantes

cron