O formato de imagem WebP

Hoje, vamos fazer um curso rápido sobre o formato de imagem WebP. Se você ainda não ouviu falar dele, o WebP é um formato de imagem que oferece excelente compressão em comparação com formatos mais pesados, como JPG ou PNG. Você obtém arquivos menores sem sacrificar a qualidade, além de suportar compressão com perdas (lossy) e sem perdas (lossless), animação e transparência.

Criar uma imagem WebP é tão simples quanto usar a ferramenta gratuita cwebp do Google para converter suas imagens existentes ou ativar o WebP por meio de serviços como o Cloudflare. Para fazer isso, faça login na sua conta do Cloudflare, navegue até Speed > Optimization e ative o Polish com a opção WebP marcada.

Para garantir a máxima compatibilidade, você também pode usar o elemento <picture> para fornecer opções de fallback para navegadores mais antigos, como este:

Demonstração de código WebP

Lembre-se de que você pode simplificar ainda mais esse código se o seu público não depender de navegadores mais antigos, algo que você pode verificar nas análises do seu site. O WebP é atualmente suportado em todos os principais navegadores, incluindo Chrome, Firefox, Safari e Edge.

O WebP é uma ferramenta incrível no seu arsenal de desenvolvedor e vale a pena pelos ganhos de velocidade!

Explicação Detalhada

1. O que é o formato WebP?

• Definição: WebP é um formato de imagem desenvolvido pelo Google que oferece compressão avançada para reduzir o tamanho dos arquivos sem perder qualidade.
• Vantagens:
  • Tamanhos menores: Comparado a JPG e PNG, o WebP pode reduzir o tamanho das imagens em até 30%.
  • Suporte a transparência: Semelhante ao PNG.
  • Animações: Semelhante ao GIF, mas com melhor compressão.
  • Compressão com e sem perdas: Escolha entre qualidade máxima ou tamanho mínimo.

2. Como usar o WebP?

• Conversão de imagens:

  • Use a ferramenta cwebp do Google para converter imagens existentes para WebP.
  • Exemplo de comando:

    cwebp input_image.jpg -o output_image.webp
    

• Ativação via Cloudflare:

  • Se você usa o Cloudflare, ative o Polish com a opção WebP:
    1. Faça login na sua conta do Cloudflare.
    2. Navegue até Speed > Optimization.
    3. Ative o Polish e marque a opção WebP.

3. Garantindo compatibilidade

• Uso do elemento <picture>:

  • Para garantir que navegadores mais antigos ainda exibam as imagens, use o elemento <picture> com fallbacks para JPG ou PNG.
  • Exemplo de código:

    <picture>
      <source srcset="imagem.webp" type="image/webp">
      <img src="imagem.jpg" alt="Descrição da imagem">
    </picture>
    

• Verificação de suporte:

  • Verifique as estatísticas do seu site para ver se seus usuários ainda usam navegadores antigos.
  • Se não for o caso, você pode simplificar o código e usar apenas WebP.

4. Suporte do navegador

• Navegadores compatíveis:
  • Chrome, Firefox, Safari, Edge e outros navegadores modernos.
• Navegadores sem suporte:
  • Navegadores muito antigos podem não suportar WebP, daí a importância do fallback.

Organizando como Anotação de Estudo

Aqui está um resumo organizado para você consultar:

Formato de Imagem WebP

O que é?

• Formato de imagem desenvolvido pelo Google com excelente compressão.

Vantagens

• Tamanhos menores em comparação com JPG e PNG.
• Suporte a transparência (como PNG) e animações (como GIF).
• Compressão com perdas (lossy) e sem perdas (lossless).

Como usar?

1. Conversão de imagens:
   • Use a ferramenta cwebp:

     cwebp input_image.jpg -o output_image.webp
     

2. Ativação via Cloudflare:
   • Ative o Polish com a opção WebP em Speed > Optimization.

Garantindo compatibilidade

• Use o elemento <picture> para fallback em navegadores antigos:

  <picture>
    <source srcset="imagem.webp" type="image/webp">
    <img src="imagem.jpg" alt="Descrição da imagem">
  </picture>
  

Suporte do navegador

• Compatível com Chrome, Firefox, Safari, Edge e outros navegadores modernos.
• Verifique as estatísticas do seu site para ver se fallbacks são necessários.

Exemplo de Código

<picture>
  <source srcset="imagem.webp" type="image/webp">
  <img src="imagem.jpg" alt="Descrição da imagem">
</picture>

Próximos Passos

1. Converta suas imagens: Use a ferramenta cwebp para converter imagens existentes.
2. Ative o WebP no Cloudflare: Se você usa Cloudflare, siga os passos para ativar o suporte a WebP.
3. Teste a compatibilidade: Verifique se seus usuários usam navegadores antigos e adicione fallbacks, se necessário.