Dimensione immagine in evidenza WordPress: 1200×630 e la tua

Risposta breve: se non conosci ancora la dimensione del tuo tema, usa 1200 x 630 pixel (circa 1.91:1). È la dimensione di anteprima dei link consigliata da Facebook, e i plugin SEO di solito usano l’immagine in evidenza come immagine di condivisione.

Nell’articolo stesso conta la dimensione che il tuo tema mostra. WordPress salva ogni caricamento in più dimensioni e il tema sceglie quale appare. I temi classici la impostano con set_post_thumbnail_size() o add_image_size(); i temi a blocchi la impostano nel blocco Immagine in evidenza. Se il tema ritaglia a 16:9 o al quadrato, un’immagine 1200 x 630 può perdere una parte dei bordi sinistro e destro. Trova la dimensione del tuo tema (qui sotto trovi quattro modi), poi carica un’immagine almeno così grande, o larga circa il doppio per risultati nitidi sugli schermi ad alta densità.

Per vedere tutte le dimensioni che WordPress creerà da una certa immagine, trascinala nello strumento per le dimensioni delle immagini WordPress.

Quale dimensione usare in base a dove appare l’immagine

Dove appare l’immagine	Dimensione da caricare	Note
I tuoi articoli, dimensione del tema ancora sconosciuta	1200 x 630, o 2400 x 1260 per risultati più nitidi	Va bene anche per le anteprime dei link mentre scopri la dimensione del tuo tema
I tuoi articoli, dimensione del tema nota	Circa il doppio della larghezza dell’immagine in evidenza del tuo tema, con lo stesso rapporto	WordPress crea copie più piccole di un caricamento, mai più grandi
Anteprime dei link su Facebook	Almeno 1200 x 630 (circa 1.91:1); 1200 x 628 ha quasi la stessa forma	Dalle indicazioni di Facebook sulla condivisione
Google Discover	Almeno 1200 px di larghezza, 16:9 (per esempio 1200 x 675)	Dalle linee guida di Google Discover

Le dimensioni delle immagini WordPress in breve

Ogni immagine che carichi riceve copie ridimensionate per ogni dimensione registrata. Queste sono le dimensioni che il core di WordPress registra, con i valori predefiniti presi dal Theme Handbook e dal riferimento delle funzioni del core:

Nome della dimensione	Dimensioni predefinite	Si può cambiare in Impostazioni > Media?	Note
thumbnail	150 x 150, ritagliata	Sì	Ha una casella “ritaglia alle dimensioni esatte”
medium	300 x 300 max	Sì	Ridimensionata in proporzione
medium_large	768 di larghezza, nessun limite di altezza	No	Usata soprattutto in srcset
large	1024 x 1024 max	Sì	Ridimensionata in proporzione
1536x1536	1536 x 1536 max	No	Aggiunta in WordPress 5.3 per gli schermi ad alta densità
2048x2048	2048 x 2048 max	No	Aggiunta in WordPress 5.3 per gli schermi ad alta densità
post-thumbnail	Impostata dal tema	No	Esiste solo se il tema chiama set_post_thumbnail_size()
full	Il tuo caricamento originale	No	I caricamenti molto grandi vengono prima ridotti (vedi sotto)

“Max” significa che WordPress fa stare l’immagine dentro quel riquadro e ne mantiene le proporzioni. Una foto 2000 x 1000 diventa 1024 x 512 per large, non 1024 x 1024.

Temi e plugin aggiungono spesso altre dimensioni con add_image_size(). WooCommerce, per esempio, aggiunge le sue dimensioni per i prodotti, di cui parla la nostra guida alle dimensioni delle immagini prodotto di WooCommerce.

C’è un’altra regola che riguarda i caricamenti grandi. Da WordPress 5.3, se un’immagine è più larga o più alta di 2560 pixel, WordPress la riduce e usa la copia ridotta come dimensione più grande disponibile. Questa soglia viene dal filtro big_image_size_threshold, il cui valore predefinito è 2560. Se vedi -scaled nei nomi dei file e vuoi sapere se disattivarlo, leggi come disattivare le immagini scaled in WordPress.

Da dove arriva davvero la dimensione dell’immagine in evidenza

Un’immagine in evidenza è qualsiasi immagine che imposti nel pannello Immagine in evidenza dell’editor dell’articolo. Quello che vedono i visitatori dipende da come il tema la stampa.

Temi classici

Un tema classico attiva le immagini in evidenza e registra la dimensione nel suo functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() registra una dimensione chiamata post-thumbnail. Il terzo argomento controlla il ritaglio. Con false (il valore predefinito), WordPress ridimensiona l’immagine per farla stare dentro 1200 x 675. Con true, la taglia esattamente a 1200 x 675 partendo dal centro, quindi tutto ciò che sta fuori da un riquadro 16:9 va perso. Puoi anche passare un array come array( 'center', 'top' ) per scegliere quale parte tenere.

