Como otimizar imagens para o WordPress

Imagens são quase sempre a parte mais pesada de qualquer página WordPress. Em um site típico, as imagens representam 50-80% do peso total da página, e não é incomum ver uma única imagem hero não otimizada que pesa mais do que todo o HTML, CSS e JavaScript combinados. Se seu site parece lento, as imagens são a primeira coisa a observar. A boa notícia é que a otimização de imagens oferece alguns dos maiores e mais simples ganhos de desempenho que você pode alcançar.

Por que as imagens são o maior fator de peso da página

Uma câmera de smartphone moderna produz fotos que pesam de 3 a 8 MB cada. Se você fizer upload delas diretamente para o WordPress sem nenhum processamento, é isso que seus visitantes terão que baixar. Multiplique por 5-10 imagens em uma página, e você está olhando para 30-80 MB de dados de imagem, o que é suficiente para fazer até conexões rápidas parecerem lentas.

O peso da página afeta diretamente o tempo de carregamento, que afeta a experiência do usuário e o SEO. O Google usa a velocidade da página como fator de classificação, e o Core Web Vitals (especialmente o Largest Contentful Paint) é fortemente influenciado pelo tamanho das imagens. Cada kilobyte que você economiza em suas imagens se traduz em tempos de carregamento mais rápidos, taxas de rejeição mais baixas e melhores classificações de busca.

Escolhendo o formato de imagem certo

O formato escolhido para cada imagem pode fazer uma diferença drástica no tamanho do arquivo. Aqui está quando usar cada formato:

• WebP: O melhor formato de uso geral para imagens da web hoje. O WebP entrega arquivos 25-35% menores do que JPEG na mesma qualidade visual e suporta compressão com e sem perdas, bem como transparência. Todos os navegadores modernos suportam WebP (Chrome, Firefox, Safari 14+, Edge). A menos que você precise oferecer suporte a navegadores muito antigos, o WebP deve ser sua escolha padrão.
• AVIF: O formato mais novo, oferecendo arquivos 20-30% menores do que WebP. O AVIF produz excelentes resultados em configurações de baixa qualidade, tornando-o ideal para imagens hero grandes em que cada kilobyte conta. O suporte do navegador está crescendo (Chrome, Firefox, Safari 16.4+), mas a codificação é mais lenta do que WebP. Use-o onde a compressão máxima importa e você pode arcar com o tempo de codificação.
• JPEG: Ainda o formato mais amplamente suportado e uma escolha sólida para fotografias. Use configurações de qualidade entre 80-85% para um bom equilíbrio entre tamanho de arquivo e qualidade visual. Abaixo de 75%, os artefatos de compressão tornam-se perceptíveis. Acima de 90%, a melhoria de qualidade é dificilmente visível, mas o aumento no tamanho do arquivo é significativo.
• PNG: Use PNG apenas quando precisar de transparência (logotipos, ícones com fundo transparente) ou reprodução pixel-perfeita (capturas de tela, diagramas). Arquivos PNG são tipicamente 3-5x maiores do que JPEG/WebP para conteúdo fotográfico. Se você precisa de transparência e tamanhos menores, considere WebP com canal alpha em vez disso.
• SVG: Perfeito para logotipos, ícones e ilustrações simples. SVGs são baseados em vetores, então escalam para qualquer tamanho sem perda de qualidade e tipicamente pesam apenas alguns kilobytes. Também são estilizáveis com CSS. Não use SVG para fotografias.

Entendendo a compressão de imagens: com perdas vs. sem perdas

Existem dois tipos fundamentais de compressão, e entender a diferença ajuda a tomar melhores decisões de otimização:

Compressão com perdas remove dados de imagem que são menos perceptíveis ao olho humano. Isso atinge taxas de compressão muito maiores (frequentemente redução de 70-90% no tamanho do arquivo), mas o processo é irreversível. Você não pode recuperar a qualidade original. Para imagens da web, a compressão com perdas no nível certo de qualidade é quase sempre a escolha correta, porque a economia no tamanho do arquivo é enorme e a diferença de qualidade é invisível em distâncias de visualização típicas de tela.

Compressão sem perdas reduz o tamanho do arquivo sem descartar nenhum dado. A imagem original pode ser perfeitamente reconstruída. A contrapartida é que a compressão sem perdas tipicamente atinge apenas redução de 10-30% no tamanho do arquivo. Use compressão sem perdas para imagens em que cada pixel importa, como fotografias de produto para visualizações de zoom de e-commerce, imagens médicas ou capturas de tela de texto.

Para a maioria dos sites WordPress, uma configuração de compressão com perdas em qualidade de 80-85% oferece um excelente equilíbrio. Nesse nível, a diferença visual em relação ao original é virtualmente indetectável, mas o tamanho do arquivo é tipicamente 60-75% menor.

Dimensões recomendadas de imagem para o WordPress

