Uma imagem de 5 MB pode demorar mais de 10 segundos para carregar em uma conexão 3G. O visitante não espera. Ele volta para o Google. Otimizar imagens para web é, portanto, uma questão de sobrevivência, não de estética.
Otimizar imagens para web significa entregar o arquivo com o menor peso possível, mantendo a qualidade visual aceitável para o contexto em que ele será exibido. Isso reduz o tempo de carregamento, economiza dados móveis e melhora o ranqueamento no Google, que considera a velocidade da página como fator de classificação. O processo envolve quatro decisões principais: formato, compressão, dimensões e atributos de código.
Neste guia, você verá um método em sete passos, aplicável a qualquer site, independente da plataforma. Nenhuma etapa exige conhecimento avançado. Apenas atenção aos detalhes.
Passo 1: Escolha o formato certo para cada tipo de imagem
O formato define o ponto de partida. Usar o tipo errado pode dobrar o peso do arquivo sem necessidade.
- WebP: melhor opção geral para fotos e ilustrações com gradientes. Oferece compressão superior a JPEG e PNG com qualidade similar. Suporte amplo em navegadores modernos.
- JPEG: adequado para fotografias complexas, quando o WebP não é viável. Compressão com perdas, mas ajustável.
- PNG: reserve para imagens com transparência ou gráficos simples, como logotipos e ícones. Arquivos maiores que JPEG para fotos.
- SVG: ideal para logotipos, ícones e ilustrações vetoriais. Escala sem perda e peso mínimo.
- GIF: evite para fotos. Use apenas para animações simples. Prefira WebP ou vídeo curto (MP4) para animações complexas.
Erro comum: salvar uma captura de tela com texto em JPEG. O resultado é um arquivo grande e com bordas borradas. PNG ou WebP preservam a nitidez do texto.
Passo 2: Comprima as imagens antes de enviar ao site
Compressão é a redução do peso do arquivo por meio de algoritmos. Existem duas abordagens: com perdas (lossy) e sem perdas (lossless).
- Lossy: descarta dados visuais imperceptíveis. Redução de peso maior, mas pode gerar artefatos se exagerar.
- Lossless: mantém todos os dados originais. Redução menor, porém sem perda de qualidade.
A maioria das imagens de sites pode ser comprimida com perdas. O nível de compressão depende do conteúdo. Uma foto de paisagem aceita compressão alta. Um screenshot com texto, não.
Dica prática: use ferramentas como Squoosh (gratuito, do Google) ou TinyPNG. Para WordPress, plugins como ShortPixel ou Smush automatizam o processo.
Erro comum: comprimir uma imagem já comprimida. A segunda compressão raramente reduz o peso e pode degradar a qualidade. Sempre trabalhe com o arquivo original.
Passo 3: Redimensione para o tamanho real de exibição
Uma imagem exibida em 800 pixels de largura não precisa ter 4000 pixels. O navegador baixa o arquivo inteiro antes de redimensioná-lo. Isso desperdiça banda e tempo.
Antes de enviar, verifique a maior largura em que a imagem será exibida no layout. Redimensione para esse valor. Para imagens de fundo em tela cheia, use 1920 pixels ou 2560 pixels para telas retina, se necessário.
Dica prática: no Adobe Photoshop, use "Exportar como" e defina a largura. Em ferramentas online, o resize é automático antes da compressão.
Erro comum: usar o atributo width e height no CSS para reduzir visualmente. O arquivo continua grande e o navegador ainda baixa o peso original. O redimensionamento deve ocorrer no arquivo, não apenas no código.
Passo 4: Use o atributo alt com descrição relevante
O atributo alt tem duas funções: acessibilidade e SEO. Ele descreve a imagem para leitores de tela e fornece contexto ao Google.
Uma descrição adequada deve ser concisa e específica. "Foto de um gato siamês dormindo em um sofá cinza" é melhor que "gato". Evite encher de palavras-chave. O Google penaliza excesso.
Dica prática: se a imagem é decorativa e não agrega informação, use alt vazio (alt=""). Isso evita que leitores de tela leiam descrições inúteis.
Erro comum: deixar o alt vazio em imagens que contêm texto ou informação relevante. Isso prejudica a acessibilidade e o entendimento da página por mecanismos de busca.
Passo 5: Defina as dimensões no código (width e height)
Quando o navegador conhece a largura e altura da imagem antes do carregamento, ele reserva o espaço no layout. Sem isso, a página pula enquanto as imagens carregam, causando CLS (Cumulative Layout Shift), que afeta a experiência do usuário e o ranking.
Adicione os atributos width e height no HTML ou CSS, com valores em pixels ou unidades relativas. Use CSS para responsividade, mas mantenha as dimensões base.
Dica prática: no WordPress, as dimensões são inseridas automaticamente. Em HTML manual, verifique os valores no editor de imagens.
Erro comum: usar apenas width: 100% no CSS, sem height definida. Isso pode distorcer a imagem ou causar saltos no layout.
Passo 6: Ative o carregamento preguiçoso (lazy loading)
O lazy loading adia o carregamento de imagens fora da área visível até que o usuário role a página. Isso reduz o tempo de carregamento inicial.
A maioria dos navegadores suporta o atributo loading="lazy" nativo. Basta adicionar ao HTML. Para imagens acima da dobra, não use lazy loading, pois elas precisam carregar imediatamente.
Dica prática: use loading="lazy" em imagens de artigos, galerias e produtos abaixo da primeira tela. Para a imagem principal do topo, mantenha o carregamento padrão.
Erro comum: aplicar lazy loading em todas as imagens, incluindo a hero. Isso pode atrasar a renderização do conteúdo principal e prejudicar o LCP (Largest Contentful Paint).
Passo 7: Sirva imagens em formato WebP com fallback
O WebP reduz o peso em 25% a 35% em comparação com JPEG, em média, segundo testes do Google. O suporte é universal em navegadores modernos desde 2020.
Para servir WebP, use a tag <picture> com o elemento <source>. O navegador escolhe o formato que suporta. Se não suportar, cai para o JPEG ou PNG.
Dica prática: no WordPress, plugins como WebP Express ou Imagify convertem automaticamente. Para sites estáticos, gere os dois formatos e use o código adequado.
Erro comum: servir apenas WebP, sem fallback. Navegadores antigos ou alguns clientes de e-mail exibem uma imagem quebrada.
Checklist final: revise antes de publicar
- Formato adequado ao tipo de imagem (WebP, JPEG, PNG, SVG)
- Compressão aplicada com nível equilibrado entre peso e qualidade
- Dimensões do arquivo iguais ao tamanho máximo de exibição
- Atributo alt preenchido com descrição relevante (ou vazio para decorativas)
- Atributos width e height definidos no código
- Lazy loading ativado para imagens abaixo da dobra
- WebP servido com fallback para formatos antigos
A ordem dos passos importa. Redimensione antes de comprimir. Comprima antes de enviar. E nunca pule a etapa de verificação visual: amplie a imagem em 100% e compare com o original. Pequenos artefatos podem passar despercebidos, mas a nitidez em textos ou logotipos é crítica.
FAQ
Qual o melhor formato de imagem para web em 2024?
O WebP é a escolha predominante para fotos e ilustrações, com compressão superior e suporte universal. Para logotipos e ícones, o SVG é melhor. O JPEG segue útil como fallback e para casos específicos, como compatibilidade com sistemas legados.
Comprimir imagem reduz a qualidade?
Depende do nível de compressão. Com perdas, há perda de dados, mas ela pode ser imperceptível ao olho humano. O segredo é encontrar o ponto de equilíbrio: reduza o peso até que a qualidade visual comece a incomodar, então volte um nível.
Como saber o tamanho ideal de uma imagem para web?
O tamanho ideal é aquele que corresponde à maior largura em que a imagem será exibida no layout. Para imagens de conteúdo, 800 a 1200 pixels são comuns. Para fundos, 1920 pixels. Verifique no design ou na inspeção do navegador.
O que é lazy loading e quando usar?
Lazy loading adia o carregamento de imagens fora da área visível. Use em imagens abaixo da dobra, em listagens e galerias. Evite na imagem principal do topo, que precisa carregar imediatamente para um bom LCP.
Otimizar imagens ajuda no SEO?
Sim, indiretamente. Páginas mais rápidas tendem a ter melhor experiência do usuário, menor taxa de rejeição e melhor posicionamento. O Google considera a velocidade como fator de ranqueamento, e imagens pesadas são uma das principais causas de lentidão.
Posso otimizar imagens sem perder tempo manualmente?
Sim. Ferramentas como Squoosh e TinyPNG fazem a compressão em segundos. No WordPress, plugins automatizam todo o processo, desde a conversão até o lazy loading. A otimização manual é necessária apenas em casos específicos, como imagens com texto ou ilustrações detalhadas.