Spiegazione delle dimensioni delle immagini di WordPress

Le dimensioni delle immagini di WordPress a volte possono essere un po' un mistero! Hai mai visto questa pagina delle impostazioni multimediali nella tua area di amministrazione e ti sei chiesto di cosa si tratta?

In questo articolo analizzeremo le dimensioni delle immagini di WordPress, di cosa trattano e come ciò può influire su cose come i tempi di caricamento. Inoltre, esamineremo anche come WordPress utilizza queste diverse dimensioni delle immagini nei layout dei siti Web. E infine daremo un'occhiata a come rimuovere le dimensioni delle immagini non necessarie o aggiungere le tue dimensioni personalizzate.

Qual è il ruolo delle dimensioni delle immagini in WordPress?

È davvero importante che le immagini sul tuo sito web siano belle, nitide e di alta qualità. Ci sono diversi elementi che determineranno questo, tra cui la dimensione fisica dell'immagine (sia le dimensioni che la dimensione del file) e la risoluzione dell'immagine. Se la tua immagine è troppo grande (ad esempio 10.000 px di larghezza) e la dimensione del file è troppo grande (cioè superiore a 1 MB o giù di lì), inizierai a rallentare la velocità di caricamento del tuo sito web. Al contrario, se la dimensione dell'immagine è troppo piccola, probabilmente vedrai un degrado della qualità dell'immagine... in altre parole potrebbe iniziare a sembrare sfocata o sgranata.

Ospita il tuo sito web con Pressidium

GARANZIA DI RIMBORSO DI 60 GIORNI

GUARDA I NOSTRI PIANI

WordPress cerca di trovare un equilibrio offrendo la dimensione ottimale dell'immagine a seconda della posizione dell'immagine. Lo fa creando 3 diverse dimensioni dell'immagine ogni volta che carichi un'immagine nella Libreria multimediale di WordPress. Si tratta di 'Miniatura', 'Media dimensione' e 'Grande dimensione' con dimensioni rispettivamente di 150×150 pixel, 300×300 pixel (massimo) e 1024×1024 pixel (massimo). Infine memorizzerà anche un'immagine 'Full size' che è la dimensione originale dell'immagine caricata.

Queste dimensioni insieme alle dimensioni aggiuntive che esamineremo in seguito sono utilizzate da WordPress in varie posizioni nel layout del frontend. Questo viene fatto in modo che l'immagine utilizzata sia a) abbia un bell'aspetto sia b) si carichi rapidamente.

Esaminare le dimensioni delle immagini di WordPress in modo più dettagliato

Eseguiamo un esempio in modo da poter vedere esattamente cosa succede "dietro le quinte" quando carichi un'immagine su WordPress. Ai fini di questo esempio, caricheremo un'immagine con il nome 'post1-feature-image'. Ha una dimensione di 294 KB e misura 2089 × 1175 pixel e lo faremo con il tema WordPress Twenty Twenty predefinito attivo (altri temi potrebbero alterare il modo in cui le immagini vengono gestite da WordPress).

Dopo aver caricato questa immagine tramite la libreria multimediale di WordPress possiamo connetterci al nostro sito utilizzando un client FTP e, se andiamo nella cartella Upload, vedremo che sono state create più versioni delle nostre immagini.

Evidenziato in rosso vedrai le nostre dimensioni di immagine predefinite. La miniatura è stata ritagliata poiché è impostata come predefinita tramite le impostazioni multimediali.

Le "dimensioni medie" e le "dimensioni grandi" sono state ridimensionate in modo da evitare di modificare le proporzioni effettive dell'immagine. Quindi, ecco perché ad esempio la "dimensione media" è 300 × 169 anziché 300 × 300. Il resto delle immagini che sono state generate sono il risultato di alcuni file core di WordPress e del codice del tema Twenty Twenty.

Diventa tecnico!

Se sei interessato al codice alla base di ciò che sta accadendo quando vengono create le dimensioni dell'immagine aggiuntive, questa sezione dell'articolo è per te. In caso contrario, sentiti libero di saltare al capitolo successivo!

WordPress sta estraendo le istruzioni da un file chiamato media.php che si trova all'interno della cartella wp-includes/. Vai a questa, riga 4861 e vedrai quanto segue:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg viene creato come risultato della dimensione "medio_grande" che è stata aggiunta nella versione 4.4 di WordPress per un migliore supporto delle immagini reattive e può essere vista su vari dispositivi portatili. È definito nella cartella "wp-admin/includes" nel file schema.php riga 522

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

e richiesto nel file image.php nella riga 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg e post1-feature-image-1980x1114.jpg sono generati dal tema 'Twenty Twenty' all'interno del file functions.php nella riga 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Questo viene fatto perché il tema Twenty Twenty utilizza 1200px come dimensione dell'immagine per le immagini in primo piano. Se creiamo un post di prova e aggiungiamo un'immagine in primo piano, quindi nella pagina del singolo post del frontend possiamo vedere come viene utilizzata questa dimensione facendo clic con il pulsante destro del mouse sull'immagine in primo piano e guardando nell'ispettore del browser.

