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 è un 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 quando le immagini vengono caricate. Ciò garantisce che anche se si dispone di un'immagine originale di 3000 px, non viene mai utilizzata se è sufficiente un'immagine 600 px. Idealmente, uno spazio largo 600 px dovrebbe utilizzare un'immagine di 600 pixel invece di ridurne uno più grande.

In questo articolo ti illustrerò le dimensioni dell'immagine e come definirle.

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 queste possono essere modificate 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, anziché una versione ridotta dell'originale.

Ciò è estremamente utile perché consente di risparmiare larghezza di banda sul server e tempo di elaborazione sul computer client . Penso che non sorprenda che il download di un'immagine 600 × 400 sia più veloce rispetto al download di un'immagine 1200 × 800.

Se viene utilizzata un'immagine più grande che deve essere ridimensionata, il browser deve occuparsi dei calcoli per farlo accadere. 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 quello di utilizzare 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 primo piano 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, potresti anche voler mantenere una miniatura separata / dimensioni medie / grandi come definito nelle impostazioni per consentire 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 la 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.

Esistono numerose altre funzioni come wp_get_attachment_image () e wp_get_attachment_image_src () che utilizzano anche il parametro della dimensione dell'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 tue immagini, tenendo conto di tutte le dimensioni dell'immagine definite. Può anche mirare a un'immagine specifica, che è utile se ne hai solo alcune 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 "example-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, l'immagine posta in arrivo di una grande dimensione verrà ridotta al minimo in quanto la larghezza massima sarà 786px o giù di lì.

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 si possono usare molte tecniche per ridurre i tempi di caricamento che accompagnano le immagini. Ashutosh KS ha scritto un ottimo articolo in cui vengono mostrati 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.

Foto di profilo dinamico per Mockup di interfaccia con diversa interfaccia utente

Quando stai progettando un mockup, prima devi concentrarti sull'interfaccia e meno sull'estetica. Lo stesso vale per il wireframing e la codifica di un layout web da zero .Molti mockup diversi richiedono foto del profilo, come social network, commenti sui blog e pagine del profilo. Con Diverse UI, puoi facilmente incorporare queste foto nel tuo mockup con pochi clic

(Consigli tecnici e di design)

404 non trovato e 9 errori HTTP più comuni spiegati

A parte l'errore 404, quante altre pagine di errore HTML conosci? Hai mai pensato a cosa succede in background quando vedi una di queste pagine di errore HTML sullo schermo?Quei codici hanno lo scopo di trasmettere informazioni importanti all'utente . Può essere utile conoscerli meglio, soprattutto se sei il proprietario di un sito web.

(Consigli tecnici e di design)