Le di­men­sio­ni ottimali delle immagini in WordPress per un sito web più veloce

Il sistema di gestione dei contenuti WordPress offre sia la pos­si­bi­li­tà di uti­liz­za­re le immagini in di­men­sio­ni pre­de­fi­ni­te che di per­so­na­liz­zar­ne il formato. Vi il­lu­stria­mo i passaggi prin­ci­pa­li per scegliere le di­men­sio­ni delle immagini in WordPress 6.0.3.

Le di­men­sio­ni pre­de­fi­ni­te delle immagini in WordPress

La di­men­sio­ne dei file delle immagini in­cor­po­ra­te in un sito web influisce molto sulla sua velocità di ca­ri­ca­men­to. Un formato di immagine ottimale riduce i tempi di ca­ri­ca­men­to e il carico sul server. Al momento di caricare un file, il CMS WordPress offre una serie di di­men­sio­ni pre­de­fi­ni­te per le immagini sul server.

Salvare e ri­di­men­sio­na­re le immagini di WordPress nel back end

Queste di­men­sio­ni delle immagini sono definite nelle im­po­sta­zio­ni di WordPress, dove possono essere regolate fino a un certo punto. Per farlo, andate nel back end e fate clic su “Im­po­sta­zio­ni” > “Media”.

Una volta caricati i file, vengono aggiunti altri file nella Libreria mul­ti­me­dia­le. La directory cor­ri­spon­den­te è https://ilmiodominio.it/wp-content/uploads/ oppure https://ilmiodominio.it/wp-content/uploads/2022/11/ (è ne­ces­sa­rio che sia attivo l’or­di­na­men­to delle cartelle per mese e anno). Ad esempio, per un’immagine sono di­spo­ni­bi­li i seguenti file:

• immagine-1024x683.jpg
• immagine-150x150.jpg
• immagine-1536x1024.jpg
• immagine-2048x1365.jpg
• immagine-300x200.jpg
• immagine-620x413.jpg
• immagine-scaled.jpg (2.560 x 1.707 px)
• immagine.jpg (l’originale)

In questo modo si hanno a di­spo­si­zio­ne immagini di di­men­sio­ni ottimali per la maggior parte delle pagine e dei post di WordPress. Le immagini da caricare nella mediateca non devono essere più grandi di 1.920 pixel sul bordo lungo. È possibile ridurle alle di­men­sio­ni ne­ces­sa­rie prima di caricarle uti­liz­zan­do programmi di ela­bo­ra­zio­ne di immagini gratuiti. Per evitare spia­ce­vo­li sorprese, è con­si­glia­bi­le anche dare prima un’occhiata ai formati di immagine più comuni. Questo vale, ad esempio, per il formato immagine WebP, che non è sup­por­ta­to in modo nativo da tutti i browser.

Le di­men­sio­ni con­si­glia­te per le immagini da uti­liz­za­re nei temi WordPress sono le seguenti:

Le di­men­sio­ni effettive richieste per le immagini dipendono dai com­po­nen­ti e dalla struttura del tema di WordPress. Queste possono essere trovate nella do­cu­men­ta­zio­ne del ri­spet­ti­vo tema.

Mo­di­fi­ca­re le di­men­sio­ni delle immagini nella Libreria mul­ti­me­dia­le di WordPress

Le di­men­sio­ni delle immagini possono essere definite anche nella Libreria mul­ti­me­dia­le di WordPress: oltre a mo­di­fi­ca­re le di­men­sio­ni dell’immagine originale, è possibile ri­ta­gliar­le, ruotarle e ca­po­vol­ger­le. Per esempio, per creare una foto da inserire in uno slider da un’immagine di di­men­sio­ni maggiori nella Libreria mul­ti­me­dia­le, è ne­ces­sa­rio procedere come segue:

Primo passaggio: se­le­zio­na­te l’immagine nella Libreria mul­ti­me­dia­le e fate clic su “Modifica immagine”

Secondo passaggio: impostare il metodo di editing e le di­men­sio­ni

Si noti che durante l’ope­ra­zio­ne il pulsante “Ritaglia” deve essere uti­liz­za­to due volte: la prima per attivare la funzione e la seconda dopo aver impostato le di­men­sio­ni dell’immagine.

Terzo passaggio: salvare l’immagine nella Libreria mul­ti­me­dia­le

Dopo aver salvato l’immagine ri­ta­glia­ta, nella cartella di upload troverete il file

• immagine-scaled-e1667121439976.jpg

in cinque ulteriori formati, a cui viene assegnato au­to­ma­ti­ca­men­te l’ID …-e1667121439976. Le di­men­sio­ni delle immagini appena create possono essere se­le­zio­na­te dalla Libreria mul­ti­me­dia­le nell’editor Gutenberg al momento del loro in­se­ri­men­to o della loro so­sti­tu­zio­ne. Qui sono di­spo­ni­bi­li anche le di­men­sio­ni in pixel dell’immagine.

