Ottimizza le tue immagini e non perdere altro tempo

Secondo HTTPArchive, la dimensione media del sito Web è quasi raddoppiata in 5 anni, da 1 MB nel 2014 a 2 MB nel 2019. Certo, l'accesso a Internet è più veloce che mai, ma, comunque, come mai i siti Web sono così grandi ora? La risposta sta in parte negli asset multimediali in generale e nelle immagini in particolare.

È passato molto tempo da quando i siti web non sono più semplici pagine di testo. Ora sono dinamici, pieni di immagini, video, GIF... e vogliamo che tutte queste risorse appaiano belle e nitide su schermi con risoluzioni enormi.

Se il tuo sito web si carica molto lentamente e non hai mai ottimizzato le tue immagini, ho una buona notizia: oggi imparerai cosa puoi fare per velocizzare il tuo WordPress. Vediamo gli strumenti che puoi utilizzare per migliorare le prestazioni del tuo sito web ed evitare che le immagini ostacolino l'esperienza dei tuoi utenti.

Perché l'ottimizzazione delle immagini è importante

Prima di spiegare i diversi metodi disponibili per ottimizzare le risorse di immagine e accelerare il tuo sito web, vorrei dedicare un paio di minuti per convincerti dell'importanza di farlo.

Le immagini hanno un enorme impatto sulle dimensioni complessive di una pagina Web

Come dicevo all'inizio, il peso delle immagini su un sito web rappresenta una percentuale importante del totale. Ad esempio, considera questo post del blog: DevTips – Come impedire a WordPress di indovinare gli URL. Questo è un post abbastanza breve, con meno di 400 parole, che offre una rapida soluzione a un problema chiaro.

Secondo GTMetrix, il caricamento di questo post utilizza 850 KB di dati. Ma perché un post così breve utilizza così tanti dati? Ebbene, le immagini sono in parte responsabili di questo problema: l'immagine in primo piano del post da sola pesa più di 200 KB, che rappresenta il 25% del totale.

Traffico mobile

Secondo i dati trovati in statcounter, il 52% del traffico web proviene da dispositivi mobili e il 45% da desktop. Ecco perché oggi viene posta così tanta enfasi sull'utilizzo di design reattivi che funzionano bene su schermi di piccole dimensioni.

Come sicuramente tu stesso hai sperimentato, la connessione Internet su dispositivo mobile non è sempre eccezionale (soprattutto se sei in viaggio o in metropolitana). Secondo Statistia, nel 2019 la velocità media è di circa 14 Mbps. Pertanto, se vogliamo velocizzare i nostri siti web su mobile, dobbiamo ridurne il più possibile il peso, compreso quello delle loro immagini.

Costi di archiviazione e trasferimento dati

Un altro motivo per cui dovresti preoccuparti di utilizzare immagini con le dimensioni appropriate è il denaro. I criteri in base ai quali i provider di hosting offrono i loro piani includono la quantità di spazio su disco utilizzata dal tuo sito Web e la quantità di dati che invii dai loro server ai tuoi visitatori. Più spazio su disco viene utilizzato e più dati inviati, più paghi.

Riducendo le dimensioni delle tue immagini, ridurrai entrambi i fattori e risparmierai un po' di soldi ogni mese?

Azioni di ottimizzazione dell'immagine

Ora che sai perché dovresti preoccuparti di ottimizzare le tue immagini, vediamo cosa puoi fare per velocizzare il tuo sito WordPress.

#1 Carica immagini correttamente ridimensionate

La quantità di persone che caricano immagini rimosse direttamente dalla loro nuovissima fotocamera DSLR è sorprendente. Il problema è che qualsiasi foto scattata con una fotocamera DSLR è probabilmente troppo grande e pesante per un sito web.

La prima cosa che devi fare è ridurre le immagini a una dimensione ragionevole prima di caricarle sul tuo sito web. Ad esempio, sul nostro sito Web, le immagini più grandi che di solito carichiamo sono le immagini in evidenza dei nostri post. Abbiamo deciso di limitare quelle immagini a soli 1200x800px. In questo altro post ho spiegato un metodo per ridimensionare e comprimere rapidamente le immagini prima di caricarle.

#2 Modifica il tuo tema per generare miniature appropriate

