Non amate le immagini?

Le immagini possono trasformare un testo in un'esperienza coinvolgente durante la lettura. Le immagini migliorano un post del blog, lo rendono più condivisibile e definiscono il tono e il marchio dell'intero sito.

Per questo motivo, incorporare immagini nei vostri contenuti è uno strumento potente da utilizzare per il marketing del vostro blog.

Ma, se non si fa attenzione, le immagini possono rappresentare oltre la metà (o più) della dimensione totale della pagina web. Solo pochi anni fa, la dimensione media di una pagina web era di 600-700K. Ora, la media è di 2MB e aumenta ogni anno.

È una cosa enorme!

Il motivo principale per cui ciò accade è che nelle pagine web si utilizzano sempre più spesso immagini multiple, che non sono dimensionate e ottimizzate in modo corretto, ovvero non vengono salvate o compilate in modo compatibile con il web, ma gonfiano le pagine.

La maggior parte di noi, però, lascia l'ottimizzazione delle immagini come un ripensamento e preferisce dedicarsi alle cose più divertenti, come la creazione di un post epico o il networking con altri blogger della propria nicchia.

Tuttavia, la presenza di page bloat influisce sulla velocità di caricamento della pagina. Se si dispone di una connessione ad alta velocità, questo potrebbe non essere un problema, ma molti visitatori non lo sono. Inoltre, a Google non piacciono le pagine lente e ciò può influire negativamente sulla SEO.

Perché è necessario ottimizzare le immagini

Lavorate duramente alla creazione di contenuti stellari e passate innumerevoli ore a promuovere il vostro blog e a fare rete con altri blogger, quindi l'ultima cosa che volete è che i potenziali visitatori abbandonino il vostro sito prima ancora che venga caricato!

Gli studi dimostrano che fino al 40% dei visitatori clicca sul pulsante indietro se un sito impiega più di tre secondi a caricarsi.

Lo so, tre secondi non sono poi così tanti, ma quando si è su una connessione mobile e si attende il caricamento di un sito, un secondo può sembrare un'eternità.

E poiché molti dei vostri visitatori potrebbero utilizzare connessioni mobili più lente, è chiaro che dovete ridurre le dimensioni delle vostre pagine. E sappiamo già qual è il principale responsabile del gonfiore delle pagine: le immagini.

Anche le immagini inutilmente grandi occupano spazio sul vostro account di hosting. Sebbene alcuni di voi abbiano un hosting con spazio di archiviazione "illimitato", molti provider di hosting premium vi limitano a circa 10 GB di spazio di archiviazione sui piani di livello inferiore. Questo può riempirsi rapidamente, soprattutto se ospitate più siti ricchi di immagini sullo stesso account.

Come si fa a capire se le immagini rallentano il sito? Verificate la velocità del vostro sito con Google PageSpeed Insights.

Se Google segnala come problema le immagini non ottimizzate, ecco cosa dovete sapere per risolvere il problema.

Nozioni di base sull'ottimizzazione delle immagini

Quando si tratta di ottimizzare le immagini sul proprio blog, è necessario tenere conto di alcuni aspetti: il tipo di file, le dimensioni dell'immagine, il modo in cui vengono servite le immagini e la compressione delle immagini.

Diamo uno sguardo più da vicino a ciascuna di queste aree.

Tipo di file

Le immagini sul web sono solitamente salvate in formato PNG o JPEG, o GIF per le animazioni. Chi non ama le divertenti GIF animate che circolano sul web?

Ora è tecnicamente ok Se salvate le immagini in entrambi i formati, il browser del visitatore non avrà problemi a visualizzare la vostra pagina web, ma per ottenere la migliore qualità e ottimizzazione, attenetevi alle seguenti regole:

• JPEG - da utilizzare per fotografie e progetti in cui sono presenti persone, luoghi o cose.
• PNG: ideale per grafica, loghi, progetti con molto testo, screenshot e quando si ha bisogno di immagini con sfondo trasparente.
• GIF - se è necessaria un'animazione, altrimenti utilizzare PNG

Allora, perché ci sono formati diversi?

Il PNG è tradizionalmente usato per salvare loghi e grafici perché preserva la qualità dell'immagine originale: nessuno vuole testo sfocato e forme pixelate. Tuttavia, se si prova a salvare una foto come PNG, l'aspetto sarà fantastico, ma le dimensioni del file risultante saranno tutt'altro che sorprendenti.

Il JPEG è tradizionalmente utilizzato per salvare le foto. Una parte dei dati dell'immagine viene eliminata per ridurre drasticamente le dimensioni del file, ma poiché le foto contengono un'ampia varietà di colori e variazioni naturali, la perdita di qualità è solitamente impercettibile per l'occhio umano.

