Guida per principianti alle dimensioni delle immagini di WordPress (+ best practice)

Scopri gli elementi essenziali del ridimensionamento delle immagini in WordPress in questa guida per principianti facile da seguire. Scopri come WordPress crea automaticamente miniature, medie e grandi dimensioni delle immagini, perché queste dimensioni sono importanti per l'aspetto e le prestazioni del tuo sito e come WP Media Folder può aiutarti a rimanere organizzato.

 Questa guida spiega le dimensioni predefinite delle immagini di WordPress (miniatura, media, grande), perché esistono e come personalizzarle per il tuo tema. Vedremo anche come il plugin WP Media Folder può aiutarti a gestire le tue immagini. Anche se non hai competenze tecniche, sarà comunque facile da seguire. Imparerai comunque esattamente come WordPress gestisce le dimensioni delle immagini e come regolarle.

Panoramica delle dimensioni predefinite delle immagini di WordPress

Quando carichi un'immagine su WordPress, vengono create automaticamente diverse versioni dell'immagine da pubblicare in diverse posizioni del tuo sito. Per impostazione predefinita, WordPress genera:

• Miniatura : versione quadrata da 150 × 150 pixel. Spesso utilizzata nelle anteprime dei blog, nei widget e nelle gallerie.
• Medio : una versione ridimensionata in modo che il lato più lungo sia di 300 pixel. Se l'immagine è più alta che larga, potrebbe essere alta 300 pixel e larga meno, o viceversa.
• Grande : una versione in cui il lato più lungo è di 1024 pixel. Ideale per immagini in evidenza a larghezza intera o intestazioni di post di blog.
• Completo : il file esatto che hai caricato, non modificato.

WordPress seleziona la dimensione ottimale da pubblicare in base a dove viene visualizzata l'immagine. Una piccola miniatura in un elenco di post viene pubblicata con una dimensione di 150 × 150; un banner con immagine in evidenza potrebbe utilizzare una dimensione massima di 1024 px. Questo sistema ottimizza la velocità di caricamento, l'utilizzo della larghezza di banda e l'aspetto su tutti i dispositivi e le dimensioni dello schermo.

Perché WordPress genera queste dimensioni automaticamente

• Per garantire che le immagini si adattino correttamente alle aree di progettazione (ad esempio, non ingrandite o sfocate).
• Per ridurre le dimensioni dei file e migliorare le prestazioni di caricamento delle pagine, in particolare sui dispositivi mobili
• Per semplificare il flusso di lavoro dei creatori di contenuti: non è necessario alcun ridimensionamento manuale.

Se l'immagine caricata è più piccola delle dimensioni generate da WordPress (ad esempio, una foto larga 800 px), WordPress creerà solo dimensioni fino alle dimensioni supportate dall'immagine, quindi le dimensioni grandi non supereranno quelle originali.

Procedure consigliate per l'utilizzo delle dimensioni predefinite delle immagini

Ecco alcuni casi d'uso comuni per ciascuna dimensione predefinita:

Miniature

Utilizzalo per griglie di gallerie, anteprime di post di blog, widget o elenchi della barra laterale. Non usare le dimensioni delle miniature per un'area di visualizzazione ampia, altrimenti apparirà pixelata.

Per questo esempio abbiamo utilizzato una galleria creata con la WP Media folder.

medio

Ideali per immagini in linea all'interno di post di blog o banner più piccoli. Garantiscono un buon equilibrio tra chiarezza e dimensioni del file.

Grandi dimensioni

Da utilizzare per immagini a larghezza intera, intestazioni in evidenza, slider o sezioni a schermo intero. Evitare di utilizzare originali a dimensione intera, a meno che non sia assolutamente necessario (ad esempio, foto di alta qualità), poiché possono essere ingombranti e rallentare il caricamento della pagina.