Molti temi registrano altre dimensioni con nome per template diversi:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Il template poi ne sceglie una per nome:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Chiamata senza nome, the_post_thumbnail() usa post-thumbnail. Quindi la vera dimensione dell’immagine in evidenza in un tema classico è quella indicata nel template, e l’archivio del blog può usarne una diversa dalla vista del singolo articolo.

Temi a blocchi

I temi a blocchi, compresi i temi gratuiti di questo sito, stampano l’immagine in evidenza con il blocco Immagine in evidenza. Il riferimento dei blocchi del core elenca le sue impostazioni, tra cui sizeSlug (quale dimensione registrata caricare), aspectRatio, width, height e scale.

Questo cambia il punto in cui guardare. Apri Aspetto > Editor, modifica il template Articoli singoli e seleziona il blocco Immagine in evidenza. La barra laterale mostra quale dimensione dell’immagine carica e se è impostato un rapporto d’aspetto. Il rapporto d’aspetto viene applicato nel browser con CSS, quindi il file resta lo stesso e cambia la cornice visibile. Se il blocco chiede una cornice 16:9 e la tua immagine è quadrata, una parte resta nascosta. I template di archivio e della home possono usare impostazioni diverse dal template del singolo articolo, quindi controllali uno per uno.

Come trovare la dimensione dell’immagine in evidenza del tuo tema

Prova questi metodi in ordine. Il primo che ti dà una risposta basta.

1. Controlla la documentazione del tema. I buoni temi indicano la dimensione consigliata per l’immagine in evidenza. Se c’è, usala.

2. Elenca le dimensioni registrate con WP-CLI. Se hai accesso alla riga di comando, wp media image-size stampa ogni dimensione registrata con larghezza, altezza, impostazione di ritaglio e rapporto:

   wp media image-size

3. Cerca nei file del tema. In un tema classico, cerca in functions.php (e nei file che include) set_post_thumbnail_size e add_image_size, poi cerca in single.php o nelle parti di template il nome passato a the_post_thumbnail(). In un tema a blocchi, controlla il blocco Immagine in evidenza nell’Editor del sito come descritto sopra.

4. Ispeziona un articolo pubblicato. Fai clic destro sull’immagine in evidenza, scegli Ispeziona e leggi il nome del file in src. WordPress aggiunge le dimensioni alle copie ridimensionate, quindi my-photo-1200x675.jpg ti dice che il tema ha caricato una copia 1200 x 675. Guarda anche srcset, perché il browser può scegliere una copia più piccola sugli schermi stretti. Se nel nome non ci sono dimensioni, è stato usato il file a grandezza piena.

Quando conosci l’obiettivo, passa un’immagine di prova nello strumento per le dimensioni delle immagini per vedere come sarà ogni copia prima di caricarne un gruppo.

Scegliere la dimensione da caricare

Una volta nota la dimensione del tema, quattro scelte decidono se il risultato sarà giusto.

• Larghezza. Carica almeno la larghezza che il tema mostra. Per risultati nitidi sugli schermi ad alta densità di telefoni e portatili, punta a circa il doppio di quella larghezza. Per uno spazio largo 1200px, significa 2400px. WordPress crea copie più piccole dal tuo caricamento e non ne crea mai di più grandi, quindi un originale troppo piccolo è la causa più comune di un’immagine sfocata dopo il caricamento.
• Rapporto d’aspetto. Usa lo stesso rapporto del ritaglio del tema. Se ritaglia a 16:9, dagli un’immagine 16:9 e tieni il soggetto vicino al centro, così un ritaglio rigido non taglia teste o testo.
• Peso del file. Una foto da 2400px salvata in JPEG con una qualità ragionevole pesa di solito qualche centinaio di kilobyte. Caricare un file da 6000px della fotocamera aggiunge solo lavoro: WordPress riduce comunque tutto ciò che supera i 2560px, e i pixel in più non arrivano mai ai visitatori.
• Formato del file. WordPress accetta caricamenti WebP dalla versione 5.8 e AVIF dalla 6.5, purché la libreria di immagini del tuo server li supporti. Entrambi di solito danno un file più leggero del JPEG con una qualità simile.

L’immagine per la condivisione social è un’altra cosa

Quando qualcuno condivide il tuo articolo su Facebook, LinkedIn o altre reti, l’anteprima viene dal tag og:image, che i plugin SEO di solito riempiono con l’immagine in evidenza. La documentazione di Facebook sulla condivisione consiglia immagini di almeno 1200 x 630 pixel, il più vicino possibile a un rapporto 1.91:1.