Più avanti parleremo in modo più dettagliato della compressione, ma per il momento ricordate solo due cose: JPEG per le foto e PNG per il testo/la grafica.

Dimensioni dell'immagine

Vi è mai capitato di caricare una pagina web e di notare che un'immagine minuscola (ad esempio, un'immagine della testa) impiega un sacco di tempo per essere scaricata, così lentamente che potete vedere ogni riga che arriva? Pensate a voi stessi: come può un'immagine così piccola impiegare così tanto tempo per essere scaricata?

E quando succede a un'immagine di intestazione di grandi dimensioni, è ancora peggio perché può bloccare il caricamento dell'intera pagina.

Questo accade perché il blogger non ha ridimensionato e ottimizzato correttamente la propria immagine e, nel caso del nostro esempio, potrebbe aver caricato un JPEG a piena risoluzione direttamente dalla propria fotocamera DSLR.

Ed è un file enorme!

Un browser web (di solito) ridimensiona un'immagine rispetto alle sue dimensioni originali in modo che si adatti bene al suo posto in una pagina web. Quella che sembra un'immagine piccola sullo schermo potrebbe essere in realtà un'enorme foto da 10 megapixel, ridimensionata in tempo reale dal browser.

Alcune piattaforme di pubblicazione web creeranno automaticamente più varianti della vostra immagine a piena risoluzione in diverse dimensioni, ma in caso contrario, dovreste ridimensionare le vostre immagini in anticipo con un editor di immagini come Photoshop, Lightroom, Pixlr o persino MS Paint. Può fare la differenza tra un file di 50K e uno di 5MB.

WordPress, ad esempio, crea automaticamente tre (o più, a seconda del tema) copie dell'immagine caricata, tutte con dimensioni diverse, che possono essere utilizzate nei post del blog, invece di utilizzare sempre l'immagine a grandezza naturale.

Se avete l'abitudine di caricare enormi immagini di foto stock e volete risparmiare spazio nel vostro account di hosting, il plugin WordPress Imsanity vi aiuta.

Ridimensiona e sostituisce l'immagine originale con qualcosa di più maneggevole, così anche se si inserisce l'immagine a grandezza naturale nel post, non sarà poi così male.

Una volta attivato, Imsanity può anche cercare le immagini esistenti e ridimensionarle di conseguenza.

Servire le immagini

Il modo in cui vengono servite le immagini ai visitatori non è di per sé strettamente legato all'ottimizzazione, ma può avere un impatto notevole sul tempo di caricamento della pagina.

La maggior parte dei blogger serve le proprie immagini direttamente dal proprio account di hosting e questo di solito va bene, ma se volete davvero ottenere il massimo delle prestazioni dal vostro sito, allora l'hosting delle immagini su una Content Delivery Network (CDN) può fare una grande differenza.

Un CDN consiste in server web strategicamente posizionati in centri dati di tutto il mondo. Questi server ospitano copie duplicate delle vostre immagini e quando il browser di un visitatore richiede un'immagine dal vostro sito web, il CDN indirizza automaticamente il browser verso il server geograficamente più vicino.

Ciò significa che i visitatori provenienti dall'Europa, ad esempio, riceveranno le immagini da un server locale europeo, anziché da uno degli Stati Uniti o da un altro paese. Poiché i tempi di risposta e la latenza di rete sono ridotti, le immagini vengono scaricate molto più velocemente, riducendo il tempo di caricamento della pagina.

Blogging Wizard utilizza Sucuri (che include un firewall per la sicurezza e un CDN), ma esistono altri fornitori di qualità come Cloudfront di Amazon o KeyCDN. Anche il popolare CloudFlare, che non è propriamente un CDN, offre un CDN gratuitamente ed è facile da configurare nella maggior parte dei pacchetti di hosting condiviso.

Compressione dell'immagine

Quando si tratta di ottimizzare le immagini, niente riduce le dimensioni dei file più della compressione avanzata delle immagini con perdita.

La maggior parte degli strumenti di modifica delle immagini, come Visme o Photoshop, salvano i file utilizzando la compressione JPEG lossy, che consente di ridurre al meglio le dimensioni dei file. Quindi, sebbene la qualità dell'immagine sia leggermente ridotta, l'utilizzo della compressione lossy riduce le immagini di grandi dimensioni a dimensioni adatte al Web.

Sono sicuro che molti di coloro che usano Photoshop potrebbero vedere il suo Salva per il Web e anche gli strumenti di editing online, come PicMonkey o Visme, ottimizzano le immagini.

