Ottimizzazione dell'immagine per il tuo sito Web WordPress (in 4 semplici passaggi)

Nel mondo digitale, essere veloci significa avere successo . Un sito web veloce significa più visite, più condivisioni e più vendite.

Tuttavia, questo bisogno di velocità può entrare in conflitto con il tuo desiderio di immagini vivide. Dopotutto, cos'è un sito web senza immagini? Le immagini danno carattere alle pagine web e coinvolgono gli utenti. E se hai un sito web di fotografia, è assolutamente necessario un ambiente ricco di immagini.

Tuttavia, le immagini possono appesantire un sito. Ecco perché è necessario ottimizzarli. In questo post, illustrerò il motivo per cui l'ottimizzazione delle immagini è fondamentale e fornirò quattro semplici passaggi che puoi seguire per ridurre i file di immagine, senza una notevole perdita di qualità, in modo che il tuo sito veda tempi di caricamento più rapidi e un'esperienza utente senza interruzioni.

Perché dovresti ottimizzare le tue immagini

Ridurre le dimensioni dell'immagine accelererà il tuo sito; i cui vantaggi potrebbero essere più grandi di quanto tu sappia.

Le immagini accumulano secondi in più rispetto al tempo già necessario per caricare la pagina. E quando si tratta di elementi web che rendono il tuo sito lento, le immagini sono spesso il colpevole. Google afferma che "le immagini spesso rappresentano la maggior parte dei byte scaricati su una pagina Web e spesso occupano anche una quantità significativa di spazio visivo".

Se il tuo sito è fortemente incentrato sulla fotografia, allora hai ancora più immagini del tuo tipico webmaster. Questo peggiora solo il problema della velocità.

Le immagini rallentano il tuo sito. E allora? È qui che entra in gioco la ricerca sulla velocità del sito. La linea di fondo è che i tempi di caricamento lenti danneggeranno la tua attività.

Google utilizza effettivamente la velocità del sito come fattore per determinare il ranking di ricerca. Non è un componente fondamentale delle classifiche, ma conta comunque.

Ancora più importante, dovresti capire che per ogni secondo che la tua pagina subisce in ritardo, potresti vedere una diminuzione del 7% delle conversioni . Prendendo quel numero come indicativo, se guadagni, diciamo, $ 3.000 al mese dal tuo sito, perdi $ 210 di entrate su ogni capovolgimento del calendario: $ 2.520 di perdite nel corso dell'anno.

Ma forse non stai facendo soldi con il tuo sito. Forse vuoi solo generare traffico e stabilire un pubblico. Anche in questo caso, la velocità conta comunque. Ad esempio, un sito più lento significa meno condivisioni sui social. Significa anche meno visite continue. Infatti, se un sito si blocca per più di tre secondi, il 40% delle persone semplicemente lo abbandonerà .

Google ha fatto un esperimento interessante per valutare l'impatto della velocità del sito. Dopo che alcuni utenti hanno affermato che preferirebbero 30 risultati di ricerca per pagina, la società l'ha provata su alcune pagine. Quello che hanno scoperto è che l'aggiunta di risultati extra aggiungeva mezzo secondo ai tempi di caricamento e riduceva il traffico del 20%.

Quindi, come si fa, come fotografo, a evitare le potenziali insidie ​​di un sito web basato sulle immagini? Ecco come puoi ottimizzare le tue immagini per prestazioni migliori:

Passaggio 1: ritaglia le tue immagini

Questo primo passaggio è piuttosto semplice: ritaglia le tue immagini.

Come mai? Due motivi:

1. Attrazione estetica.
2. Dimensione file inferiore.

Il primo è abbastanza ovvio. Ci sono tutti i tipi di modi per ritagliare le immagini che aumentano l'appeal visivo. Come professionista creativo, probabilmente stai già ritagliando. In caso contrario, è ora di iniziare a pensare a come utilizzare il ritaglio per rimuovere i dettagli indesiderati, rifocalizzare l'enfasi dello scatto e così via.

Ma il fascino estetico è solo un bonus. Il grande impatto risiede nella capacità del ritaglio di ridurre le dimensioni del file. Se tagli via intere sezioni di un'immagine, sia che ciò significhi tagliare alcuni pixel dal lato sinistro o eliminare aree più grandi nella periferia, stai riducendo la quantità di dati che devono essere trasferiti ai visitatori.

Passaggio 2: scegli il tipo di file corretto

Dopo aver ritagliato un'immagine, il primo passaggio dell'ottimizzazione dell'immagine è selezionare un tipo di file. Diversi formati di file vedono un uso comune per le immagini sul Web e ciascuno è utile per cose diverse.

Non si tratta di esistere un tipo di file per controllarli tutti (questo non è Il Signore degli Anelli ). Invece, i tipi di file sono come strumenti in una casella degli strumenti; devi scegliere quello giusto per il lavoro.

