Para uma melhor otimização no tempo de carregamento de suas páginas, uma otima opção é usar o formato WebP para as imagens.

O WebP é um formato de imagem desenvolvido pelo Google que promete reduzir o tamanho do arquivo de imagens em até 39%. Ele usa um método de compressão leve, ou seja, que mantém o máximo de qualidade visível,  e conseguiram chegar a uma compressão de imagem melhor que a do formato jpg.

Pontos positivos

Os pontos positivos do WebP são vários: O formato mantém a qualidade das imagens e diminui o seu tamanho em até 39%, além de ser grátis, ainda da suporte a transparência e animações, como o formato png e gif,tudo isso em uma única extensão.

É otimização garantida no tempo de carregamento e na diminuição dos dados trafegados.

Pontos negativos

Apesar de vários pontos positivos, nem tudo são flores. Não são todos os browsers que dão suporte ao formato WebP.

Atualmente apenas o Google Chrome, Opera, Navegadores nativo do Android, Chrome for Android e Opera Mobile suportam o WebP.

Para superar esse ponto negativo é necessário além de manter a imagem no formato original, sem ser WebP, o uso do plugin Modernizr ou equivalente.

Para usar o WebPnas páginas é necessário primeiramente implementar o Modernizr.

O Modernizr é uma biblioteca JavaScript que tem como principal função detectar as funcionalidades do browser que está renderizando o site. No caso, iremos utiliza-lo para detectar se o browser do usuário é compatível ou não com o WebP.

Abaixo temos uma tag img padrão:

<img src=”rossi.jpg” alt="rossi" title="rossi" width="500" height="400">

Abaixo temos uma tag img de exemplo, utilizando chamadas WebP, repare que retiramos o srce inserimos: data-original, data-webp e a classe img-webp:

<img class="img-webp" data-original=”rossi.jpg” data-webp=”rossi.webp” alt="rossi" title="rossi" width="500" height="400">

Pensando em SEO, não se preocupe com a retirada do src. Os robôs do Google só indexam as páginas depois do JavaScript estar totalmente renderizado.

O código abaixo utiliza o jQuerye o Modernizr para determinar se o browser é ou não compatível com o WebP, ele utiliza como seletor a classe img-webp e insere no src o data-original ou data-webpde acordo com a compatibilidade:

Modernizr.on(‘webp’, function (result) {
if (result) {
$(‘.img-webp’).each(function () {
this.src = $(this).data(‘webp’);
});
} else {
$(‘.img-webp’).each(function () {
this.src = $(this).data(‘original’);
});
}
});

Também é possível utilizar o formato no CSS, o Modernizr insere na tag HTMLas classes webp ou no-webp, utilizando as classes, podemos definir por exemplo uma imagem de fundo:

       .rossi{float: left; width: 500px; height: 400px; margin: 0 10px;}

/* Utiliza a classe webp inserida na tag html pelo Modernizr */
.webp .rossi{background: url(‘../image/rossi.webp’)}

/* Utiliza a classe .no-webp inserida na tag html Modernizr */
.no-webp .rossi{background: url(‘../image/rossi.jpg’)}

Plugins e conversores

Existem diversos plugins WebP tanto para Linux como para Windows.

Também é possível baixar plugins para abrir e salvar imagens WebP no Photoshop.

Conversor online de WebP que recomendado: https://webp-converter.com/