Fazer upload de imagens maiores do que precisam ser desperdiça largura de banda e deixa seu site lento. Aqui estão diretrizes práticas para tamanhos comuns de imagens no WordPress:

• Imagens hero de largura total: 1920px de largura é suficiente para a maioria das telas. Ir até 2560px é razoável se você quiser cobrir telas de alta DPI (Retina) em largura total.
• Imagens destacadas de posts de blog: 1200px de largura cobre a maioria dos layouts de tema e fica nítida em telas Retina.
• Imagens de conteúdo dentro dos posts: Combine com a largura da coluna de conteúdo do seu tema. Se sua área de conteúdo tem 800px de largura, faça upload de imagens em 1600px (2x para Retina).
• Miniaturas e imagens de arquivo: 600x400px é um tamanho comum, mas verifique o que seu tema realmente usa.
• Imagens de produtos WooCommerce: 800-1200px no lado mais longo, dependendo se seu tema suporta zoom.

Não há sentido em fazer upload de uma imagem de 6000px quando o maior tamanho em que ela será exibida é 1920px. Redimensione antes de fazer upload, ou use um plugin que redimensione no upload.

Tamanhos de imagem do WordPress e regeneração

Quando você faz upload de uma imagem, o WordPress gera automaticamente vários tamanhos: thumbnail (150x150), medium (300x300), medium_large (768px de largura) e large (1024x1024). Seu tema e plugins podem registrar tamanhos adicionais.

Você pode visualizar e ajustar os tamanhos padrão em Configurações, depois Mídia. Se alterar essas dimensões após fazer upload de imagens, as miniaturas existentes não serão atualizadas automaticamente. É preciso regenerá-las usando um plugin como Regenerate Thumbnails ou via WP-CLI:

# Regerar todas as miniaturas
wp media regenerate --yes

# Regerar miniaturas para uma imagem específica
wp media regenerate 42

Se seu tema registra tamanhos personalizados de imagem que você raramente usa, esses tamanhos desnecessários desperdiçam espaço em disco e tempo de processamento a cada upload. Você pode usar o plugin Stop Generating Unnecessary Thumbnails para desativar tamanhos que não precisa.

Plugins de otimização de imagem

A maneira mais fácil de otimizar imagens no WordPress é com um plugin dedicado que comprime imagens automaticamente quando você faz upload delas. Aqui estão as opções mais populares:

• ShortPixel Image Optimizer: Oferece modos de compressão com perdas, glossy e sem perdas. Inclui conversão para WebP e AVIF. Funciona via uma API em nuvem, então não sobrecarrega seu servidor. O plano gratuito inclui 100 créditos por mês (um crédito por tamanho de imagem gerado). O modo glossy é especialmente bom, pois oferece qualidade visual quase sem perdas em tamanhos de arquivo de compressão com perdas.
• Imagify: Construído pela mesma equipe por trás do WP Rocket. Oferece modos Normal (sem perdas), Aggressive (com perdas) e Ultra (compressão máxima). Inclui conversão para WebP e uma ferramenta de otimização em massa. A interface é limpa e fácil de entender. O plano gratuito inclui 20 MB por mês.
• Smush: Opção gratuita popular que oferece compressão sem perdas sem limite mensal. A versão gratuita comprime imagens de até 5 MB e lida com otimização em massa de até 50 imagens por vez. A versão Pro adiciona compressão com perdas, conversão para WebP e entrega via CDN.
• EWWW Image Optimizer: Único por poder executar a compressão localmente em seu servidor sem uma API externa. Boa escolha para sites com preocupações de privacidade ou alto volume. Suporta conversão para WebP, lazy loading e redimensionamento automático de imagens. O modo baseado em API oferece melhores taxas de compressão.

Todos esses plugins também podem otimizar imagens que foram enviadas antes do plugin ser instalado. Procure pelo recurso "bulk optimize" para processar sua biblioteca de mídia existente.

Convertendo imagens para WebP

Se você ainda está servindo arquivos JPEG e PNG, converter para WebP é uma das vitórias mais fáceis. A maioria dos plugins de otimização de imagens inclui a conversão para WebP como recurso integrado. Eles geram uma versão WebP junto com a original e a servem para navegadores que a suportam.

Para conversão manual de WebP, você pode usar ferramentas de linha de comando:

# Converter uma única imagem para WebP
cwebp -q 80 input.jpg -o output.webp

# Converter em massa todos os JPEGs em um diretório
for file in *.jpg; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done

