Otimização moderna de media WordPress: WEBP, AVIF e estratégias de performance (2026)

Nos primórdios do WordPress, “otimização” significava instalar um plugin como Smush ou EWWW e esperar pelo melhor.

Em 2026, o cenário mudou. O Core do WordPress suporta WebP e AVIF nativamente. Os browsers padronizaram o lazy loading. Ambientes de alojamento frequentemente incluem compressão ao nível do servidor.

Este guia é para programadores que querem compreender a mecânica nativa do manuseamento de media do WordPress e otimizá-lo sem inchar a sua stack com plugins pesados.

1. Suporte nativo de imagens: WEBP & AVIF

Já lá vão os dias em que precisavas de um plugin para reescrever o teu HTML para servir .webp.

WEBP (suportado desde wp 5.8)

O WordPress cria sub-tamanhos WebP por defeito se a biblioteca ImageMagick do teu servidor o suportar.

AVIF (suportado desde wp 6.5)

O AVIF oferece uma compressão ainda melhor que o WebP. Para priorizar o AVIF, simplesmente precisas de verificar se o teu ambiente de servidor o suporta.

[!TIP] Verifica a Saúde do Site: Vai a Ferramentas > Saúde do Site (Site Health) para confirmar se a tua instalação PHP suporta a geração de AVIF.

Controlar a qualidade de saída

A qualidade de compressão padrão no WordPress é 82. Isto é frequentemente demasiado alto para thumbnails. Podes ajustar isto com um filtro simples no functions.php:

// Ajustar Qualidade JPEG
add_filter('jpeg_quality', function($arg) { return 80; });

// Ajustar Qualidade WebP
add_filter('wp_editor_set_quality', function($quality, $mime_type) {
    if ('image/webp' === $mime_type) return 75;
    return $quality;
}, 10, 2);

2. Prevenir “thumbnail bloat”

Por defeito, uma nova instalação WordPress regista vários tamanhos de imagem:

• Thumbnail (Miniatura)
• Medium (Médio)
• Medium Large
• Large (Grande)
• 1536x1536
• 2048x2048

Se adicionares um tema que regista mais 5 tamanhos (portfolio-grid, slider-large, etc.), cada carregamento gera 10+ ficheiros. Isto desperdiça limites de inodos e espaço em disco.

A correção: Desregistar tamanhos não usados

function wppoland_disable_image_sizes($sizes) {
    unset($sizes['medium_large']); // 768px
    unset($sizes['1536x1536']);    // 2x Medium Large
    unset($sizes['2048x2048']);    // 2x Large
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wppoland_disable_image_sizes');

Dica Profissional: Vai a Definições > Media e define as dimensões como 0 para qualquer tamanho padrão (como Médio) que não uses.

3. Imagens responsivas (srcset)

O WordPress lida automaticamente com srcset, servindo o tamanho correto com base na viewport do utilizador. No entanto, podes ajudar o browser definindo o atributo sizes manualmente ao renderizar imagens em loops personalizados.

echo wp_get_attachment_image(
    $image_id,
    'large',
    false,
    ['sizes' => '(max-width: 600px) 100vw, 800px']
);

Isto diz ao browser: “Se o ecrã for inferior a 600px, a imagem ocupará a largura total. Caso contrário, terá 800px de largura.”

4. Lazy loading moderno

Desde o WP 5.5, o atributo loading="lazy" é adicionado automaticamente. Armadilha de Performance: NÃO uses lazy loading na imagem LCP (Largest Contentful Paint) - geralmente a tua imagem Hero ou imagem de destaque do post. Isso atrasa a renderização.

Desativar lazy load para a primeira imagem

add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
    // Lógica para detetar se é a primeira imagem no loop, ou Hero
    // Para controlo manual, podemos verificar uma classe
    if (isset($attr['class']) && strpos($attr['class'], 'hero-image') !== false) {
        $attr['loading'] = 'eager';
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 2);

5. Escala: Object storage (s3/GCS)

Se a tua biblioteca de media crescer além de 10GB, para de armazenar ficheiros no teu servidor web. Usa Object Storage (AWS S3, Google Cloud Storage, DigitalOcean Spaces).

Plugins como WP Offload Media ou Media Cloud são padrões aqui.

• Benefício: Servidores stateless (fáceis de escalar).
• CDN: Servir ficheiros diretamente de uma CDN global, contornando o teu servidor.

Resumo

1. Usa filtros jpeg_quality e WebP para controlo nativo da compressão.
2. Remove tamanhos de imagem não usados para poupar disco.
3. Gere loading="lazy" cuidadosamente - nunca na imagem Hero.
4. Descarrega para S3 quando atingires escala.

A otimização não é sobre adicionar plugins; é sobre configurar o core para ser eficiente.