Como usar formatos de imagem modernos (WebP/AVIF) para acelerar o carregamento do site

Como usar formatos de imagem modernos (WebP/AVIF) para acelerar o carregamento do site

Olá, querido(a) cliente da GeHost! 🌟

Seja bem-vindo(a) ao nosso guia de Desempenho & CDN, onde vamos transformar suas imagens em verdadeiros super-heróis do carregamento do seu site. Vamos aprender juntos como usar formatos modernos como WebP e AVIF — tecnologias que reduzem o tamanho das imagens sem perder qualidade, deixando seu site mais rápido e leve. É como trocar um ônibus velho por um carro elétrico: mesmo trajeto, mas com muito mais agilidade!

Por que usar WebP e AVIF?

Imagine duas versões da mesma foto:

• Uma em JPG ou PNG — tradicional, mas pesada.
• Outra em WebP ou AVIF — mesma imagem, mas com até 50% menos tamanho!

Isso significa que seu site carrega mais rápido, seu visitante não espera, e seu Google (sim, o famoso buscador) fica feliz com a experiência — o que melhora seu ranqueamento.

Dica da Sensei: WebP é amplamente compatível com navegadores modernos. AVIF é ainda mais eficiente, mas ainda está em crescimento. Use WebP para garantir compatibilidade total.

Passo a passo: como converter e usar esses formatos no seu site

1. Prepare suas imagens
   Antes de tudo, você precisa converter suas imagens JPG, PNG ou GIF para WebP ou AVIF. Você pode usar ferramentas gratuitas como:
   • CloudConvert (online)
   • Squash (online)
   • Aplicativos como Photoshop, GIMP ou até o Windows Foto (em versões recentes).

   Escolha o formato que mais combina com seu público. WebP é a aposta mais segura.

2. Envie as imagens convertidas para o seu site
   Acesse o Gerenciador de Arquivos do cPanel — a porta de entrada para seu site.

   Navegue até a pasta onde suas imagens estão (geralmente public_html ou uma subpasta como imagens/).

   Substitua as imagens antigas (JPG/PNG) pelas novas (WebP/AVIF), ou armazene-as em uma pasta separada.

3. Atualize os links no código do seu site
   Se você tem um site com HTML, PHP ou CMS (como WordPress), é essencial que os links das imagens apontem para o novo formato.

   Exemplo de código antigo:

   <img src="foto.jpg" alt="minha foto" />

   Exemplo atualizado:

   <img src="foto.webp" alt="minha foto" />

   Se estiver usando um sistema como WordPress, existem plugins que fazem essa conversão automaticamente. Consulte seu tema ou plugin de otimização.

4. Use o fallback para navegadores antigos
   Nem todos os navegadores suportam WebP ou AVIF. Para não deixar imagens sem carregar, use o elemento <picture> no HTML:

   <picture>
     <source srcset="foto.avif" type="image/avif">
     <source srcset="foto.webp" type="image/webp">
     <img src="foto.jpg" alt="minha foto" />
   </picture>
       

   Esse código diz ao navegador: “Tente o AVIF primeiro, se não der, use WebP. Se nem isso funcionar, use o JPG padrão.” É como ter um plano B sempre pronto!

5. Ative o cache e CDN (opcional, mas recomendado)
   Se seu plano inclui CDN (Rede de Entrega de Conteúdo), ative-o no painel do cliente. Ele armazena suas imagens em servidores próximos ao visitante, tornando o carregamento ainda mais rápido.

   Para verificar se seu plano tem CDN, acesse o painel do cliente e confira as funcionalidades do seu plano.

Como saber se está funcionando?

Use ferramentas gratuitas como:

• WebPageTest.org — testa o tempo de carregamento do seu site.
• PageSpeed Insights — mostra dicas de otimização do Google.

Se o relatório mostrar que suas imagens estão sendo carregadas em WebP/AVIF, parabéns! Você está no caminho certo. 🎉

Curiosidade da Sensei: O WebP foi criado pelo Google e já é suportado por 98% dos navegadores modernos. Isso quer dizer que mais da metade dos usuários do mundo já pode aproveitar esse formato — e você está à frente!

Importante: cuidado com o nome do arquivo

Seu site só entende o formato se o nome do arquivo tiver a extensão correta. Exemplo:

• ✅ foto.webp — correto
• ❌ foto.jpg.webp — confuso e não funciona

Seu servidor não vai adivinhar — ele segue o que está escrito no código.

Próximos passos

Se precisar de ajuda com a conversão de imagens, com o código HTML ou com o painel do cliente, não hesite em entrar em contato com nosso suporte. Estamos aqui para ajudar, com carinho e dedicação — como um verdadeiro parceiro de jornada.

Seu site está no caminho certo. Agora é só acelerar com WebP e AVIF! 🚀

Com carinho,
Sensei da GeHost
Grupo: G e Soluções e Eventos LTDA (CNPJ: 46.647.904/0001-04)