Convertendo imagens para WEBP com Photoshop
- Baixar o plugin: WebPShop.8bi
- [Documentação WEBP do Google][link1]
- [Baixar projeto no Github][link2]
- Inserir o arquivo
WebPShop.8bi no pasta Plugins do Photoshop - Ex:
Photoshop18\\App\\Ps\\Plug-ins
- Para exportar a imagem como WEBP basta clicar em
Save As e selecionar o tipo: WEBP
Usando imagens WEBP no HTML
<picture>
<source type="image/webp" srcset="flower.webp" />
<source type="image/jpeg" srcset="flower.jpg" />
<img src="flower.jpg" alt="" />
</picture>
WebP em imagens no background CSS
background: url("../assets/images/bg-info.jpg");
background: -webkit-image-set(url("../assets/images/bg-info.webp") 1x) no-repeat;
Referencias