Ma sapevate che esistono strumenti in grado di prendere la vostra immagine "ottimizzata" da Photoshop o da altri strumenti di editing, di sminuzzarla e comprimerla di un altro 40% (o più), e di ancora che appaia quasi identico all'occhio umano?

Ecco alcuni strumenti, gratuiti e a pagamento, che vi aiuteranno a ridurre le vostre immagini a un livello adatto al web.

Strumenti desktop

ImmagineAlfa / ImmagineOptim

Per gli utenti Mac, ImageOptim è uno strumento desktop gratuito che uso ogni giorno per ottimizzare le immagini PNG, per lo più schermate, prima di caricarle. Questi strumenti sono facili da usare, basta trascinare e rilasciare i file, ma bisogna lavorare su un'immagine alla volta.

Suggerimento professionale Per gli esperti di tecnologia c'è ImageOptim-CLI, che consente di ottimizzare un'intera cartella di immagini in una sola volta.

ImageAlpha è un compressore PNG con perdita di dati e può fare miracoli nella riduzione dei file PNG, mentre ImageOptim esegue una compressione avanzata senza perdita di dati (con possibilità di perdita di dati) e rimuove i metadati non necessari dai file PNG, JPEG e GIF.

Per le mie immagini PNG, le passo prima attraverso ImageAlpha:

Qui, ha ridotto l'immagine della mia schermata da 103K a 28K.

L'ho poi passata a ImageOptim e ho risparmiato un ulteriore 10%.

JPEGmini

Per i miei file JPEG, li ottimizzo con l'applicazione desktop JPEGmini, disponibile sia per Mac che per Windows.

La versione Lite consente di ottimizzare gratuitamente fino a 20 immagini al giorno e costa 19,99 dollari per rimuovere il limite.

Suggerimento professionale Gli utenti avanzati che desiderano integrare JPEGmini in Photoshop o Lightroom tramite un plugin possono acquistare la versione Pro a 99,99 dollari.

Strumenti online / Cloud / SaaS

TinyPNG

Se state cercando uno strumento di compressione delle immagini online di alta qualità, TinyPNG (ottimizza anche i file JPEG, nonostante il nome) è un'applicazione web che consente di trascinare nel browser fino a 20 immagini da 5 MB o più piccole e di ottimizzarle tutte in una volta.

Dispongono inoltre di un'API per sviluppatori e di un plugin per WordPress in grado di ottimizzare automaticamente le immagini al momento del caricamento.

TinyPNG offre 500 ottimizzazioni di immagini gratuite al mese, dopodiché addebita 0,002-0,009 dollari per immagine, a seconda del volume.

Ora, 500 immagini al mese possono sembrare tante, ma se si considera che WordPress spesso crea da tre a cinque varianti di ogni immagine in diverse dimensioni, 500 immagini non sembrano poi così tante. che molti Per fortuna, il costo per immagine è conveniente.

Ottimizzatore di immagini EWWW

Se non siete pronti a spendere soldi e non volete preoccuparvi di ottimizzare le immagini manualmente, il plugin gratuito EWWW Image Optimizer per WordPress può ottimizzare automaticamente le immagini caricate.

È possibile optare per un abbonamento premium che esegue la compressione con perdita di dati, ma la versione gratuita esegue solo la compressione senza perdita di dati, quindi il risparmio non è così sostanziale. Tuttavia, fa risparmiare tempo ed è meglio di niente.

Nota: Per una panoramica completa, consultate il nostro post sugli strumenti di compressione delle immagini.

Avvolgimento

Poiché alcuni prevedono che la dimensione media delle pagine web si avvicinerà a 3 MB entro il 2017, è il momento di iniziare a ottimizzare le immagini.

Ricordate che non tutti i vostri visitatori dispongono di connessioni ad alta velocità e che il gonfiore della pagina e i tempi di caricamento lenti possono potenzialmente influire sul vostro posizionamento su Google. Per alleggerire il carico, per così dire, prendete l'abitudine di ottimizzare le vostre immagini oggi stesso.

Prestate attenzione alle dimensioni delle immagini e ridimensionate le foto di stock troppo grandi o le immagini scattate da una fotocamera digitale a una dimensione adeguata.

Quindi, sfruttate la moderna compressione delle immagini con applicazioni desktop come JPEGmini o strumenti cloud come TinyPNG o Kraken, integrandoli in WordPress con un plugin, se possibile.

Infine, se la vostra piattaforma di pubblicazione crea automaticamente variazioni ridimensionate dell'immagine originale, scegliete una di queste per il vostro post, piuttosto che quella originale a grandezza naturale.

Lettura correlata: 7 modi per ridurre le dimensioni dei file PDF.