Performance

Otimização de imagens WordPress: WebP, lazy load e dimensionamento correto

· Rui Pimentel · 11 min de leitura

As imagens representam tipicamente 60-80% do peso total de uma página web. Numa auditoria de performance WordPress, as imagens são quase sempre o item com maior potencial de melhoria imediata. Este guia cobre todas as camadas de optimização de imagens — do formato ao carregamento.

Por que WebP é o formato correto para WordPress hoje

WebP é um formato de imagem desenvolvido pela Google que oferece compressão superior ao JPEG e PNG com qualidade visual semelhante:

  • WebP vs JPEG: redução de 25-35% no tamanho do ficheiro na mesma qualidade visual
  • WebP vs PNG: redução de 26% para imagens sem transparência, até 34% com transparência
  • Suporte de browsers: 97%+ de cobertura global (todos os browsers modernos)

O WordPress 5.8+ suporta WebP nativamente no upload e no editor. Imagens carregadas em WebP são servidas directamente em WebP. O problema é que a maioria das bibliotecas de imagens existentes tem imagens em JPEG ou PNG — é necessário converter.

Converter imagens existentes para WebP

Plugins de conversão automática

  • ShortPixel Image Optimizer: converte para WebP na upload e processa a biblioteca existente. Plano gratuito inclui 100 imagens/mês; planos pagos por volume de imagens. Serve WebP automaticamente para browsers compatíveis com fallback para JPEG.
  • Imagify: alternativa com interface mais simples. 25MB gratuito/mês, planos pagos a partir de 4,99€/mês.
  • Converter for Media: plugin gratuito focado apenas em conversão WebP e AVIF. Sem limites de conversão, faz o processamento no servidor local.

Como o WordPress serve WebP com fallback

Os plugins de optimização usam o elemento <picture> ou o header Accept para servir WebP a browsers que suportam, e JPEG/PNG a browsers mais antigos. Verificar nas DevTools (tab Network) que imagens estão a ser servidas em WebP: a coluna "Type" deve mostrar "webp".

Lazy loading correto em WordPress

Lazy loading adia o carregamento de imagens fora do viewport — o browser só carrega as imagens quando o utilizador está prestes a vê-las. O WordPress 5.5+ adiciona loading="lazy" automaticamente a todas as imagens via a função wp_lazy_loading_enabled().

A excepção crítica: a imagem LCP

A imagem LCP (o maior elemento visual acima do fold) nunca deve ter lazy loading — deve ser carregada o mais cedo possível. O WordPress 6.3+ detecta automaticamente a imagem LCP e remove o lazy loading, mas em versões anteriores é necessário garantir que a imagem hero ou de destaque não tem loading="lazy".

Para a imagem LCP, usar preload no <head>:

<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high">

Dimensionamento correto com srcset

Servir uma imagem de 1920px de largura num thumbnail de 300px desperdiça dados do utilizador e aumenta o LCP. O WordPress gera automaticamente múltiplos tamanhos de imagem (thumbnail, medium, large, full) e usa o atributo srcset para que o browser escolha o tamanho mais adequado ao ecrã.

Verificar que os tamanhos de imagem estão bem configurados em Definições > Media. Para temas que usam imagens em contextos específicos (hero fullwidth, cards de portfolio), registar tamanhos customizados no functions.php:

add_image_size('hero-desktop', 1920, 800, true);
add_image_size('card-thumbnail', 600, 400, true);

Após adicionar tamanhos customizados em sites existentes, regenerar thumbnails com o plugin Regenerate Thumbnails ou via WP-CLI:

wp media regenerate --all

Dimensões explícitas para eliminar CLS

Imagens sem atributos width e height causam Cumulative Layout Shift — o browser não sabe quanto espaço reservar antes de a imagem carregar. O WordPress adiciona dimensões automaticamente a imagens inseridas pelo editor, mas imagens em código de tema ou em builders podem não ter esta protecção.

Verificar com PageSpeed Insights na secção "Image elements do not have explicit width and height". Resolver adicionando os atributos width e height a cada imagem problemática.

Imagens de fundo CSS vs elemento img

Imagens críticas (como heroes) devem usar o elemento <img> em vez de background-image CSS — o browser prioriza imagens img no carregamento e suporta srcset/sizes. Imagens decorativas ou que mudam com media queries são casos legítimos para background-image.

Sites dos seus clientes com imagens não optimizadas?

O nosso serviço de manutenção WordPress inclui auditoria e optimização de imagens como parte da manutenção de performance mensal.

Optimizar imagens WordPress