Si sconsiglia di caricare file originali di grandi dimensioni (ad esempio, migliaia di pixel di larghezza o immagini TIFF o PNG ad alta risoluzione). Occupano più spazio di archiviazione e possono rallentare il sito o il server di elaborazione multimediale. Idealmente, carica immagini ridimensionate in modo che corrispondano approssimativamente alla larghezza massima di visualizzazione del tema (ad esempio, 1200 px di larghezza se l'area dei contenuti è di 1200 px).

Come personalizzare le dimensioni delle immagini per il tuo tema

Per impostazione predefinita, WordPress utilizza le dimensioni in Impostazioni > Media , ma potresti voler adattare tali dimensioni o aggiungerne di nuove in base alle esigenze del tuo tema.

Modifica delle dimensioni predefinite tramite le schermate di amministrazione

Vai alla dashboard di WordPress > Impostazioni > Media. Qui puoi modificare le dimensioni in pixel per Miniatura, Media e Grande. Dopo aver apportato le modifiche, salva. I caricamenti futuri utilizzeranno le nuove impostazioni.

Tuttavia, le immagini già caricate non verranno rigenerate automaticamente; se in seguito si modificano le dimensioni, sarà necessario utilizzare un plugin di rigenerazione delle miniature.

Aggiungere dimensioni di immagini personalizzate nel codice del tema

NOTA IMPORTANTE: non applicare alcun codice personalizzato senza prima aver creato un backup.

Per registrare nuove dimensioni di immagine oltre a miniatura/media/grande, puoi aggiungere del codice nel file functions.php del tuo tema o in un plugin personalizzato. Esempio:

add_image_size( 'caratteristica personalizzata', 800, 600, true ); 

Viene registrata una nuova dimensione denominata "custom-feature", con larghezza 800px, altezza 600px e ritaglio abilitato.

Quindi puoi richiamarlo nei file del tema:

the_post_thumbnail( 'caratteristica personalizzata' ); 

Oppure in Gutenberg potresti vedere la nuova dimensione nel menu a discesa del blocco immagine, se il tuo tema la supporta.

Puoi aggiungere più dimensioni personalizzate. Dopo averle registrate, rigenera le miniature delle immagini esistenti in modo che WordPress crei le nuove versioni.

Le migliori pratiche per scegliere le dimensioni personalizzate

• Adatta le dimensioni al layout del tuo tema. Ad esempio, le dimensioni del banner dell'intestazione, le dimensioni del post in evidenza del blog o la larghezza dell'immagine nell'articolo.
• Evita di ridimensionare le immagini a dimensioni molto più grandi dei contenitori: sprecano spazio su disco e rallentano il caricamento.
• Utilizzare il ritaglio quando si desiderano immagini con proporzioni coerenti, ad esempio 16:9 o 4:3. Impostare il ritaglio su vero o falso a seconda che si preferisca il ritaglio o la scala proporzionale.
• Dopo aver aggiunto dimensioni personalizzate, testa le immagini inserite per assicurarti che vengano visualizzate correttamente su desktop e dispositivi mobili.

Rigenerazione delle miniature

Se modifichi le dimensioni predefinite o ne aggiungi di nuove, le vecchie immagini non verranno automaticamente create con le nuove dimensioni. Utilizza un plugin come "Rigenera miniature" o simile per rigenerare tutte le dimensioni delle immagini per i caricamenti precedenti. Questo garantisce che la tua libreria multimediale abbia le dimensioni corrette che WordPress può offrire in vari contesti.

Riepilogo delle migliori pratiche

• Carica immagini di dimensioni prossime alla larghezza massima di visualizzazione del tuo tema (ad esempio, 1200 px di larghezza). Lascia che WordPress crei dimensioni più piccole.
• Mantieni le dimensioni predefinite a 150px (miniatura), 300px (media) e 1024px (grande), a meno che il tuo tema non richieda valori diversi. Modificali in Impostazioni > Media.
• Aggiungi dimensioni personalizzate tramite add_image_size() nel codice del tuo tema o plugin per aree di visualizzazione uniche (ad esempio, banner principali, blocchi in evidenza).
• Dopo aver modificato le dimensioni o averne aggiunte di nuove, rigenera le miniature in modo che WordPress crei quelle dimensioni per i vecchi caricamenti.
• Utilizzare il ritaglio quando è necessario mantenere proporzioni coerenti oppure il ridimensionamento proporzionale quando si preferisce mantenere le proporzioni originali.

Suggerimento aggiuntivo: tieni a mente WP Media Folder Se hai bisogno di un'organizzazione basata su cartelle, di una ricerca/filtro multimediale migliorata, di una creazione di gallerie più semplice, della sostituzione dei contenuti multimediali e di altri miglioramenti del flusso di lavoro, funziona perfettamente con la configurazione di ridimensionamento delle immagini.

Conclusione: padroneggia le dimensioni delle immagini di WordPress per siti veloci e belli

Comprendere le dimensioni delle immagini di WordPress ti aiuta a servire l'immagine giusta nel posto giusto. Miniatura, Media e Grande sono progettate per bilanciare qualità e prestazioni. Puoi personalizzare queste dimensioni o aggiungerne di nuove in base al layout del tuo tema. WP Media Folder aggiunge struttura a cartelle, gestione avanzata, strumenti di sostituzione, filigrana e strumenti per gallerie al sistema multimediale predefinito di WordPress.

Anche se non ti consideri un esperto di tecnologia, questi passaggi sono semplici: regola le impostazioni in Media, installa il plugin di rigenerazione dopo le modifiche, eventualmente registra le dimensioni personalizzate nel tuo tema e usa WP Media Folder per organizzare la tua libreria multimediale in modo più efficiente. In questo modo, le tue immagini saranno fantastiche, si caricheranno velocemente e saranno facili da gestire.