Vedrai consigliato anche 1200 x 628. Quella misura è quasi esattamente 1.91:1, mentre 1200 x 630 risulta circa 1.90:1. Le due differiscono di soli 2 pixel in altezza, quindi vanno bene entrambe.

Se anche la dimensione mostrata dal tuo tema è vicina a 1.91:1, un solo caricamento 1200 x 630 (o 2400 x 1260) va bene per entrambi. Se il tema ritaglia a 16:9 o al quadrato, tieni i contenuti importanti lontano dai bordi sinistro e destro, oppure imposta un’immagine social separata nel tuo plugin SEO.

Google Discover ha le sue indicazioni per le immagini. Le linee guida di Google Discover consigliano immagini larghe almeno 1200 px, con più di 300.000 pixel in totale e un rapporto 16:9, come 1200 x 675. Le immagini grandi richiedono anche l’impostazione robots max-image-preview:large, che WordPress aggiunge per impostazione predefinita dalla versione 5.7, a meno che il sito non sia impostato per scoraggiare i motori di ricerca.

Come cambiare la dimensione dell’immagine in evidenza

Dove intervenire dipende dalla dimensione e dal tuo tema.

Dimensioni del core (thumbnail, medium, large). Vai in Impostazioni > Media e cambia larghezza e altezza. La documentazione della schermata Impostazioni Media descrive i campi, compresa la casella di ritaglio per le miniature.

Dimensioni del tema in un tema classico. Non modificare il tema genitore, perché un aggiornamento del tema sovrascriverà la tua modifica. Aggiungi i nuovi valori nel functions.php di un tema child. Registrare di nuovo una dimensione con lo stesso nome la sostituisce, e la configurazione del tema child deve essere eseguita dopo quella del genitore:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

La priorità 11 fa sì che questo codice giri dopo un tema genitore agganciato alla priorità predefinita 10. Controlla il codice del genitore e adatta il valore se usa una priorità più alta.

Temi a blocchi. Cambia la dimensione dell’immagine e il rapporto d’aspetto del blocco Immagine in evidenza nel template dell’Editor del sito. Non serve codice, e la modifica vale per tutti gli articoli che usano quel template.

Una sola immagine, senza codice. Per scegliere cosa conserva il ritaglio su una singola immagine, aprila da Media > Libreria e fai clic su Modifica immagine. Ritagliala con il rapporto del tuo tema (lo strumento di ritaglio accetta un rapporto d’aspetto come 16:9) oppure ridimensionala, poi salva. WordPress applica la modifica a tutte le dimensioni di quell’immagine e conserva il file originale, quindi in seguito puoi annullarla ripristinando l’immagine originale.

Rigenerare le miniature esistenti

Una dimensione modificata vale solo per i nuovi caricamenti. Le immagini già presenti nella libreria media mantengono le vecchie copie finché non le ricrei. Il comando wp media regenerate fa proprio questo:

wp media regenerate --yes

Opzioni utili dalla documentazione di WP-CLI:

• --image_size=hero-wide ricrea solo quella dimensione. Ripeti l’opzione per più dimensioni.
• --only-missing crea le dimensioni che non esistono ancora e lascia stare i file esistenti, cosa più veloce dopo aver aggiunto una nuova dimensione.
• --skip-delete mantiene i vecchi file delle miniature. Usalo se altri siti, newsletter o feed puntano direttamente a quei file.

Senza accesso alla riga di comando, il plugin Regenerate Thumbnails della directory dei plugin di WordPress.org fa lo stesso dalla bacheca. Con una libreria grande fai prima un backup, perché la rigenerazione riscrive molti file.

Errori comuni

• Fermarsi a 1200 x 630. È un buon punto di partenza e va bene per le anteprime dei link, ma se il tuo tema ritaglia a 16:9 o al quadrato, una parte dell’immagine viene tagliata. Controlla la dimensione del tuo tema prima di caricare un gruppo di immagini.
• Disattivare le dimensioni generate per “tenere l’originale”. Se il tema non ha copie più piccole, può finire per caricare il file completo su ogni schermo, rallentando la pagina sui telefoni. Le copie ridimensionate esistono proprio per evitarlo.
• Modificare il codice delle dimensioni e saltare la rigenerazione. Il codice funziona, ma solo per i nuovi caricamenti. Per questo molti pensano che un cambio di dimensione “non abbia fatto niente”.
• Cambiare la dimensione nel tema genitore. Il prossimo aggiornamento del tema la cancella. Usa un tema child o l’Editor del sito.

Se l’immagine sembra ancora sbagliata dopo aver allineato dimensione e rapporto e aver rigenerato, confronta il nome del file caricato dal browser con le dimensioni che lo strumento per le dimensioni delle immagini dice che WordPress dovrebbe creare. Quando non coincidono, spesso è un plugin di ottimizzazione o un ridimensionatore di immagini della CDN tra WordPress e il visitatore a servire una sua versione.