Regolare le di­men­sio­ni delle immagini al momento dell’in­se­ri­men­to nei contenuti di WordPress

La di­men­sio­ne delle immagini inserite dalla Libreria mul­ti­me­dia­le di WordPress nel contenuto può essere mo­di­fi­ca­ta anche in seguito. Ad esempio, tramite l’editor di WordPress Gutenberg, che offre anche un ventaglio di opzioni si­gni­fi­ca­ti­va­men­te più ampio rispetto al classico editor TinyMCE.

Se de­si­de­ra­te salvare le vostre im­po­sta­zio­ni in­di­vi­dua­li per riu­ti­liz­zar­le in seguito, potete uti­liz­za­re il blocco di Gutenberg “Aggiungi ai blocchi riu­ti­liz­za­bi­li” e bloccarlo contro le modifiche in­vo­lon­ta­rie: un enorme risparmio di lavoro nel caso in cui pub­bli­chia­te spesso nuovi contenuti.

Per alcuni siti pro­fes­sio­na­li, ad esempio un sito web per fotografi, po­treb­be­ro essere necessari ulteriori formati di immagine. Nella nostra guida “Com­pri­me­re le immagini” trovate ulteriore as­si­sten­za per regolare le di­men­sio­ni delle immagini, ad esempio per i plugin per creare gallerie su WordPress.

Di­sat­ti­va­re le di­men­sio­ni pre­de­fi­ni­te di WordPress per le immagini

Il modo più semplice per di­sat­ti­va­re le di­men­sio­ni pre­im­po­sta­te delle immagini è uti­liz­za­re il plugin “Disable Media Sizes”. Nelle sue im­po­sta­zio­ni, sono elencati anche tutti i sette formati di immagine generati.

Se­le­zio­nan­do le im­po­sta­zio­ni del plugin qui mostrate, si fa in modo che i formati de­se­le­zio­na­ti non vengano generati. Il ca­ri­ca­men­to dell’immagine originale, però, non può essere di­sat­ti­va­to. Ciò può risultare van­tag­gio­so se de­si­de­ra­te generare altri formati in un secondo momento.

Ot­ti­miz­za­re ul­te­rior­men­te le immagini per WordPress con i plugin

JPG e PNG sono di gran lunga i formati più uti­liz­za­ti per le immagini. Le di­men­sio­ni dei file di questi formati di immagine possono essere ul­te­rior­men­te regolate con i programmi di editing. Photoshop, ad esempio, permette di impostare la qualità dell’immagine al momento del sal­va­tag­gio o dell’espor­ta­zio­ne. Lo svan­tag­gio di questo metodo è che ogni immagine deve essere mo­di­fi­ca­ta in­di­vi­dual­men­te e poi caricata. In genere, i plugin offrono soluzioni più pratiche, oltre a com­pren­de­re spesso un’ampia gamma di funzioni ag­giun­ti­ve.

Ad esempio, i seguenti plugin WordPress per regolare le di­men­sio­ni dei file e delle immagini hanno un alto numero di in­stal­la­zio­ni e buone va­lu­ta­zio­ni:

• EWWW Image Optimizer: supporta i formati JPG, PNG, GIF, PDF, WebP, SVG, WebP
• TinyPNG: supporta JPG, PNG, WebP
• Imagify: supporta JPG, PNG, PDF, GIF, WebP
• Re­ge­ne­ra­te Thumb­nails: non ag­gior­na­to da tempo
• Image Re­ge­ne­ra­te & Select Crop: come sopra

Prima di provare i plugin, ri­cor­da­te­vi di pro­teg­ger­vi da eventuali perdite di dati ef­fet­tuan­do un backup di WordPress, nel caso in cui qualcosa dovesse andare veramente storto.

Con­clu­sio­ne: ot­ti­miz­za­re le di­men­sio­ni delle immagini di WordPress

Gli strumenti integrati di WordPress includono la pos­si­bi­li­tà di ottenere immagini di varie di­men­sio­ni pre­de­fi­ni­te e ot­ti­miz­za­te. I plugin offrono però un ventaglio di opzioni de­ci­sa­men­te più ampio. È possibile per­so­na­liz­za­re le di­men­sio­ni delle immagini anche mo­di­fi­can­do il codice PHP, ma questo richiede un buon livello di espe­rien­za in materia di pro­gram­ma­zio­ne. Come ultima cosa, ma non meno im­por­tan­te, è bene ri­cor­dar­si di non tra­scu­ra­re la SEO per le immagini.