Nesse tutorial vamos o formato de imagem webp criado pela Google para otimizar o carregamento de sites e que está sendo cada vez mais aceito, pois reduz demais a quantidade de bytes que utiliza ao servir cada imagem.
Afinal o que é WebP? É um formato de imagem criado para melhor desempenho em carregamento de imagens na web. Como já sabemos, é recorrente no trabalho de vários devs a necessidade de diminuir o peso de imagens e conteúdos diversos carregados nos sites produzidos; A gigante google por ter parte na entrega do site ao usuário final tomou a frente em um projeto que originou esse e outros formatos de imagens, vídeos, arquivos para sua otimização e utilização em sites, plataformas web, jogos, entre outras utilizações; As imagens sem perdas do WebP são 26% menores em tamanho em comparação com os PNGs. Link do projeto google original: https://developers.google.com/speed/webp
Download
Postagem da Adobe divulgando o plugin do google:
https://helpx.adobe.com/pt/photoshop/kb/support-webp-image-format.html
Links para download direto:
Windows(x64):
https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Win_x64.8bi
macOS (extraia o ZIP):
https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Mac_Universal.zip
Após baixar o plugin você precisa colocar ele na pasta certa, no windows é:
disco local (geralmente C: ) / Arquivos de Programas / Adobe / Adobe Photoshop 2022 / Plug-ins
Bem fácil né? Agora meu exemplo é uma imagem PNG de 318kb que irei salvar em webp:
*Obs.: Salvar em formato webp é somente para imagens já prontas, não funciona se tiver em um PSD ou edição de uma imagem… salve a imagem em JPG ou PNG do tamanho final e após abra no PS e salve em .webp.
Abra o arquivo (JPG ou PNG) no photoshop e para salvar no formato webp aperte ( CTRL + s – no windows ) ( CMD + s – macOS ):
Após escolha o formato webp e após salva na qualidade que achar melhor, pois pode ser feito com maior ou menor qualidade, o que irá impactar para o menor peso da imagem:
Meu resultado foi de ( 318kb – PNG ) | ( 17kb – webp ):
