Seu site mais rápido com imagens no formato WebP

E aí turma, o assunto de hoje é otimização de sites utilizando formatos de imagens modernos. Vale sempre lembrar que um site rápido significa menos perda de visitantes, mais visibilidade nos buscadores e com isso, mais conversões.

A otimização técnica de um site é composta por diversos itens e um deles, talvez o mais importante, é relacionado com as imagens, pois elas representam 60% do tamanho total de uma página, sendo assim, vamos otimizar!

Se preferir, acesse o tutorial em vídeo: Seu site mais rápido com imagens no formato WebP. Aproveite para se inscrever no canal e ficar por dentro das novidades em vídeo.

Imagens em formatos de última geração

Se você está acostumado a colocar no seu site imagens em formatos JPEG ou PNG, com certeza faz como a grande maioria, pois são os formatos mais populares.

Quer continuar usando JPEG ou PNG? Pode continuar, não tem problema, talvez até deva, na sequência explico o motivo, mas não se esqueça de otimizar essas imagens para chegar no menor tamanho possível, mantendo a qualidade. Existem diversas formas de fazer isso, desde o Photoshop até ferramentas que automatizam o processo, que podem ser usadas manualmente ou configuradas no servidor ou CDN.

Acontece que hoje temos diversas alternativas aos tradicionais JPEG e PNG, com reduções consideráveis no tamanho final dos arquivos e sem perder qualidade. Os mais comuns hoje são SVG, JPEG 2000, JPEG XR e WebP.

O grande problema de usar os formatos modernos é ainda a compatibilidade, ou seja, pode funcionar no Chrome e no Firefox não, mas existem diversas formas de contornar isso e deixar seu site otimizado.

Otimizando com imagens WebP

O WebP (pode dizer Weppy) é um formato otimizado de imagem desenvolvido pelo Google com o objetivo de reduzir em até 39% o tamanho final dos arquivos.

Atualmente, o formato WebP é compatível com Edge 18, Firefox 65 (Previsão), Chrome 23+, Opera 56, entre outros como na imagem a seguir, o que já é ótimo, e tudo está encaminhando para em breve ter suporte em todos os navegadores.

Mas como usar sem se preocupar com compatibilidade? É possível criar regras com JavaScript, usando o Modernizr, por exemplo, mas neste post vou focar na utilização da tag HTML5 Picture, que permite informar para o navegador diversas versões de um arquivo de imagem, e assim ele irá renderizar o que reconhecer.

Gostando do conteúdo? Acesse as versões completas em texto e vídeo:
Texto: Seu site mais rápido com imagens no formato WebP
Vídeo: Seu site mais rápido com imagens no formato WebP