Ecco i formati di file chiave che dovresti considerare:

JPEG

Questo formato di file è stato creato appositamente per comprimere efficacemente le immagini, in particolare i dati fotografici.

È la scelta migliore per la fotografia o altre immagini realistiche con dettagli significativi. I JPEG hanno una compressione "con perdita", il che significa che, sebbene ottimizzino bene, lo fanno a scapito della perdita di alcune informazioni. Per la tua fotografia media, un JPEG ben compresso farà un buon lavoro con poca perdita di nitidezza dell'immagine.

GIF

Nonostante siano il tipo di file immagine più antico di uso comune oggi, le GIF sono ancora utili.

Supportano solo 256 colori, quindi non vorresti mai usarli per l'illustrazione, la pittura o la fotografia. Tuttavia, le GIF possono avere sfondi trasparenti, il che è elegante. Poi c'è la caratteristica distintiva delle GIF: l'animazione. Qui è facile ottenere un file di piccole dimensioni, quindi considera di salvare l'immagine come GIF se è semplice o coinvolge l'animazione.

PNG

Come le GIF, i file PNG supportano sfondi trasparenti. Ma a differenza delle GIF, sono completamente "senza perdite" e possono incorporare un'ampia gamma di colori. Non vorrai salvare una fotografia come PNG, ma se hai un'immagine con transizioni distinte e grandi aree di colore solido (mi vengono in mente testo e grafica), allora il formato PNG funzionerà meglio.

SVG

L'acronimo di questo tipo di file sta per Scalable Vector Graphics. Un SVG utilizza un linguaggio di markup per generare immagini che possono essere ridimensionate a qualsiasi dimensione. Il formato SVG è ideale per la grafica bidimensionale e aumenterà notevolmente la velocità del sito. Tuttavia, questo tipo di file è ancora in una fase di relativa infanzia e il supporto del browser è alquanto irregolare.

Passaggio 3: scegli un buon programma di ottimizzazione delle immagini

Prendere decisioni sul ritaglio e sul tipo di file può diventare stancante. Fortunatamente uno dei modi migliori per ridurre le dimensioni dei file comporta poche decisioni da parte tua.

I programmi di ottimizzazione delle immagini fanno molto lavoro pesante. Eccone alcuni fantastici:

• TinyPNG. Questa app basata sul Web riduce selettivamente il numero di colori nel file PNG, riducendo le dimensioni del file con una differenza quasi invisibile nella qualità dell'immagine.
• JPEGmini. Alla base di questo software c'è una tecnologia in attesa di brevetto che cerca di ridurre il più possibile le dimensioni dell'immagine senza influire sulla qualità. Puoi ottenere una prova gratuita o pagare per usarlo su base continuativa.
• RIVOLTA. Il Radical Image Optimization Tool, che puoi scaricare gratuitamente, utilizza una varietà di tecniche per ridurre le dimensioni dei file delle immagini. Il programma è accurato perché offre una vista affiancata dell'immagine originale e dell'immagine appena ottimizzata.
• ImageOptin. Questa è un'app gratuita per Mac che utilizza anche una varietà di tecniche per ridurre le dimensioni dell'immagine preservando il più possibile la qualità.

Oltre alle app standalone, WordPress offre una serie di plug-in che possono consentirti di raggiungere gli stessi scopi piuttosto facilmente. Ecco i nostri primi tre:

1. Ottimizzatore di immagini EWWW
2. TinyPNG per WordPress
3. WP Smush.it

Passaggio 4: crea miniature

Le miniature sono un ottimo modo per bilanciare il compromesso tra file di piccole dimensioni e immagini grandi e ad alta risoluzione.

Come parte della sua funzionalità predefinita, WordPress fornisce un'opzione di anteprima, che genera una piccola anteprima (sia fisica che di dimensione del file) dell'immagine. Queste immagini possono ridurre drasticamente i tempi di caricamento della pagina.

Il problema con le immagini piccole, ovviamente, è che non puoi mostrare i dettagli vibranti di una determinata foto o immagine. Fortunatamente, WordPress fornisce un modo semplice per aggirare questo problema. Quando rilasci una miniatura in un post o in una pagina, puoi aggiungere un collegamento all'immagine originale andando al menu degli allegati e selezionando "File multimediale". I visitatori possono quindi fare clic sulla miniatura per vedere una versione ingrandita e ad alta risoluzione dell'immagine in questione.

Conclusione

La velocità del sito è importante. Senza di essa, potresti vivere, ma non prospererai . Un importante punto di leva per ridurre la velocità di caricamento della pagina è ottimizzare le immagini prima di metterle online.

Quali tattiche o programmi utilizzi per ottimizzare le immagini? Fatecelo sapere lasciando una riga nei commenti. E se hai domande, non esitare a chiedere!

Crediti immagine: Wikimedia