Infine, l'immagine 1980px è la dimensione utilizzata per l'immagine in primo piano degli altri modelli di post. Puoi vederlo cambiando il modello del post di prova in "Modello di copertina". Quindi, nell'ispettore CSS dell'elemento HTML dell'immagine di copertina possiamo vedere come viene utilizzata questa dimensione:

Vale sempre la pena assicurarsi che qualsiasi immagine che carichi sia più ampia delle larghezze dell'immagine in primo piano e di copertina in modo che appaia nitida. WordPress può ridurre le dimensioni delle immagini in modo efficace ma non può ridimensionare un'immagine piccola e farla sembrare bella.

Rimuovi le dimensioni delle immagini di WordPress non necessarie

Come abbiamo visto, WordPress è impegnato a produrre una gamma di dimensioni di immagini ogni volta che carichiamo un'immagine nella nostra Libreria multimediale. Ma abbiamo davvero bisogno di tutte queste immagini? In realtà, no, non lo facciamo. Non solo rallenta la velocità con cui le immagini vengono caricate poiché WordPress deve lavorare in background creando queste varie dimensioni di immagini, ma occupa anche spazio di archiviazione che non è necessario utilizzare sul nostro server. Quindi, come possiamo impedire a WordPress di creare dimensioni delle immagini di cui non abbiamo bisogno? Continuate a leggere per scoprirlo!

Nota: a meno che tu non stia seguendo queste istruzioni su un sito web demo, ti consigliamo di implementare le modifiche descritte di seguito nel file functions.php di un tema figlio. Le modifiche apportate al file functions.php in un tema principale verranno cancellate al successivo aggiornamento del tema.

Rimuovi le dimensioni dell'immagine predefinite di WordPress

Questo può essere facilmente ottenuto modificando functions.php del tema e aggiungendo il seguente codice:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Per testare, carichiamo una nuova immagine (nel nostro esempio si chiama post2-featured-image) nella libreria multimediale e aggiorniamo la nostra vista FTP della cartella di caricamento.

Come puoi vedere, dicendo a WordPress di rimuovere le 4 dimensioni dell'immagine predefinite tramite il nostro file functions.php, abbiamo interrotto WordPress per crearle nella nostra cartella multimediale. Andando avanti, questo semplice aggiornamento al nostro codice del tema significa che non intaseremo il nostro server con dimensioni delle immagini indesiderate. Ciò consentirà di risparmiare spazio e accelerare il processo di caricamento delle immagini.

Rimozione delle vecchie dimensioni delle immagini dal Catalogo multimediale

Potresti aver notato che mentre le 4 dimensioni delle immagini predefinite non sono state create per la nostra nuova immagine che abbiamo caricato, l'immagine precedentemente caricata ha ancora tutte e 8 le varianti salvate nella libreria multimediale. Con ogni probabilità, a meno che non si tratti di un sito web nuovo di zecca, avrai caricato decine, se non centinaia di immagini e in tutti i casi saranno state create queste dimensioni 'extra'. Quindi che si fa?

La prima cosa da accertare è che hai bisogno di queste immagini? Prima di procedere con la rimozione delle immagini generate da WordPress dovrai confermare che queste dimensioni non sono più utilizzate. Controlla i post del tuo blog, le immagini in primo piano e qualsiasi altra parte del tuo sito Web per assicurarti che nessuna delle vecchie dimensioni sia ancora in uso.

Un ottimo modo per gestire questi file indesiderati delle vecchie immagini è utilizzare il plug-in Force Regenerate Thumbnail che li esaminerà e li cancellerà automaticamente. Installa e attiva il plug-in, quindi premi il pulsante "Rigenera tutte le miniature" dal menu del plug-in (Strumenti-> Forza rigenerazione miniature).

Aggiorna la visualizzazione della tua cartella multimediale FTP e vedrai che le immagini WordPress predefinite sono sparite. Simpatico!

Un altro modo semplice per ottenere lo stesso risultato per le dimensioni predefinite è modificare il valore delle loro dimensioni su "0" da Impostazioni > Media in wp-admin. Vedrai quindi qualcosa del genere:

Un metodo alternativo consiste nel modificare update_option( 'SIZE_w/h', 0 ); all'interno di functions.php. Ricorda di farlo su un file functions.php del tema figlio in modo che le modifiche non vengano perse quando aggiorni il tema in un secondo momento.

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

