Scopo di questo articolo è quello di dare informazioni dettagliate su come gestire le dimensioni delle immagini in WP con la funzione add_image_size () e, con esempi, verificare le opzioni disponibili per questa funzione.
Indice paragrafi:
I formati immagine di WordPress
Capire il dimensionamento delle immagini WP
Dimensioni predefinite delle immagini e filenaming
Come attivare il supporto per l’immagine in evidenza
Aggiungere formati immagine con add_image_size()
Utilizzo avanzato di the_post_thumbnail()
Rimozione dei formati immagine predefiniti WP
I formati immagine di WordPress
Quando si carica un’immagine attraverso i media Uploader (Aggiungi Media) nel post editor, o direttamente nella libreria multimediale tramite il menu Bacheca> Media> Aggiungi nuovo, WordPress crea automaticamente più versioni dell’immagine durante la fase di “macinatura…[crunching]” del processo di caricamento, e crea queste versioni sul server:
- Miniatura (thumbnail)
- Media
- Grande
- Dimensioni originali (se più grande delle dim. ‘grande’ di cui sopra)
Le dimensioni di default delle immagini sono impostate in Bacheca>Impostazioni>Media (vedi screenshot) e, per impostazione predefinita, sono impostate come segue:

1) Impostazioni WordPress media (Dashboard> Impostazioni> Media)
- L’impostazione predefinita Dimensione miniatura è 150px x 150px (con un’opzione di ritaglio, di cui parleremo più avanti)
- L’impostazione predefinita Medium Size è larghezza massima 300px, altezza max 300px
- L’impostazione predefinita Large Size è larghezza massima 1024px, altezza max 1024px
Capire le opzioni di dimensionamento media WP
WordPress utilizza due metodi per ridimensionare le immagini: un metodo di ritaglio ‘duro’ (hard crop) e uno ‘morbido’ (soft-crop o box-resize). Il formato immagini medie e grandi utilizzano il metodo “box-resize”, il che significa che la dimensione dell’immagine viene ridotta fino a quando la maggiore delle dimensioni (orizzontale o verticale) si inserisce all’interno del “box” determinato dalla “Larghezza massima” e “Altezza massima”. Vediamo alcuni esempi …
Ipotizziamo di caricare un’immagine che è 600px di larghezza per 600px , l’immagine taglia M creata sarà 300px per 300px. Questo ha senso, dato il rapporto di formato 1: 1. (Vedi imm. sotto)
Tuttavia, se l’immagine originale è 300px di larghezza per 600px di altezza, siccome la maggiore delle dimensioni in questo caso è l’altezza, l’immagine viene ridotta in modo che l’altezza si inserisca all’interno del box che ha altezza massima di 300px (vedi configurazione di default). Le proporzioni originali sono conservate, quindi l’immagine taglia M risultante sarà 150px di larghezza per 300px di altezza. (Vedi imm. sotto)
Allo stesso modo, se carichiamo un’immagine originale di 300px X 600px di larghezza, l’impostazione “larghezza massima” ha la prevalenza e determina un ridimensionamento a 150px X 300px di larghezza. (Vedi imm. sotto)
In altre parole, l’immagine originale viene ridotta fino inserisce all’interno del “box” 300px da 300px – da qui il termine “box resize”.
E ‘importante notare che “box resize” viene sempre usata per medie e grandi dimensioni. Ciò significa che l’immagine è sempre ridimensionata per adattarsi all’interno del “box” e non si verifica alcun ritaglio . Nota : la casella contorno blu negli schemi di cui sopra rappresenta questo “box”.
Invece, l’impostazione Miniatura può utilizzare il metodo “box resize” o, se la casella “Ritaglia” è selezionata, il metodo “hard crop”, il che significa che la miniatura risultante sarà sempre dimensionata come da specificato dalle impostazioni Larghezza e Altezza. Il ritaglio avverrà certamente per immagini non proporzionali alle dimensioni indicate nelle impostazioni. Questa impostazione, se da un lato può apparire eccessivamente stressante, dall’altro consente un controllo assoluto sul layout delle nostre pagine che risulteranno certamente più pulite ed ordinate, in particolare le pagine “elenco” dove tutte le miniature saranno perfettamente allineate. In conseguenza di questi ragionamenti è quindi buona norma uploadare immagini che rispecchino le proporzioni utilizzate nel nostro tema in modo da non avere risultati scomposti ed inattesi.
Dimensioni predefinite delle immagini e filenaming
Come accennato in precedenza, le dimensioni in PX delle immagini risultanti dal ridimensionamento sono aggiunte al nome originale del file per creare i nomi dei file per le tre dimensioni.
Ad esempio, il caricamento di un file immagine di 1200px x 1200px di nome img.jpg si tradurrà in 3 file che vengono salvati nella cartella wp-content/uploads, in aggiuntiva al file originale:
- La versione Dimensione miniatura verrà chiamata img-150 × 150.jpg
- La versione Medium Size si chiamerà img-300 × 300.jpg
- La versione Large Size si chiamerà img-1024 × 1024.jpg
Si noti che, nell’esempio di cui sopra, le dimensioni delle immagini conservano il rapporto di 1: 1 aspetto dell’immagine originale (1200px x 1200px), in questo caso dunque c’è corrispondenza esatta fra la dimensione “media” creata (img-300 × 300.jpg) e il default della dimensione media come da impostazioni ma nella maggior parte degli esempi reali la proporzione dell’immagine originale uploadata non sarà 1: 1, il che significa che le dimensioni degli allegati saranno diverse da quelle sopra indicate.
La seguente tabella fornisce alcuni altri esempi variando le dimensioni delle immagini originali, ipotizzando di avere impostato i valori di default (Bacheca> Impostazioni> Media) come visto sopra in immagine 1
Es: | Dimensioni originali larghezza x altezza |
Multimedia predefinito | Le immagini create sul server |
---|---|---|---|
1. | img.jpg, 1200px x 1200px | Thumbnail Medio Large Full Size |
img-150 × 150.jpg img-300 × 300.jpg img-1024 × 1024.jpg img.jpg |
2. | img.jpg, 900px x 900px | Thumbnail Medio Large Full Size |
img-150 × 150.jpg img-300 × 300.jpg – img.jpg |
3. | img.jpg, 500px x 250px | Thumbnail (ritaglio deselezionato) Medio Large Full Size |
img-150 × 75.jpg img-300 × 150.jpg – img.jpg |
4. | img.jpg, 1200px x 600px * | Thumbnail (ritaglio selezionato) Medio Large Full Size |
img-150 × 150.jpg img-300 × 150.jpg img-1024 × 506.jpg img.jpg |
- Es.2 : Le dimensioni dell’immagine originale sono inferiori a quelle del default per le grandi dimensioni, quindi non viene creata l’immagine ‘large’.
- Es.4 : Questo esempio presuppone che sia stata selezionata la checkbox “ritaglio”, pertanto, per la dimensione miniatura, il formato originale viene ignorato e viene creata una miniatura di 150px x 150px esatti.
Le funzioni base relative alle immagini
Come attivare il supporto per l’immagine in evidenza
Le ‘immagini in evidenza non sono automaticamente abilitate in tutti i temi e sono state introdotte in WP dalla versione 2.9, occorre tenerne conto ed eventualmente abilitarle con l’aggiunta nel file “functions.php” del theme (abbiamo visto in altri post come utilizzare i temi figli per modificare un theme WP)
add_theme_support ('post-thumbnail');//aggiunge il supporto per le immagini in evidenza add_theme_support('post-thumbnail',array('post','SOFT_CPT'));/*solo per post e custom post_type indicati nel secondo argomento della funzione*/
Quindi, se prima il tema non disponeva di questa ‘feature’ ora nella pagina di editing o aggiunta nuovi post si vedrà, in basso a destra il box:
col quale, esattamente come per inserire un’immagine nell’articolo, potremo settare l’immagine in evidenza del nostro post.
Per mostrare nel file di template l’immagine in evidenza dovremo usare la funzione the_post_thumbnail() all’interno di un loop ; la funzione così chiamata si occupa di stampare a video l’output completo del tag immagine. Come impostazione di default, in assenza di ulteriori istruzioni, la funzione mostrerà la miniatura nelle dimensioni impostate come abbiamo visto sopra.
Aggiungere formati immagine con add_image_size()
Per una panoramica completa delle funzioni riferite alla gestione delle immagini, dobbiamo introdurre un’altra funzione ovvero add_image_size() [add_image_size($name, $width, $height, $crop)] e un suo alias specifico per l’immagine in evidenza set_post_thumbnail_size( )
. Con questa funzione possiamo definire a nostro piacimento le dimensioni per le immagini del nostro theme, compresa la dimensione dei thumbnail o quelle da utilizzare ad esempio in un template per uno specifico post_type. In questo contesto vediamo che:
set_post_thumbnail_size( 180, 120, true )/* all'upload di un nuovo media crea una miniatura ritagliata a 120px X 180px da usare come immagine in evidenza dalla funzione the_post_thumbnail(), e si tratta di una funzione equivalente a:*/ add_image_size( 'post-thumbnail', 180, 120,true );/*nome: post-thumbnail: riconosciuta da WP come standard per le immagini in evidenza*/ //altri esempi con utilizzo di custom thumbnail: if ( function_exists( 'add_image_size' ) ) { add_image_size( 'feature-image', 570, 285, true ); add_image_size( 'feature-image-small', 285, 285, true); add_image_size( 'feature-image-home', 285, 303, true); } // Uso nel loop con dimensioni 285, 285 <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'feature-image-small' ); } ?> // aggiungere una classe all'immagine: <?php echo the_post_thumbnail( 'feature-image-home', array('class' => 'feature-image') ); ?>
Con add_image_size() abbiamo quindi a disposizione una potente funzione per il ridimensionamento delle immagini, come sempre è bene non abusare in quanto l’aggiunta di numerosi formati rallenta la procedura di aggiunta media e consuma spazio disco.
NOTA IMPORTANTE: la funzione add_image_size() ha effetto solo per le immagini che ancora non sono state uploadate, e quindi il nuovo formato non è disponibile per le immagini già caricate in precedenza. Per ricostruire tutti i formati si può utilizzare un utilissimo plugin: Regenate Thumbnails
Alcune funzioni avanzate relative alle immagini WP
Utilizzo avanzato di the_post_thumbnail()
Possono essere passati due argomenti opzionali a the_post_thumbnail(). Il primo sono le dimensioni passate
a) come nome ( ‘thumbnail’, ‘medium’ or ‘large’) come definiti nelle impostazioni di base o un nome “custom definito in add_image_size()
b) come array di due numeri rappresentanti la larghezza e l’altezza in pixel – es. array(120,80)
Il secondo, anch’esso un array contenente src, class, alt e title quindi ad esempio:
the_post_thumbnail( array(120, 90), //larghezza x altezza array( 'src' => 'image.jpg',//sorgente 'class' => 'thumbnail', //classe 'alt' => 'al passaggio del mose mostra questo testo', //tag alt 'title' => 'al passaggio del mose mostra questo testo'//tag title ) ); //che risulterà in output html: <img width="120" height="90" src="image.jpg" alt="al passaggio del mose mostra questo testo" title="al passaggio del mose mostra questo testo" />
Rimozione dei formati immagine predefiniti WP
E’ possibile inibire a WordPress la creazione dei formati immagine predefiniti? Evidentemente la risposta a questo quesito consentirebbe di risparmiare tempo e spazio limitando i formati immagine a quelli (generati custom con la funzione add_image_size()) strettamente necessari per i template di pagina del nostro theme.
function SOFT_filter_image_sizes( $sizes) { unset( $sizes['thumbnail']); unset( $sizes['medium']); unset( $sizes['large']); return $sizes; } add_filter('intermediate_image_sizes_advanced', 'SOFT_filter_image_sizes');
Questa funzione si aggancia all’hook intermediate_image_sizes_advanced ovvero alla fase di creazione dei formati immagine all’upload; l’unset determina la non-creazione del formato relativo ( [‘thumbnail’], [‘medium’], [‘large’] ) .
Buongiorno,
vi scrivo in quanto ho un grosso problema causato dalle immagini in evidenza. Premetto che utilizzo il tema ”Neve” e non riesco a modificare i valori prestabilisti, ovvero 930×620. Utilizzando delle immagini che sono 1080×1080, vengono visualizzate come se fossero tagliate.
Vi anticipo dicendovi che non ho inserito la spunta su ”ritaglia miniatura”.
Ho provato ad utilizzare codici e a trovare una soluzione tramite plugin e all’interno del tema, ma non sono riuscito a modificarle in nessun modo.
Siccome non riesco a risolvere questo problema in nessun modo, ho pensato di chiedere a degli esperti come voi.
Vi ringrazio infinitamente per la vostra assistenza.
Buongiorno Ale, purtroppo non conosciamo il tema Neve e non ti possiamo aiutare, se non investendo parecchio tempo in ricerche e prove. Hai provato a dare un’occhiata a questo? https://wordpress.org/support/topic/neve-theme-featured-images-size/
Se hai acquistato la versione PRO puoi aprire un ticket all’assistenza, sicuramente risparmierai tempo 🙂
Un caro saluto.
Stefania
Salve e complimenti, volevo chiedere un aiuto per risolvere il problema che mi si presenta: nel mio sito creo un post con all’inizio un’immagine in evidenza di 538×218 px (creata con photoshop) e fin qui tutto bene, questo post viene automaticamente posizionato in home page come notizia recente in una delle 4 colonne presenti con un’immagine di 190×111 px, l’immagine anzichè ridimensionarsi automaticamente, viene tagliata. Come posso ovviare a questo fastidioso problema? Grazie
Buongiorno e grazie per i complimenti 🙂
Sarebbe utile sapere quale tema utilizza. Ad ogni modo provi a guardare dentro le impostazioni dei media se è flaggato il checkbox di ritaglio. Se sì, provi a deflaggarlo e vedere se così risolve.
Altrimenti bisogna vedere come è creata l’homepage, se le 4 colonne sono state realizzate usando un compositore visivo, per esempio.
Ci faccia sapere se ha risolto 🙂
Buon giorno,complimenti innanzitutto per la competenza mostrata nel trattare questo argomento…Chiedo cortesemente 2 cose… Prima cosina: nnanzitutto vorrei sapere nell’ambito del mio sito in wordpress con Plugin Nexgen gallery, se esiste uno strumento, tool o artifizio che mi consenta di capire tra le molte foto caricate(e sempre comunque ottimizzate) se e quali di queste sono le più pesanti per intervenire ed ottimizzarle senza scorrermi tutte le tante foto inserite. Secondo aiutino: Ho la foto di testata(presente in tutte le pagine del mio sito)che non evidenzia il Tag Alt, tale foto è stata inserita da Media come le altre ed uso il tema graphene. Ringrazio anticipatamente e porgo distinti saluti, Vittorio
Ciao Vittorio!
Grazie per i complimenti 🙂
Per valutare la pesantezza delle immagini, e in generale le prestazioni di un sito, ti consiglio PageSpeed Insight di Google (https://developers.google.com/speed/pagespeed/insights/). Per quanto riguarda invece le foto di testata che non hanno il tag Alt, potrebbe essere il tema che non lo mette (naturalmente se hai usato il testo alternativo dentro la sezione media, come mi pare tu abbia già fatto). In questo caso bisognerebbe fare una modifica al tema, o ancora meglio al suo tema figlio.
Un caro saluto
Stefania
Buonasera, wp mi fa impazzire, io inserisco le immagini, visto che le vorrei tutte uguali prima le ridimensiono con photoshop poi le carico su wp, le posiziono all’interno di una tabella e quando vado a vedere il risultato sono di dimensioni differenti. Enigma per me irrisolvibile attualmente.
Grazie in anticipo per l’attenzione.
Ciao Gian Maria! Dipende da come hai impostato il CSS. In generale le tabelle non sono il massimo. Se metti qualcosa all’interno di una cella, questo si adatterà in base alla cella in cui si trova, nonché in base alle dimensioni delle altre celle e alle dimensioni della tabella. Stai usando dimensioni fisse o in percentuale? Se ci mandi il link della pagina dove hai problemi possiamo dare un’occhiata. Ciao!
Buongorno,
ho appena creato un sito web, ma ho un “problema” nel caricamento immagini.
Quando carico l’immagine nell’articolo wordpress la mette nell’articolo di dimensione “media” quando in realtà io la vorrei caricata di default di dimensione “reale”.
Mi sapete dire dov’è l’impostazione per mettere di default il caricamento in dimensione reale delle immagini? Ho un altro sito in cui ce l’ha così, ma non mi ricordo più come avevo fatto!!
Grazie mille e davvero complimenti per l’ottimo lavoro.
Ciao Andrea, scusaci il ritardo 🙂
È una problematica che non abbiamo mai affrontato, ma non ci risulta che ci sia un’impostazione del genere.
Secondo noi dovresti intervenire direttamente nel template dell’articolo (file single.php all’interno del tema)
Ovviamente fallo sul tema child.
Facci sapere 🙂
Buongiorno, ho la necessità di pubblicare articoli in evidenza senza immagine e che i contenuti dell’articolo si dispongano nello spazio occupato dall’immagine.
Esiste quindi la possibilità di scegliere se pubblicare o meno un’immagine in un articolo senza che si capisca che manca l’immagine?
grazie
Ciao Andrea,
complimenti per gli articoli, ti spiego il mio problema, negli anni ho cambiato 3 temi di WordPress, ora sono fresco fresco con l’attuale Jannah Theme, un magazine di Theme Forest, ora questo ha determinate misure di Thumbnail, molte quindi delle vecchie degli altri temi non le uso e vorrei eliminarle, ho circa 9000 immagini e circa 70.000 Thumbnail comprese le vecchie, anche perchè ora sto utilizzando Shortpixel per la riduzione del peso delle immagini ed è a pagamento, ma siccome ridimensiona anche le thumbnail, mi va a ridimensionare anche quelle vecchie non utilizzate consumando una marea di crediti, mi ritrovo con delle immagini in media con 12-15 thumbnail e alcune anche oltre 20, quindi come faccio a sapere quali dimensioni di immagine e thumbnail utilizza il mio tema e come faccio ad eliminare quelle inutili, esiste qualche plugin o comandi semplici che anche un non esperto di html e varie possa fare?
Grazie
Ciao Mario,
https://en-au.wordpress.org/plugins/force-regenerate-thumbnails/ dovrebbe fare al caso tuo, non l’ho provato..
Se vuoi cimentarti con un po’ di codice e hai accesso ftp al server puoi provare a usare questo codice aggiungendolo al file functions.php che sta nella cartella del tema ( wp-content/themes/jannah )
questo ,da loggato in area admin, mostra quali sono i formati immagine correntemente registrati, per la cancellazione cmq occorre molto più lavoro, penso che il plugin possa esserti utile
Plugins dovrebbe essere interessante, quindi cancella in automatico quelle che il tema attuale non usa, troppo bello per essere vero!, non è aggiornato da più di un anno, ma dai commenti recenti (se veri) dovrebbe funzionare, ora lo provo in locale su una copia, grazie mille
Salve,
ho un problema con le immagini in evidenza: pur riuscendo a caricarle e a vederle come miniature, quando apro il singolo articolo queste magicamente spariscono…Sapete dirmi i quale impostazione devo andare? Grazie
Valentina
Prova a guardare nelle impostazioni del tema e nell’edit del singolo post se ci sono impostazioni di mostra/nascondi featured image..
Salve ho un problema con wordpress.
Sul mio sito aziendale ho caricato delle immagini, le quali quando vado a ridurre la dimensione della tendina di windows mantengono solo la dimensione verticale mentre la dimensione orrizzontale viene schiacciata deformando le figure e ridisponendo anche il testo. è possibile trovare una soluzione al problema?
grazie infinite
buongiorno,
non mi è chiaro il problema, il ridimensionamento manuale dall’editor trascinando gli angoli dell’immagine dovrebbero preservarne le proporzioni..
Grazie infinite! Davvero tanto!
Mi sembrava di aver capito che quello fosse il sistema giusto per vedere le dimensioni delle immagini, ma mi sono accorta che non ovunque me le fa vedere.
Quindi non capivo se avevo preso un abbaglio oppure proprio non la potevo capire questa cosa.
Credo che questo problema sia sempre dovuto al mio template che me ne crea anche altri…
Proverò a dimensionare le immagini come mi hai indicato tu!
Buonissimo weekend
Ti ringrazio moltissimo per la tua risposta, ancora una volta capisco che questo tema ha un sacco di problemi (non solo quello delle immagini, ma ad esempio anche quelli dei microdati).
Ma tu da dove hai visto che l’immagine della slider potrebbe essere 1300×700? Io alle dimensioni dell’immagine in evidenza 752×490 ci sono arrivata a “tentoni”, (non chiedermi in che modo: non lo so nemmeno io). Ma non si potrà procedere a tentoni per capire di che dimensioni caricare.
E comunque grazie perchè il problema della slider, l’avevo notato (ovvio che si nota, le foto fanno schifo), ma non sapevo proprio come fare ad ovviare, visto che l’immagine della slider viene presa da Immagine in evidenza, quindi pensavo la dovesse adattare “lui” in qualche modo.
Mi studio il link che mi hai indicato.
Grazie
con qualsiasi browser ( io uso chrome ) posizioni il mouse su un qualsiasi elemento della pagina ( l’immagine ad esempio) e facendo tasto destro->ispeziona elemento vedi la struttura della pagina web e tutte le informazioni relative. la tua immagine della slider ha dimensioni originali 752 x 491 ma è ridimensionata a 1300 x 849, (1300 è la max larghezza del < div class="container" > come definito nei fogli di stile), poi in altezza viene nascosta nella parte bassa perchè un altro elemento (< div id="sequence" > ) ha max altezza 550px, quindi le dimensioni esatte della tua immagine slider sono 1300 x 550, così ottieni un risultato ottimale

[edited]
ovviamente nel tuo caso, siccome la slider prende la stessa immagine del post, questa soluzione non va bene perchè questo formato non è adatto come featured image del singolo post, quindi la soluzione di compromesso è uploadare immagini di 1300 x 800 px che sono proporzioni ~ analoghe a 750 x 490, tenendo conto che nella slider la parte bassa della foto non si vedrà perchè limitata in altezza a 550px
Ciao, io sto lottando con le immagini da un po’ e non riesco a trovare la risposta ad un quesito. Immagino che ogni template abbia le sue dimensioni personalizzate per l’immagine in evidenza e anche per le altre immagini che alleghi al post.
Ma le dimensioni supportate da ciascun template dove le trovo?
Voglio dire
Grande
medio
piccolo
Quando ridimensiono un immagine per prepararla non posso mica dare questi parametri e io vorrei creare la giusta dimensione prima ancora di caricarle. devo considerare che le misure che mi offre a fianco di grande, medio, piccolo siano le dimensioni giuste sopportate?
Grazie
Il tema ha certamente un set di dimensioni immagine, ad esempio vedo http://www.ideedituttounpo.it/viaggiare/italia/emilia-romagna/podere-casale.php in cui l’immagine http://www.ideedituttounpo.it/wp-content/uploads/2016/10/Podere-casale-le-vigne.jpg è 752 x 490 e si adatta bene al formato post.
Certo la stessa dimensione non è adatta per le immagini della slider della home, infatti l’immagine risulta piuttosto sgranata. Se questo è il problema che vuoi risolvere occorre capire come viene generata la slider, in pratica le cose da fare sono: aggiungere alle funzioni del tema un formato ad hoc per la slider ( vedi https://softrade.it/WP/add_image_size/) e fare upload di immagini più grandi in modo che le funzioni di generazione dei vari formati ti consenta di avere a disposizione sia il formato per i post ( 752 x 490 ) sia per la slider ( ipotesi 1300 x 700). Nella slider, quando si chiama the_post_thumbnail() si può passare il formato richiesto. Ad esempio se hai creato con add_image_size() il formato “home_slider” [ add_image_size(‘home_slider’, 1300, 700, true); ]nel template che genera la slider della home andrà utilizzata la funzione the_post_thumbnail( ‘home_slider’ ) che ti va a prendere l’immagine con dimensione 1300 x 700. Tutto ciò vale per i nuovi upload, per i quali disporrai del formato home_slider” mentre per i vecchi upload questo non esiste. Condizione necessaria per un buon risultato è comunque quella di uploadare immagini di dimensioni almeno uguali a 1300 x 700
Buono a sapersi! Grazie!
Questo lo metto tra i preferiti 😉 Grazie