Disponibilize imagens em formatos de última geração

Veja neste artigo como resolver o problema no resultado do Google Pagespeed: “Disponibilize imagens em formatos de última geração”

Convertendo imagens para WEBP com Photoshop

• Baixar o plugin: WebPShop.8bi
  • Documentação WEBP do Google
  • Baixar projeto no Github
• 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

• Ole Michelsen