Quando viene eseguito questo aggiornamento, vedrai che che rifletterà il valore delle dimensioni nelle impostazioni dei media (dall'interno di WP Admin) ora è stato aggiornato a 0.

Rimuovi ulteriori dimensioni dell'immagine del tema

Ora abbiamo affrontato con successo le immagini predefinite prodotte dal core di WordPress. Possiamo ora andare avanti e affrontare le immagini create dal tema (in questo caso Twenty Twenty). Se, come le nostre dimensioni delle immagini predefinite, hai concluso che queste non sono necessarie, puoi apportare alcune modifiche al codice del tuo tema per impedire a WordPress di produrre queste dimensioni in futuro.

Per fare questo useremo l'hook init e la funzione core remove_image_size. Copia il codice qui sotto e incollalo nel tuo file functions.php. Se non stai utilizzando il tema Twenty Twenty come siamo qui, sostituisci i nomi "post-miniatura" e "ventitventi-schermo intero" con il nome del tuo tema attivo.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

Se carichiamo una nuova immagine ora e controlliamo la nostra cartella di caricamento tramite il nostro client FTP, vedremo che tutte le dimensioni sono generate tranne "post-miniatura" e "ventitventi-schermo intero".

Aggiungi la tua dimensione immagine personalizzata

Ora che abbiamo imparato come rimuovere le dimensioni delle immagini ridondanti in WordPress, vediamo come aggiungere le nostre dimensioni delle immagini personalizzate in base alle esigenze del nostro modello.

Come decidiamo di quali dimensioni delle immagini abbiamo bisogno?

Supponendo di avere un sito Web con una colonna principale con larghezza 960px in cui l'immagine della caratteristica è in alto e il contenuto del post in basso. La dimensione dell'immagine desiderata sarà quindi 960px. Non dimenticare di calcolare anche l'eventuale riempimento CSS. Se, ad esempio, gli elementi padre hanno una somma di 20 px di riempimento, la larghezza corretta per l'immagine sarà 920 px. È 960px meno 20px per il riempimento sinistro meno 20px per il riempimento destro.

Registra nuove dimensioni delle immagini

Un modo semplice per registrare nuove dimensioni è utilizzare la funzione incorporata add_image_size() fornita da WordPress. La struttura della funzione è:

 add_image_size( name, width, height, crop )

La maggior parte di queste opzioni sono autoesplicative. L'ultima opzione (ritaglio) determina se WordPress rispetta le proporzioni della nostra immagine durante il ridimensionamento o se ritaglia la nostra immagine. Se l'opzione di ritaglio è impostata su "true", l'immagine verrà ritagliata e le proporzioni non verranno rispettate. Se l'opzione di ritaglio viene saltata o impostata su false, le proporzioni dell'immagine verranno rispettate.

Proviamolo in azione e monitoriamo il risultato utilizzando un'immagine di prova di 2089 × 1175 pixel.

Per prima cosa aggiungiamo questo codice:

 add_image_size( 'new-post-thumb', 220, 180 );

Questo genererà un post2-feature-image-220x124.jpg invece di 220×180 nella nostra cartella dei caricamenti perché il ritaglio non è impostato (falso). Lo stesso accadrebbe se inserissi quanto segue:

 add_image_size( 'new-post-thumb', 220, 180, false );

Se tuttavia imposti il ​​ritaglio su true in questo modo, verrà salvata un'immagine post2-feature-image-220x180.jpg .

 add_image_size( 'new-post-thumb', 220, 180, true );

Infine, puoi dettare il modo in cui verrà posizionato il ritaglio. Invece di "true", usa semplicemente opzioni come "sinistra" o "in alto" o entrambe:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

L'array specifica la posizione del ritaglio. I valori utilizzabili sono:

Per x_crop_position: 'sinistra', 'centro' o 'destra'.
Per y_crop_position: 'top', 'center' o 'bottom'.

L'output in ogni caso sarà una parte diversa dell'immagine originale. Ecco alcuni esempi:

Un'alternativa per eseguire questa operazione manualmente tramite l'aggiunta di codice al nostro tema consiste nell'utilizzare un plug-in come Simple Image Sizes. Nondimeno è utile capire cosa sta succedendo dietro le quinte anche se usi un plugin come questo.

Conclusione

L'uso delle dimensioni corrette delle immagini in WordPress è importante: non solo garantisce un'esperienza utente di alta qualità presentando immagini nitide e ad alta risoluzione al visualizzatore del sito Web, ma influisce anche in modo significativo sui tempi di caricamento e sull'utilizzo del server. Si spera che questo articolo ti abbia aiutato a capire l'importanza delle dimensioni delle immagini in WordPress e i modi in cui puoi ignorare, rimuovere o espandere le dimensioni delle immagini per soddisfare le esigenze del tuo sito Web, nonché come puoi potenzialmente risparmiare un sacco di spazio sul server interrompendo WordPress generando dimensioni non necessarie di ogni immagine che carichi.