Para servir imagens WebP a navegadores compatíveis enquanto recorre a JPEG/PNG para navegadores mais antigos, você pode adicionar o seguinte ao seu arquivo .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+).(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

Lazy loading de imagens no WordPress

O lazy loading atrasa o carregamento de imagens que não estão visíveis na viewport do navegador. Em vez de baixar todas as imagens quando a página carrega pela primeira vez, o navegador só busca imagens à medida que o usuário rola até elas. Isso pode reduzir drasticamente o tempo inicial de carregamento da página, especialmente em páginas com muitas imagens.

Desde o WordPress 5.5, a plataforma adiciona loading="lazy" às imagens automaticamente. Esse lazy loading nativo no nível do navegador é suportado por todos os navegadores modernos e não requer JavaScript.

Há algumas coisas importantes a se ter em mente:

• Não faça lazy load em imagens above-the-fold: Sua imagem hero, logotipo e qualquer imagem visível sem rolagem devem carregar imediatamente. Aplicar lazy loading a elas, na verdade, prejudica o desempenho, pois o navegador atrasa o carregamento de conteúdo que o usuário já consegue ver. Desde o WordPress 5.9, a plataforma pula automaticamente o lazy loading na primeira imagem da página.
• Use fetchpriority="high" para imagens hero: Adicionar fetchpriority="high" à sua imagem above-the-fold mais importante diz ao navegador para priorizar o download dela. Isso pode melhorar significativamente as pontuações de Largest Contentful Paint.
• Verifique se seu tema não remove o lazy loading: Alguns temas mais antigos ou page builders removem o atributo loading. Verifique o código-fonte da sua página para confirmar que ele está presente.

Imagens responsivas com srcset

O WordPress gera automaticamente os atributos srcset e sizes para imagens adicionadas pelo editor de conteúdo. Esses atributos dizem ao navegador qual tamanho de imagem baixar com base na largura da viewport, então um usuário móvel baixa uma imagem menor do que um usuário de desktop.

Certifique-se de que seu tema não substitua esse comportamento. Uma tag de imagem responsiva configurada corretamente fica assim:

<img src="photo-1024.jpg"
     srcset="photo-300.jpg 300w, photo-768.jpg 768w, photo-1024.jpg 1024w, photo-1536.jpg 1536w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="1024" height="768"
     loading="lazy"
     alt="Um texto alt descritivo" />

Se você adiciona imagens via código personalizado ou page builder, certifique-se de usar wp_get_attachment_image() em vez de escrever manualmente tags <img>. Essa função inclui automaticamente os atributos srcset e sizes.

Usando uma CDN para entrega de imagens

Uma Content Delivery Network (CDN) armazena cópias das suas imagens em servidores ao redor do mundo e as serve a partir do local mais próximo de cada visitante. Isso reduz a latência e acelera a entrega de imagens, especialmente para visitantes distantes do seu servidor de hospedagem.

Opções populares de CDN para imagens WordPress incluem:

• Cloudflare: O plano gratuito inclui uma CDN com cobertura global. O plano Pro adiciona recursos de otimização de imagens como Polish (compressão automática) e conversão para WebP.
• BunnyCDN: Preços acessíveis pay-as-you-go com excelente desempenho. Inclui um recurso de otimização de imagens chamado Bunny Optimizer, que lida com redimensionamento, compressão e conversão para WebP em tempo real.
• KeyCDN: CDN amigável a desenvolvedores com plugins de integração WordPress disponíveis.

A maioria dos plugins de cache (WP Rocket, LiteSpeed Cache, W3 Total Cache) inclui configurações de integração com CDN que tornam a configuração simples.

SEO de imagens: texto alt e nomes de arquivo

A otimização de imagens não se trata apenas do tamanho do arquivo. Práticas adequadas de SEO ajudam suas imagens a aparecerem no Google Imagens, o que pode gerar tráfego significativo:

• Texto alt: Escreva texto alt descritivo para cada imagem. Isso ajuda os mecanismos de busca a entenderem o conteúdo da imagem e é essencial para a acessibilidade (leitores de tela). Mantenha-o conciso, mas descritivo: "Tênis de corrida vermelhos sobre fundo branco" é melhor do que "sapatos" ou "IMG_4532".
• Nomes de arquivo: Renomeie os arquivos de imagem antes de fazer upload. Use nomes descritivos com hífens, como tenis-corrida-vermelhos.jpg, em vez de DSC_0042.jpg. Os mecanismos de busca usam nomes de arquivo como sinal de classificação para a busca de imagens.
• Atributos title: Menos importantes para SEO do que o texto alt, mas úteis para fornecer contexto adicional ao passar o mouse em alguns navegadores.
• Legendas: Legendas de imagem são lidas com mais frequência do que o texto do corpo por muitos visitantes. Use-as quando agregarem valor ao conteúdo.

Verifique a otimização de imagens com o InspectWP

Após otimizar suas imagens, execute uma varredura no InspectWP para verificar os resultados. O InspectWP relata o número total de imagens em sua página e ajuda a identificar como a contagem de imagens e o peso da página se relacionam com suas métricas gerais de desempenho. Use o recurso de relatórios automáticos do InspectWP para monitorar a otimização de imagens ao longo do tempo e detectar quaisquer regressões após atualizações de conteúdo ou alterações de plugins.