Che dimensioni deve avere un'immagine in evidenza in WordPress?

La misura che quasi tutti cercano è 1200 x 630 pixel. È il rapporto che Facebook, LinkedIn e X usano per le anteprime dei link (1.91:1), ed è la dimensione che dovrebbe avere un’immagine Open Graph. Se stai impostando un’immagine in evidenza soprattutto perché i link condivisi vengano visualizzati bene, usa 1200 x 630 e fermati qui.

Ma quella misura non è ciò che il tuo tema mostra realmente nell’articolo. WordPress raramente visualizza l’immagine in evidenza alla sua dimensione originale. Il tema richiede una specifica dimensione immagine registrata, e WordPress serve il ritaglio pre-generato che corrisponde. Ecco perché un’immagine che appare perfetta su Facebook può risultare sfocata, stirata o tagliata male all’interno del template del singolo articolo. La dimensione “corretta” dipende dal tema, non da una regola universale.

Perché il tema ha la meglio sulla misura

Quando carichi un’immagine, WordPress non salva un solo file. Esegue wp_generate_attachment_metadata() e crea una versione derivata per ogni dimensione immagine registrata: le tre predefinite (thumbnail, medium, large), la medium_large dell’editor a blocchi (larga 768px), più qualsiasi dimensione che il tema o un plugin abbiano registrato con add_image_size().

Un tema che vuole un hero ampio in 16:9 fa qualcosa del genere nel functions.php:

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

Il quarto argomento, true, significa ritaglio rigido (hard crop). WordPress taglierà la tua immagine esattamente a 1200 x 675, scartando tutto ciò che non rientra nel riquadro 16:9. Se il soggetto si trova vicino al bordo superiore o inferiore dell’inquadratura, viene tagliato. Impostato a false (o omesso), l’immagine viene scalata in proporzione e le dimensioni finali possono differire da quelle richieste.

Poi è il template a decidere quale dimensione richiamare:

the_post_thumbnail( 'hero-featured' );

Qualunque nome venga passato a the_post_thumbnail() è il ritaglio che viene visualizzato. Quindi la vera dimensione dell’immagine in evidenza sul tuo sito è definita in due punti che non hai scritto tu: la chiamata add_image_size() e la chiamata the_post_thumbnail() nel tema. Caricare un file più grande non cambia nessuno dei due.

C’è ancora un altro livello. WordPress serve un srcset, quindi sugli schermi più piccoli il browser può caricare la versione medium o large invece del ritaglio completo. La misura che vedi nei DevTools spesso non è quella che hai caricato.

Come sistemarlo, passo dopo passo

1. Scopri cosa richiede davvero il tuo tema. Prima di tirare a indovinare, guarda ogni dimensione che WordPress genera dalla tua immagine e quale sia l’hero ritagliato. Trascina la tua immagine nel tool per le dimensioni immagini di WordPress — mostra ogni versione derivata che WP creerebbe, con le misure esatte in pixel, così puoi far corrispondere la tua immagine sorgente al target reale invece che al mitico 1200x630.

2. Carica un’immagine abbastanza grande da coprire il ritaglio più grande. Se l’hero del tema è 1200 x 675, carica almeno quelle misure, e idealmente il doppio per i display retina (2400 x 1350). WordPress riduce le dimensioni in modo pulito; non le ingrandisce mai. Una sorgente troppo piccola è la causa più comune in assoluto di un’immagine in evidenza sfocata.

3. Fai corrispondere il rapporto d’aspetto al ritaglio del tema. Se il tema ritaglia in modo rigido a 16:9, forniscigli un 16:9. Componi l’immagine con il soggetto centrato, così un ritaglio rigido non decapita nessuno.

4. Se la dimensione registrata è sbagliata, cambiala e rigenera. Modifica i valori di add_image_size() in un tema child, poi ricostruisci le miniature esistenti — le nuove misure si applicano solo ai caricamenti futuri finché non lo fai:

wp media regenerate --yes

Niente WP-CLI? Il plugin Regenerate Thumbnails fa la stessa cosa dalla bacheca.

Cosa non fare

Non limitarti a caricare un’immagine 1200x630 dando per scontato che venga gestita. Se la dimensione registrata dal tema è 16:9, WordPress ritaglia in modo rigido la tua immagine 1.91:1 e perdi la parte superiore e inferiore. La misura per Open Graph e quella per la visualizzazione svolgono due compiti diversi.

Non disattivare le dimensioni immagini di WordPress per “conservare l’originale”. C’è chi trova il consiglio di impostare le dimensioni intermedie a 0 o di scollegare the_post_thumbnail. A quel punto il tema ripiega sul servire il file a dimensione piena scalato nel browser — un JPEG da 4000px inviato a uno smartphone. Questo affossa i tempi di caricamento e i Core Web Vitals. Le versioni derivate esistono per un motivo.

Non fidarti della “dimensione consigliata” di un plugin più di quanto ti fidi della dimensione realmente registrata dal tema. I plugin SEO consigliano 1200x630 per il tag OG, ed è corretto per quel tag. Non dice nulla su come il template del singolo articolo ritaglia l’immagine.

Non saltare wp media regenerate dopo aver cambiato le dimensioni. Modificare add_image_size() non ha alcun effetto sulle immagini già caricate. È il passaggio che tutti dimenticano, per poi concludere che il codice non ha funzionato.

Ancora bloccato?

Se dopo aver fatto corrispondere le misure e rigenerato le immagini il risultato è ancora sbagliato, il problema di solito è la modalità di ritaglio (true contro false) oppure un srcset che serve una versione derivata più piccola di quella che ti aspetti. Trascina il file nel tool per le dimensioni immagini per vedere esattamente quali ritagli produce la tua configurazione, poi confrontali con ciò che il browser sta effettivamente caricando nei DevTools. Fai combaciare questi due valori e finiscono le supposizioni.