Qual Deve Ser o Tamanho de uma Imagem Destacada no WordPress?

O número que a maioria das pessoas procura é 1200 x 630 pixels. Essa é a proporção que Facebook, LinkedIn e X usam nas prévias de links (1.91:1), e é o tamanho que uma imagem Open Graph deve ter. Se você está definindo uma imagem destacada principalmente para que os links compartilhados apareçam corretos, use 1200 x 630 e pare por aí.

Mas esse número não é o que o seu tema realmente exibe no post. O WordPress raramente mostra a sua imagem destacada no tamanho original. O tema solicita um tamanho de imagem registrado específico, e o WordPress serve o recorte pré-gerado que corresponde a ele. É por isso que uma imagem que fica perfeita no Facebook pode aparecer desfocada, esticada ou com o recorte errado dentro do template do post individual. O tamanho “correto” depende do tema, não de uma regra universal.

Por que o tema sobrepõe o número

Quando você faz o upload de uma imagem, o WordPress não armazena um único arquivo. Ele executa wp_generate_attachment_metadata() e cria uma derivada para cada tamanho de imagem registrado: os três padrões (thumbnail, medium, large), o medium_large do editor de blocos (768px de largura), além de qualquer tamanho que o tema ou um plugin tenha registrado com add_image_size().

Um tema que quer um hero largo em 16:9 vai fazer algo assim no functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

O quarto argumento, true, significa recorte forçado (hard crop). O WordPress vai recortar a sua imagem para exatamente 1200 x 675, descartando tudo que não couber na caixa 16:9. Se o seu objeto de interesse estiver perto do topo ou da base do quadro, ele será cortado. Definido como false (ou omitido), a imagem é redimensionada proporcionalmente e as dimensões finais podem diferir do que você pediu.

Em seguida, o template decide qual tamanho puxar:

the_post_thumbnail( 'hero-featured' );

Seja qual for o nome passado para the_post_thumbnail(), é esse o recorte que será renderizado. Então o verdadeiro tamanho da imagem destacada no seu site é definido em dois lugares que você não escreveu: a chamada add_image_size() e a chamada the_post_thumbnail() no tema. Fazer upload de um arquivo maior não muda nenhum dos dois.

Existe mais uma camada. O WordPress serve um srcset, então em telas menores o navegador pode carregar a derivada medium ou large em vez do recorte completo. A dimensão que você vê no DevTools muitas vezes não é a que você enviou.

Como corrigir, na ordem

1. Descubra o que o seu tema realmente pede. Antes de adivinhar, veja todos os tamanhos que o WordPress gera a partir da sua imagem e qual deles é o hero recortado. Coloque a sua imagem na ferramenta de tamanhos de imagem do WordPress — ela mostra todas as derivadas que o WP criaria, com as dimensões exatas em pixels, para que você possa ajustar a sua origem ao alvo real em vez do mítico 1200x630.

2. Faça upload grande o suficiente para cobrir o maior recorte. Se o hero do tema é 1200 x 675, envie pelo menos isso, e idealmente 2x para retina (2400 x 1350). O WordPress reduz com qualidade; ele nunca amplia. Uma origem menor que o necessário é a causa mais comum de uma imagem destacada desfocada.

3. Combine a sua proporção com o recorte do tema. Se o tema faz recorte forçado para 16:9, entregue uma imagem 16:9. Componha com o objeto de interesse centralizado para que um recorte forçado não decapite ninguém.

4. Se o tamanho registrado estiver errado, mude-o e regenere. Edite os valores de add_image_size() em um tema filho, depois reconstrua as miniaturas existentes — as novas dimensões só se aplicam a uploads futuros até que você faça isso:

wp media regenerate --yes

Sem WP-CLI? O plugin Regenerate Thumbnails faz a mesma coisa a partir do painel.

O que não fazer

Não faça apenas o upload de uma imagem 1200x630 achando que está resolvido. Se o tamanho registrado do tema for 16:9, o WordPress faz recorte forçado na sua imagem 1.91:1 e você perde o topo e a base. O número do Open Graph e o número de exibição são tarefas diferentes.

Não desative os tamanhos de imagem do WordPress para “manter o original”. As pessoas encontram conselhos para definir os tamanhos intermediários como 0 ou desconectar o the_post_thumbnail. Aí o tema passa a servir o arquivo em tamanho completo reduzido no navegador — um JPEG de 4000px entregue a um celular. Isso derruba o seu tempo de carregamento e os Core Web Vitals. As derivadas existem por um motivo.

Não confie no “tamanho recomendado” de um plugin em vez do tamanho realmente registrado no seu tema. Plugins de SEO recomendam 1200x630 para a tag OG, o que está correto para essa tag. Isso não diz nada sobre o recorte que o template do seu post individual aplica.

Não pule o wp media regenerate depois de mudar os tamanhos. Editar add_image_size() não faz nada com as imagens já enviadas. Esse é o passo que as pessoas esquecem, e depois concluem que o código não funcionou.

Ainda travado?

Se a imagem continua errada mesmo depois de ajustar as dimensões e regenerar, o problema geralmente é o modo de recorte (true vs false) ou um srcset servindo uma derivada menor do que você espera. Coloque o arquivo na ferramenta de tamanhos de imagem para ver exatamente quais recortes a sua configuração produz, depois compare isso com o que o navegador está carregando no DevTools. Combine esses dois e a adivinhação acaba.