Ottimizza le tue immagini con le dimensioni dell'immagine predefinite [Suggerimento WordPress]

Ottimizzare le immagini su un sito Web è un compito scoraggiante. Puoi scegliere di usare meno immagini, immagini compresse, sprite o svg; la lista continua. Un luogo in cui molti siti WordPress sono coinvolti è la definizione delle dimensioni dell'immagine, che è a aspetto cruciale dell'ottimizzazione dei siti con contenuti pesanti.

Le dimensioni delle immagini sono fondamentali perché le immagini vengono create automaticamente in base alle dimensioni fornite al momento del caricamento delle immagini. Ciò garantisce che, anche se si dispone di un'immagine originale di 3000 px, non viene mai utilizzata se è sufficiente un'immagine 600px. Idealmente, uno spazio largo 600 px dovrebbe utilizzare un'immagine di 600 pixel invece di ridurne uno più grande.

In questo articolo ti guiderò quali sono le dimensioni dell'immagine e come definirli.

Come WordPress gestisce le immagini

Se hai mai inserito un'immagine in un articolo di WordPress dovresti venire dal selettore della dimensione dell'immagine. Ciò consente di inserire versioni piccole, medie e grandi delle immagini. Le dimensioni effettive per questi può essere modificato nelle impostazioni di WordPress.

Ogni volta che carichi un'immagine tramite WordPress, genera versioni di queste immagini e le memorizza separatamente. Ad esempio, se carichi un'immagine 1200 × 800, WordPress può creare versioni 100 × 100, 600 × 400 e 900 × 600. Quando si inserisce un'immagine e si sceglie "medio" verrà utilizzata la versione media effettiva, in contrasto con una versione ridotta dell'originale.

Questo è estremamente utile perché conserva larghezza di banda sul server e tempo di elaborazione sul computer client. Penso che non sorprenda che scaricare un'immagine 600 × 400 sia più veloce del download di un'immagine 1200 × 800.

Se viene utilizzata un'immagine più grande che deve essere ridimensionata, il browser deve occuparsi dei calcoli per far sì che ciò accada. Sebbene ciò non richieda ore, potrebbe essere evidente nei siti Web con immagini pesanti.

L'immagine giusta nel posto giusto

L'obiettivo finale dovrebbe essere usa sempre le dimensioni appropriate dell'immagine. Se hai bisogno di un'immagine 440 × 380, quindi prendi un'immagine con quella dimensione esatta dal server. Esistono due luoghi principali in cui utilizzerai le immagini caricate: immagini in primo piano e immagini in-post: ti consiglio di concentrarti innanzitutto sulle immagini presentate.

In tutti gli articoli, tranne quelli visivamente diretti, non importa se un'immagine in post è di 220px o 245px. Qualunque versione tu abbia disponibile sarebbe ugualmente utilizzabile. Le immagini in evidenza, tuttavia, vengono solitamente mostrate con dimensioni comuni. Per gli elenchi di articoli è possibile utilizzare una miniatura 178 × 178, per le intestazioni degli articoli è possibile utilizzare un'immagine ampia 1200 × 600.

Oltre a questi puoi anche voler mantenere una miniatura separata / dimensione media / grande come definito nelle impostazioni darti un facile accesso a dimensioni specifiche quando aggiungi immagini ai post.

Quindi, tutto si riduce a questo: non sarebbe bello se avessimo due dimensioni di immagine extra che potremmo usare per le immagini presentate? Queste dimensioni di immagine verrebbero create proprio accanto al resto quando un'immagine viene caricata. La buona notizia è che WordPress ti ha coperto con una funzione piuttosto semplice.

Creare dimensioni immagine

Usando il funzione add_image_size () puoi definire tutte le dimensioni dell'immagine necessarie per il tuo sito web. Creiamo i due esempi menzionati sopra. Inserisci il codice qui sotto nel file functions.php del tuo tema o nel file di un plugin.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Come puoi vedere, questa funzione richiede quattro parametri. Il primo parametro consente di impostare un nome per la dimensione. Il secondo parametro è la larghezza massima, la terza, l'altezza massima. Il quarto parametro imposta il ritaglio difficile. Se impostato su true, l'immagine verrà creata con le dimensioni esatte specificate.

Una volta che questo è stato aggiunto al tuo tema o plugin, due nuove versioni di ogni file che carichi verranno create da WordPress.

Utilizzando le dimensioni dell'immagine

Queste dimensioni dell'immagine possono essere utilizzate in una serie di funzioni che si occupano del recupero dei supporti. Diamo prima un'occhiata alle immagini presentate. the_post_thumbnail () è comunemente usato per mostrare l'immagine in primo piano di un post. Il seguente codice può essere inserito in un ciclo WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

Il primo parametro di questa funzione consente di specificare la dimensione dell'immagine da utilizzare. Poiché ho specificato "featured_thumbnail", verrà utilizzata la versione 178 × 178 di questo file.

Ci sono un certo numero di altre funzioni come wp_get_attachment_image ()e wp_get_attachment_image_src () che usa anche il parametro dimensione immagine. Ogni volta che usi questa funzione devi sempre specificare una dimensione appropriata dell'immagine.

Miniature rigeneranti

Se hai già un sito sul posto, non sarai in grado di ottimizzare i tuoi articoli in modo retrospettivo semplicemente definendo una dimensione dell'immagine. Le dimensioni delle immagini vengono prese in considerazione solo quando viene caricata una nuova immagine, quindi non vengono applicate alle immagini già presenti nel sistema.

Non temere, il plugin Rigenerate Thumbnails migliorerà le cose! Questo plugin può rigenerare le miniature per tutte le immagini, tenendo conto di tutte le dimensioni dell'immagine definite. Io posso anche scegli come target un'immagine specifica, che è utile se ne hai pochi o stai facendo dei test.

Una volta che le tue miniature sono state rigenerate, dovresti vedere le versioni ottimizzate caricate sul tuo sito. Puoi verificarlo visualizzando la fonte dell'immagine. Se hai caricato 'example.jpeg' e vedi 'example.jpeg' come origine per l'immagine in primo piano, qualcosa non va bene. Se vedi “esempio-178 × 178.jpeg” allora tutto va bene; viene mostrata l'immagine ottimizzata.

Immagini reattive

Una difficoltà nel mantenere un sito ottimizzato è la reattività. Quando visualizzo un articolo sull'iPad, verrà ridimensionata l'immagine posta in arrivo di una dimensione grande poiché la larghezza massima sarà 786 px o così.

La soluzione più semplice è usare un plugin come Hammy. Hammy funziona in base alla larghezza del contenuto del tuo tema (al contrario della larghezza della finestra del browser) e può offrire immagini ottimizzate basate su tale. Ciò è particolarmente utile per gli utenti mobili in cui la potenza di elaborazione e la larghezza di banda potrebbero essere un problema.

Ulteriore ottimizzazione dell'immagine

Come accennato nell'introduzione ci sono innumerevoli modi per ottimizzare le immagini. Dagli sprite alla compressione delle immagini possono essere utilizzate molte tecniche per ridurre i tempi di caricamento che accompagnano le immagini. Ashutosh KS ha scritto un grande articolo che mostra 9 plugin WordPress per migliorare le prestazioni dell'immagine, suggerisco di dargli una lettura!

Suggerisco anche di dare un'occhiata a Hassle Free Responsive Images che mostra come aggiungere supporto per l'elemento picture, qualcosa che vorrete usare se volete scrivere il vostro codice.