Quando carichi un'immagine su WordPress, WordPress genera diverse miniature. Queste miniature sono definite dal tuo tema, poiché è il tuo tema che sa quando ha bisogno di una versione più grande o più piccola di un'immagine.

Ad esempio, le nostre immagini in primo piano sono 1200x800px. Queste dimensioni funzionano alla grande quando si visualizza il post stesso:

che è chiaramente troppo per qualcosa del genere:

Ecco perché, per questo caso particolare, il nostro tema registra una nuova dimensione della miniatura che è solo 480x320px e viene utilizzata nella schermata dell'elenco dei post.

Se ritieni che il tuo tema non stia generando miniature appropriate, ti consiglio di leggere la documentazione di WordPress per sapere come definire la dimensione di una miniatura con set_post_thumbnail_size o anche come definire miniature aggiuntive con add_image_size .

E, come sempre, se hai bisogno di aiuto con questo, faccelo sapere nella sezione commenti qui sotto e sarò felice di aiutarti (o anche scrivere un post a riguardo?)

# 3 Usa le dimensioni dell'immagine in modo intelligente

WordPress genera più miniature delle immagini che hai nella tua libreria multimediale in modo che il tuo tema possa utilizzare l'immagine migliore in ogni possibile scenario. Ma ecco la parte interessante: anche tu puoi usare le miniature quando inserisci le immagini nelle tue pagine e nei tuoi post.

Quando inserisci un'immagine nel post, dai un'occhiata alla barra laterale e scegli la dimensione più adatta alle tue esigenze:

Ad esempio, se hai intenzione di inserire un'immagine stretta e piccola come questa, un'immagine piccola (300x200px) potrebbe essere perfetta:

ma usare la stessa miniatura per un'immagine più grande produce risultati terribili:

Meglio usare una versione con più risoluzione:

#4 Usa il formato immagine appropriato

Esistono diversi formati di immagine, ognuno con i suoi punti di forza e di debolezza per comprimere le immagini. I formati più utilizzati sono:

• PNG. Ottimo formato immagine per condividere schermate che non contengono immagini, come, ad esempio, una schermata dell'editor di WordPress.
• JPG. Uno dei format più diffusi al mondo. Funziona molto bene con praticamente qualsiasi tipo di fotografia, consentendo rapporti di compressione molto elevati. Tuttavia, non è perfetto: se la foto ha bordi molto netti (ad esempio, se sono presenti testo o disegni), dovrai utilizzare tassi di compressione inferiori o rischiare che l'immagine abbia brutti artefatti.
• GIF. Il re di Internet (e delle piattaforme di social media). È un tipo di formato che consente animazioni. Ad essere onesti, penso che tutte le "GIF" che usiamo ora siano in realtà video (brevi), che offrono rapporti di compressione migliori e una qualità superiore...

# 5 Elimina le immagini inutilizzate

Col passare del tempo, è facile mantenere nel tuo sito WordPress molte immagini legacy che nessuno usa da nessuna parte. Se vuoi eliminarli velocemente, in questo post Toni spiega come.

# 6 Abilita il caricamento lento

Quindi, le immagini rallentano i tuoi siti web, giusto? Perché non diciamo semplicemente ai siti Web di non caricare immagini a meno che non sia assolutamente necessario? Ciò accelererebbe le cose, vero? Entra nel caricamento lento.

Il caricamento lento è un'idea piuttosto semplice: un'immagine non verrà caricata finché non dovrebbe essere visibile nel browser del visitatore. Ad esempio, se il nostro sito Web ha una determinata immagine nel footer, perché dobbiamo preoccuparci di caricarla prima che l'utente abbia raggiunto la fine del nostro sito Web? Aspetta che arrivino e, una volta fatto, carica l'immagine (e in caso contrario, salva un caricamento dell'immagine!)

Esistono molti plugin di caricamento lento per WordPress. Alcuni provider di hosting come l'evento SiteGround includono questa opzione nelle loro installazioni. Cerca l'opzione nella dashboard e abilitala.

Spero che il post di oggi ti aiuti a migliorare un po' la velocità di caricamento del tuo web. Ci sono poche cose che sono così facili da risolvere e che producono risultati così buoni. Saluti e fortuna!

Immagine in primo piano del team di Icons8 su Unsplash.