Otimização moderna de media WordPress, WebP e AVIF

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 dé 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 é 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 dé um plugin para reescrever o teu HTML para servir .webp.

#WEBP (suportado desde wp 5.8)

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

#AVIF (suportado desde wp 6.5)

O AVIF oferecé uma compressão ainda melhor qué o WebP. Para priorizar o AVIF, simplesmente precisas de verificar sé 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 sé 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

Sé 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 definé as dimensões como 0 para qualquer tamanho padrão (como Médio) que não uses.

#3. Imagens responsivas (srcset)

O WordPress lida automáticamente com srcset, servindo o tamanho correto com base na viewport do útilizador. No entanto, podes ajudar o browser definindo o atributo sizes manualmenté 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: “Sé o ecrã for inferior a 600px, a imagem ocupará a largura total. Caso contrário, terá 800px de largura.”

#4. Lazy loading moderno

Desdé o WP 5.5, o atributo loading="lazy" é adicionado automáticamente. Armadilha de Performance: NÃO uses lazy loading na imagem LCP (Largest Contentful Paint) - geralmenté 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)

Sé a tua biblioteca de media crescer além de 10GB, para dé 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 dé 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 é sobré adicionar plugins; é sobre configurar o core para ser eficiente.

Exploré os nossos otimização de velocidade WordPress para levar o seu projeto mais longe.