Se o site parece lento, verifique primeiro a imagem de capa e as demais fotos do artigo. Imagens costumam ser os arquivos mais pesados da página, por isso são um dos primeiros pontos a analisar e otimizar.
O WebP ajuda a reduzir o tamanho das fotos sem exigir ferramentas complexas. Arquivos menores carregam mais rápido e reduzem o risco de abandono da página.
A documentação do WebP do Google cita uma economia típica de cerca de 25% a 34% em relação ao JPEG com qualidade semelhante, além do suporte a transparência, recurso antes associado ao PNG. O Can I use mostra que os navegadores atuais já aceitam o formato, por isso o antigo problema de compatibilidade praticamente desapareceu.
A velocidade é o principal motivo para usar o formato. O artigo do web.dev sobre desempenho e o relatório de peso de página do HTTP Archive mostram que imagens representam grande parte dos dados transferidos, e o tamanho desses arquivos influencia a permanência de usuários no celular.
Por que o arquivo precisa ser menor
Cerca de metade das visitas no celular é abandonada quando a página leva mais de 3 segundos para carregar, e imagens pesadas consomem boa parte desse tempo. Cada foto precisa ser transferida pela conexão móvel do visitante, e um arquivo de 2 MB pode manter a página carregando até que a pessoa desista e volte.
O que o WebP entrega
Fotos típicas caem mais ou menos 25% a 35% menores em WebP do que num JPG de aparência parecida. WebP também aceita transparência, então pode substituir muitos PNGs por uma fração do peso, e um formato cobrindo os dois trabalhos deixa o site simples. Suporte de navegador parou de ser preocupação de verdade há anos: navegadores atuais em celular e desktop mostram WebP sem reclamar.
A economia também se acumula. Uma foto encolhendo um terço é um ganho modesto, mas página raramente carrega uma foto só. Um cabeçalho, seis imagens de artigo, uma fileira de miniaturas e uma foto de autor: corte um terço de cada uma e a página inteira começa a carregar enquanto o visitante ainda decide se vai embora. Essa é a diferença entre “na hora” e “ainda carregando... ainda carregando... pronto, eu saí.”
Redimensione, depois converta
O formato resolve apenas parte do tamanho do arquivo; a quantidade de pixels também importa. Uma foto de celular pode ter cerca de 4000 pixels de largura, enquanto uma coluna de blog exibe aproximadamente 800. Se você envia o original, o navegador transfere dados que serão descartados na exibição. Use estas referências aproximadas:
1. Imagem de capa em largura total: 1600 a 2000 pixels de largura bastam para a maior parte das telas.
2. Imagens de conteúdo dentro de uma coluna de artigo: por volta de 1200 pixels de largura, muitas vezes menos.
3. Cartão, avatar, miniatura: 400 a 600 pixels de largura.
Depois de redimensionar e converter, uma imagem de conteúdo abaixo de 200 KB costuma ser adequada. Uma capa pode justificar um arquivo maior, mas acima de 500 KB vale verificar se ele pode ser reduzido.
O fluxo
1. Guarde a foto original num lugar seguro como cópia mestre.
2. Redimensione a imagem até o maior tamanho que o layout de fato vai mostrar.
3. Converta e encolha com Otimizar para web, depois envie esse arquivo, não o original.
4. Suba o arquivo otimizado no site, não o original.
5. Abra a página no ar no celular, em dados móveis se puder. Esse é o único teste que conta.
Quando o WebP é a resposta errada
1. Anexo de e-mail para pessoas com diferentes níveis de familiaridade com tecnologia: envie JPG, que tem ampla compatibilidade.
2. Formulário de envio que lista só JPG ou PNG: obedeça o formulário, porque brigar com ele gasta uma tarde.
3. Arquivo a caminho de impressão: gráfica quer JPG ou PNG em resolução cheia, não um arquivo otimizado para web.
4. Foto indo direto para app de rede social: essas plataformas compactam de novo de qualquer jeito, então um JPG bom resolve e pula a pergunta de compatibilidade.
Uma checagem prática antes de converter a biblioteca inteira de mídia: confirme se a plataforma do site aceita envio em WebP. A maior parte das modernas aceita, mas um tema teimoso ou um plugin antigo às vezes reclama, e é melhor descobrir com uma imagem de teste do que com cinquenta.
O WebP não corrige uma imagem que já foi comprimida em excesso. Se o original tiver manchas e artefatos, o novo formato apenas preservará esses defeitos em um arquivo menor. Comece pela melhor versão disponível e reduza também as dimensões, em vez de converter uma foto com 4000 pixels sem redimensioná-la.
Depois de publicar
Abro a página no celular, desligo o Wi-Fi e observo o carregamento. Se a capa continuar cinza depois da primeira frase, o arquivo ainda está pesado demais. Uma única foto muito grande pode comprometer o restante da otimização.
Também ordeno a pasta de mídia por tamanho. Os maiores arquivos costumam ser originais antigos enviados sem otimização, e substituir essas imagens produz mais resultado do que converter miniaturas que já são pequenas.
Se o CMS reescreve o envio e eu não vejo o peso ao vivo, eu baixo o que a página de fato serve e olho aquele arquivo, não o que está no meu disco. O navegador não se importa com o que eu quis enviar.
O que fica em JPG
E-mail ainda leva JPG. Já mandei WebP para uma pessoa que abriu num aparelho antigo e respondeu que a foto estava quebrada, e eu não preciso dessa conversa: o site pode ser moderno, mas o anexo pode ser chato.
Para a gráfica, envio JPG ou PNG em resolução máxima, porque um WebP otimizado para web foi preparado apenas para tela. Guardo o original e crio uma cópia específica para impressão.
App de rede social leva um JPG decente na maior parte das vezes, e vai compactar de novo, não importa o que eu envie. Brigar com isso usando um formato especial é hobby, então eu corto na caixa certa, mantenho o arquivo abaixo de uns dois megabytes e sigo.
É nos sites que o WebP oferece mais vantagens. Como controlo as páginas que publico e uma imagem de capa pesada pode afastar leitores, converto os arquivos usados nesse contexto, não todo o meu acervo.
Redimensione até a largura exibida pelo layout, converta e abra a página publicada no celular, de preferência em dados móveis. Trocar o formato sem reduzir uma imagem de 4000 pixels resolve apenas parte do problema.