Como Alterar o Tamanho da Imagem em Destaque no WordPress: Um Guia Técnico Completo
Imagens em destaque — também chamadas de miniaturas de publicação — são a âncora visual principal de qualquer site WordPress. Aparecem em listagens de publicações, páginas de arquivo, pré-visualizações de redes sociais e feeds RSS, tornando as suas dimensões um fator direto na consistência do layout e na qualidade percebida do design. Alterar o tamanho da imagem em destaque no WordPress significa redefinir as dimensões em píxeis que o WordPress regista no momento do carregamento, atualizar a forma como o tema solicita essas dimensões no momento da renderização, ou ambos — e não abordar ambos os lados é a razão mais comum pela qual as imagens redimensionadas ficam incorretas no front end.
Este guia abrange todos os métodos disponíveis, desde as definições do painel sem código até à personalização direta em PHP, com contexto técnico preciso para cada abordagem.
Compreender Como o WordPress Gere os Tamanhos de Imagem
Antes de alterar qualquer definição, é necessário compreender o processo. Quando carrega uma imagem, o WordPress não armazena um único ficheiro — gera múltiplos ficheiros derivados com base em definições de tamanho registadas. Estas definições residem na base de dados e são registadas pelo núcleo do WordPress, pelo tema ativo ou pelos plugins instalados.
Os três tamanhos que o WordPress regista por defeito são:
- Miniatura — tipicamente
150x150px, recortada por defeito - Médio — até
300x300px, dimensionado proporcionalmente - Grande — até
1024x1024px, dimensionado proporcionalmente
O seu tema regista tamanhos adicionais usando add_image_size(). Quando um modelo chama the_post_thumbnail('large'), o WordPress procura o ficheiro que foi gerado para esse tamanho registado no momento do carregamento. Este é o ponto arquitetónico crítico: alterar uma definição de tamanho não redimensiona retroativamente as imagens já carregadas. É necessário regenerar as miniaturas após qualquer alteração de tamanho.
Método 1: Ajustar o Tamanho da Imagem em Destaque através das Definições de Multimédia do WordPress
Este é o ponto de partida correto para sites onde o tema usa um dos três tamanhos principais para a saída da imagem em destaque.
Passo 1: Atualizar as Definições de Multimédia
Navegue até Definições > Multimédia no painel do WordPress. Verá três grupos de tamanhos. Identifique qual o tamanho que o seu tema usa para as imagens em destaque — consulte a documentação do tema ou inspecione o HTML renderizado para confirmar a classe CSS (por exemplo, wp-image-* juntamente com size-large).
Ajuste os campos de largura e altura para o tamanho relevante. Definir qualquer dimensão como 0 indica ao WordPress para dimensionar proporcionalmente ao longo do outro eixo em vez de recortar.
Clique em Guardar Alterações.
Passo 2: Regenerar as Miniaturas Existentes
Os novos carregamentos utilizarão imediatamente as dimensões atualizadas. Para imagens já existentes na sua biblioteca de multimédia, é necessário regenerar os ficheiros derivados. A ferramenta mais fiável para isso é o plugin Regenerate Thumbnails de Alex Mills.
Após instalar e ativar o plugin, vá a Ferramentas > Regen. Thumbnails e clique em Regenerate All Thumbnails. Em bibliotecas grandes, esta é uma operação que consome muitos recursos — execute-a durante períodos de baixo tráfego e, se estiver num plano de Alojamento VPS, considere aumentar temporariamente max_execution_time e memory_limit do PHP em php.ini para evitar timeouts.
Erro comum: Se o seu tema registar o seu próprio tamanho personalizado com o mesmo nome que um tamanho principal, o painel de Definições de Multimédia não o afetará. A chamada add_image_size() do tema tem precedência.
Método 2: Usar o Personalizador do WordPress ou o Painel de Opções do Tema
Muitos temas comerciais expõem controlos de tamanho de imagem sem necessitar de alterações de código.
Passo 1: Verificar o Personalizador
Vá a Aparência > Personalizar. Procure em secções com os nomes Opções do Tema, Definições do Blog, Layout ou Definições de Publicação. Alguns temas apresentam aqui uma secção dedicada a Imagem em Destaque.
Se existirem controlos, ajuste a largura e a altura e clique em Publicar. O tema atualizará a sua definição de tamanho registada e, em algumas implementações, regenerará automaticamente as imagens afetadas.
Passo 2: Verificar um Painel de Opções do Tema Dedicado
Os temas premium construídos em frameworks como Redux ou Kirki frequentemente têm um item de menu autónomo Opções do Tema ou Painel do Tema na barra lateral do painel. Procure subsecções com os nomes Definições de Imagem, Miniaturas de Publicação ou Layout de Arquivo.
Ajuste os valores, guarde e, em seguida, regenere as miniaturas manualmente usando o método de plugin descrito acima, uma vez que a maioria dos painéis de temas não aciona a regeneração automaticamente.
Método 3: Definir Tamanhos de Imagem Personalizados em functions.php
Este é o método tecnicamente correto para programadores e para qualquer pessoa que necessite de controlo preciso sobre dimensões, comportamento de recorte e nomenclatura de tamanhos. É também o único método que permite registar tamanhos que não entram em conflito com os padrões principais.
Passo 1: Registar o Tamanho Personalizado
Edite o ficheiro functions.php do seu tema filho. Nunca edite diretamente os ficheiros de um tema pai — as atualizações irão sobrescrever as suas alterações. Se não tiver um tema filho, crie um antes de continuar.
Adicione o seguinte dentro de uma função com hook:
function mytheme_custom_image_sizes() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'featured-hero', 1200, 600, true );
add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );Descrição dos parâmetros para add_image_size():
- Argumento 1 — o identificador de tamanho (string), usado ao chamar a imagem nos modelos
- Argumento 2 — largura em píxeis
- Argumento 3 — altura em píxeis
- Argumento 4 — modo de recorte:
truepara recorte rígido às dimensões exatas;falsepara dimensionamento proporcional; um array comoarray( 'left', 'top' )para recorte posicional
Caso especial: Passar true como argumento de recorte usa por defeito o recorte centrado. Se as suas imagens em destaque tiverem sujeitos consistentemente descentrados (por exemplo, fotografia de retratos), use um array posicional — array( 'center', 'top' ) — para evitar que as cabeças sejam cortadas.
Passo 2: Chamar o Tamanho Personalizado nos Ficheiros de Modelo
Localize o ficheiro de modelo responsável pela renderização da imagem em destaque. Os candidatos mais comuns são single.php, archive.php, content.php ou template-parts/content-single.php. Pesquise por the_post_thumbnail para encontrar a chamada exata.
Substitua o argumento de tamanho existente:
// Before
the_post_thumbnail( 'large' );
// After
the_post_thumbnail( 'featured-hero' );Para maior controlo sobre o markup de saída, use get_the_post_thumbnail() com atributos personalizados:
echo get_the_post_thumbnail(
get_the_ID(),
'featured-hero',
array(
'class' => 'hero-image lazyload',
'alt' => get_the_title(),
'loading' => 'lazy',
)
);Passo 3: Tornar o Tamanho Personalizado Selecionável no Carregador de Multimédia (Opcional)
Por defeito, os tamanhos personalizados registados com add_image_size() não aparecem no menu suspenso de tamanhos do carregador de multimédia do WordPress. Para os expor para uso editorial, adicione este filtro:
function mytheme_add_image_sizes_to_selector( $sizes ) {
return array_merge( $sizes, array(
'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );Passo 4: Regenerar Miniaturas
Execute o plugin Regenerate Thumbnails conforme descrito no Método 1. Todas as imagens previamente carregadas terão novos ficheiros derivados gerados com as novas dimensões.
Método 4: Ajustar o Tamanho da Imagem em Destaque num Construtor de Páginas
Construtores de páginas como Elementor, Divi e Bricks Builder abstraem a camada de modelo, pelo que as edições nos ficheiros de modelo podem não se aplicar. Cada construtor tem os seus próprios controlos de tamanho de imagem.
Elementor
- Abra a página ou publicação no Elementor.
- Selecione o widget Imagem em Destaque ou um widget Publicações que exiba a miniatura.
- No painel esquerdo, localize Tamanho da Imagem no separador Conteúdo.
- Escolha um tamanho registado no menu suspenso ou selecione Personalizado para introduzir dimensões em píxeis.
- Clique em Atualizar.
Nota técnica: Quando seleciona “Personalizado” no Elementor, não é registado um novo tamanho de imagem no WordPress — o Elementor usa JavaScript para redimensionar a imagem do lado do cliente ou solicita a imagem em tamanho completo e dimensiona-a via CSS. Isto aumenta o peso da página. Prefira sempre um tamanho WordPress registado em vez de uma dimensão personalizada do Elementor para páginas onde o desempenho é crítico.
Divi
No Módulo Blog ou no módulo Imagem em Destaque da Publicação do Divi, a opção Tamanho da Imagem em Avançado controla qual o tamanho WordPress registado que é solicitado. O Divi também tem as suas próprias definições de tamanho de imagem em Divi > Opções do Tema > Geral > Tamanhos de Miniatura, que registam derivados adicionais.
Método 5: Usar um Plugin para Tamanhos de Imagem Personalizados Sem Código
Se editar PHP não for uma opção, estes plugins replicam a funcionalidade de add_image_size() através de uma interface:
| Plugin | Funcionalidade Principal | Mais Adequado Para |
|---|
| — | — | — |
|---|
| Simple Image Sizes | Gerir todos os tamanhos registados a partir das Definições de Multimédia | Uso geral, não programadores |
|---|
| Regenerate Thumbnails Advanced | Regeneração em lote com seleção de tamanhos específicos | Bibliotecas de multimédia grandes |
|---|
| Imsanity | Redimensiona automaticamente as imagens no carregamento até uma dimensão máxima | Evitar originais com dimensões excessivas |
|---|
| ShortPixel Adaptive Images | Serve imagens com o tamanho correto via CDN de forma dinâmica | Sites focados no desempenho |
|---|
Simple Image Sizes é a substituição mais direta para add_image_size(). Após a instalação, navegue até Definições > Multimédia — o plugin adiciona uma secção de tamanhos personalizados abaixo dos padrões principais. Defina o seu tamanho, guarde e use a regeneração integrada do plugin para o aplicar.
Comparação: Todos os Métodos de Relance
| Método | Competência Técnica Necessária | Afeta Todas as Imagens | Sobrevive a Atualizações do Tema | Melhor Caso de Uso |
|---|
| — | — | — | — | — |
|---|
| Definições de Multimédia | Nenhuma | Após regeneração | Sim | Ajustar dimensões de tamanhos principais |
|---|
| Personalizador / Opções do Tema | Nenhuma | Depende do tema | Sim (gerido pelo tema) | Temas premium com controlos integrados |
|---|
| `functions.php` (tema filho) | PHP intermédio | Após regeneração | Sim | Tamanhos personalizados, controlo preciso |
|---|
| Interface do Construtor de Páginas | Nenhuma | Por widget/página | Sim | Variação de layout por página |
|---|
| Plugin (Simple Image Sizes) | Nenhuma | Após regeneração | Sim | Registo de tamanhos personalizados sem código |
|---|
Considerações sobre Desempenho e Otimização de Imagens
Registar demasiados tamanhos de imagem é um problema do lado do servidor frequentemente ignorado. Cada tamanho registado gera um novo ficheiro no carregamento. Um site com 15 tamanhos registados e 2.000 imagens na biblioteca de multimédia tem potencialmente 30.000 ficheiros de imagem em disco. Em alojamento partilhado, isto esgota as quotas; em qualquer servidor, aumenta o tamanho das cópias de segurança.
Audite os seus tamanhos registados periodicamente. Use este snippet num plugin temporário ou em functions.php para listar todos os tamanhos registados:
add_action( 'wp_loaded', function() {
if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
echo '<pre>';
print_r( wp_get_registered_image_subsizes() );
echo '</pre>';
exit;
}
} );Visite https://yoursite.com/?show_image_sizes=1 enquanto está autenticado como administrador para ver a lista completa.
Práticas adicionais de desempenho:
- Use o formato WebP. O WordPress 5.8+ converte as imagens carregadas para WebP se a biblioteca GD ou Imagick do seu servidor o suportar. Verifique o suporte em Ferramentas > Estado do Site.
- Implemente carregamento lazy. O WordPress adiciona
loading="lazy"às imagens abaixo da dobra por defeito desde a versão 5.5. Certifique-se de que as suas chamadas personalizadas dethe_post_thumbnail()preservam este atributo. - Comprima antes de carregar. Ferramentas como ShortPixel ou Imagify integram-se diretamente no pipeline de multimédia do WordPress e comprimem os derivados automaticamente. O TinyPNG funciona bem para compressão manual antes do carregamento.
- Use um CDN. Se o seu site serve uma audiência global, descarregar a entrega de imagens para um CDN reduz a latência independentemente do número de tamanhos registados.
Para sites com cargas de trabalho de imagens intensas — portfólios de fotografia, sites de notícias, lojas WooCommerce — um VPS com cPanel dá-lhe o controlo ao nível do servidor para ajustar os limites de memória PHP, configurar o Imagick diretamente e gerir quotas de disco que os ambientes partilhados não conseguem oferecer.
Imagens Responsivas e o Atributo srcset
O WordPress gera automaticamente atributos srcset e sizes para imagens no conteúdo, extraindo de todos os tamanhos de imagem registados. Isto significa que cada tamanho que regista contribui para a capacidade do browser de selecionar a resolução mais adequada para o viewport e a densidade de píxeis do dispositivo do utilizador.
Quando chama the_post_thumbnail(), o WordPress gera markup semelhante a:
<img src="hero-1200x600.jpg"
srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
alt="Post Title"
loading="lazy">O atributo sizes indica ao browser a largura com que a imagem será renderizada em várias larguras de viewport. O WordPress gera um valor sizes padrão, mas frequentemente é impreciso para layouts complexos. Substitua-o usando o filtro wp_calculate_image_sizes ou passando um atributo sizes personalizado no array $attr de get_the_post_thumbnail().
Contexto de SSL, Domínio e Alojamento
Se estiver a migrar um site WordPress para um novo domínio ou a mudar de HTTP para HTTPS após obter um Certificado SSL, os URLs de imagem armazenados nos metadados de publicação (referências _thumbnail_id) são relativos ao ID do anexo e não são afetados por alterações de domínio. No entanto, os URLs de imagem codificados diretamente no conteúdo de publicações ou nas opções do tema precisarão de ser atualizados através de uma operação de pesquisa e substituição usando WP-CLI:
wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guidSe estiver a configurar uma nova instalação WordPress de raiz, registar o seu domínio através do Registo de Domínios e associá-lo a um ambiente de alojamento devidamente configurado garante que os seus caminhos de carregamento de multimédia e as regras de reescrita .htaccess estão corretos desde o início, evitando padrões de URL de imagem quebrados que são fastidiosos de depurar retroativamente.
Lista de Verificação para Decisões Técnicas
Use esta matriz para selecionar a abordagem correta para a sua situação:
- Precisa de alterar um tamanho principal (miniatura/médio/grande) e não edita código — use Definições > Multimédia e, em seguida, regenere as miniaturas.
- O seu tema premium tem um painel de Opções do Tema — verifique aí primeiro antes de tocar em qualquer ficheiro.
- Precisa de um tamanho com dimensões exatas em píxeis e recorte rígido — use
add_image_size()nofunctions.phpde um tema filho. - O seu conteúdo requer recorte não centrado — passe um array posicional como quarto argumento para
add_image_size(). - Usa Elementor ou Divi — use o controlo nativo de Tamanho de Imagem do construtor, mas prefira tamanhos WordPress registados em vez de “Personalizado” para melhor desempenho.
- Não consegue editar PHP e precisa de um tamanho personalizado — instale Simple Image Sizes, defina o tamanho e regenere.
- Tem uma biblioteca de multimédia grande — use Regenerate Thumbnails Advanced, que permite regeneração seletiva por nome de tamanho para evitar processamento redundante.
- O desempenho é uma prioridade — audite os tamanhos registados, ative WebP, implemente um CDN e certifique-se de que o carregamento lazy está ativo.
- Está em alojamento partilhado e está a ter erros de memória ou timeout durante a regeneração — considere migrar para um plano de Alojamento VPS onde os limites PHP são configuráveis.
FAQ
Por que as minhas imagens em destaque ainda mostram o tamanho antigo após alterar as Definições de Multimédia?
O WordPress gera derivados de imagem no momento do carregamento. Alterar uma definição de tamanho em Definições > Multimédia apenas afeta novos carregamentos. É necessário executar uma ferramenta de regeneração de miniaturas — como o plugin Regenerate Thumbnails — para redimensionar os ficheiros que já estão na sua biblioteca de multimédia.
Qual é a diferença entre add_image_size() com true versus false como parâmetro de recorte?
Passar true força o WordPress a recortar a imagem para a largura e altura exatas que especificou, centrado por defeito. Passar false dimensiona a imagem proporcionalmente de forma a que nenhuma dimensão exceda os valores especificados, o que significa que as dimensões reais de saída podem ser menores do que as especificadas se a proporção original for diferente.
Registar muitos tamanhos de imagem personalizados irá abrandar o meu site?
Não no momento da renderização — o WordPress serve ficheiros pré-gerados. O custo de desempenho ocorre no momento do carregamento, quando o Imagick ou GD deve gerar um derivado por tamanho registado. Sites com muitos tamanhos e alto volume de carregamentos podem ter respostas de carregamento lentas e um crescimento significativo do uso de disco.
Posso remover tamanhos de imagem que já não preciso?
Sim. Use remove_image_size( 'size-name' ) no seu functions.php para parar de gerar um tamanho para novos carregamentos. Os ficheiros existentes para esse tamanho permanecem em disco até serem eliminados manualmente. O comando WP-CLI wp media regenerate --only-missing pode ajudar na limpeza, gerando apenas os tamanhos em falta sem recriar todos os derivados.
Alterar o tamanho da imagem em destaque afeta a forma como as imagens aparecem quando partilhadas nas redes sociais?
Não diretamente. Plataformas sociais como o Facebook e o Twitter leem as meta tags Open Graph (og:image) para determinar qual a imagem a exibir. Estas tags são tipicamente definidas por um plugin SEO como o Yoast SEO ou o Rank Math, que regista o seu próprio tamanho de imagem (normalmente 1200x630) especificamente para partilha social. Alterar o tamanho da imagem em destaque do seu tema não altera a imagem Open Graph, a menos que o seu plugin SEO esteja configurado para usar o mesmo identificador de tamanho.
