Come ottimizzare le immagini in WordPress?

Pubblicato: 2021-09-08

Le immagini sono una parte importante di qualsiasi sito web. Possono essere utilizzati per creare un'atmosfera, mostrare prodotti o aggiungere interesse visivo a una pagina. Ma a volte potresti non avere le migliori immagini per il tuo sito che lo farebbero apparire al meglio.

Fortunatamente, WordPress ha alcune funzionalità integrate che ti aiuteranno a ottimizzare le immagini in modo che si carichino più velocemente e occupino meno spazio sul tuo sito senza compromettere la qualità!


Trova immagini non ottimizzate in GTmetrix + PSI

Il modo migliore per trovare immagini che necessitano di ottimizzazione sul tuo sito è utilizzare uno strumento online gratuito, come GTmetrix o PSI. Entrambi questi strumenti eseguono la scansione dei file del tuo sito Web e ti forniscono un rapporto di facile comprensione su ciò che deve essere ottimizzato affinché si carichi più velocemente.

GT Metrix Homepage

Ottimizza le immagini utilizzando i plugin e i servizi di WordPress

Ci sono anche alcuni plugin per l'ottimizzazione delle immagini di WordPress (sia a pagamento che gratuiti), come EWWW Image Optimizer, che funzionano molto bene per comprimere le immagini per caricarle più velocemente sul tuo sito web.

Ci sono anche servizi là fuori che lo faranno per te, come TinyPNG e Kraken Image Optimizer, che comprimono le immagini senza influire affatto sulla qualità.

Link per il download dell'ottimizzatore di immagini

Usa la dimensione dell'immagine corretta

Proprio come devi ridimensionare la tua grafica, video e altri media per la larghezza del blog nell'editor di WordPress prima di caricarlo, devi anche assicurarti che anche i file di immagine siano ridimensionati. In questo modo, nessuna delle tue immagini occuperà più spazio di quanto dovrebbe!

una persona che ridimensiona le immagini

Immagini cache

Un altro modo per ottimizzare le immagini è memorizzarle nella cache. Ciò garantisce che il tuo sito si carichi più velocemente anche se più persone lo visitano contemporaneamente, poiché i visitatori che arrivano a una pagina con immagini memorizzate nella cache non dovranno aspettare il download di quei file prima di poter vedere qualcosa!

Il plugin WP Smush in realtà lo fa automaticamente una volta installato e attivato (e dovresti assolutamente fare entrambe le cose!). Puoi anche utilizzare plugin, come Autoptimize o Wp Super Cache, che non solo memorizzano la cache ma riducono anche il codice.

Plugin WP Super Cache

Usa LazyLoad per rinviare le immagini fuori schermo

LazyLoad è una funzionalità più recente e meno conosciuta di WordPress che ti consente di posticipare il caricamento delle immagini fino a quando l'utente non scorre la sua posizione sul tuo sito. Quando lo fanno, queste immagini verranno caricate rapidamente perché non sono state caricate quando la pagina è stata recuperata per la prima volta!

una persona con una faccia mezza sfocata

Usa la compressione delle immagini

È possibile utilizzare due diversi tipi di compressione delle immagini: LZW o JPEG. La differenza tra loro ha più a che fare con il tipo di file grafico in cui sta andando che con qualsiasi altra cosa, quindi scegli quello che ha senso per la tua situazione!

Il modo in cui funziona è riducendo il numero di colori utilizzati in un'immagine, il che significa che è necessario trasferire meno dati dal lato server al lato client durante la navigazione. Ciò riduce l'utilizzo della larghezza di banda e il tempo di caricamento.

La compressione delle immagini è una parte fondamentale di qualsiasi sito e WordPress ha una serie di plug-in di compressione che renderanno più facile creare siti con immagini di alta qualità senza compromettere le prestazioni!

ottimizzazione delle immagini in Photoshop

Servire immagini in formati di nuova generazione

È importante rendersi conto che ci sono molti formati di immagine diversi là fuori e non tutti funzioneranno bene per il tuo sito. Se stai cercando di migliorare le prestazioni su qualsiasi sito Web, è necessario utilizzare formati di nuova generazione, come WebP o JPEG XR, che in genere hanno una compressione migliore rispetto ad altri tipi.


Specifica le dimensioni dell'immagine

Specificando le dimensioni delle immagini, stai dicendo a WordPress quanto spazio utilizzare quando le inserisci sul tuo sito. Questo è importante perché riduce il carico sulla larghezza di banda, il che significa tempi di caricamento della pagina più rapidi!


Servire immagini da un CDN

Un CDN è un modo veloce ed efficiente per servire le immagini del tuo sito web da server geograficamente più vicini. Ciò riduce la latenza, il che significa tempi di caricamento più rapidi per gli utenti!


Combina le immagini usando gli sprite CSS

Gli Sprite CSS sono un tipo di immagine che combina effettivamente tutte le tue immagini più piccole in un unico grande file. Questo è utile perché riduce il numero di richieste di file, il che significa tempi di caricamento più rapidi, specialmente sui dispositivi mobili! Puoi usare un generatore di sprite CSS per crearne uno e poi aggiungerlo al tuo tema con CSS.


Usa immagini adattive per dispositivi mobili

Le immagini adattive sono un ottimo modo per offrire immagini di dimensioni diverse per utenti su dispositivi diversi. Ciò riduce l'utilizzo della larghezza di banda e i tempi di caricamento! Puoi farlo con un plug-in di WordPress, ma ci sono anche molti altri modi per farlo gratuitamente da solo.

Dispositivo mobile

Disabilita collegamento immagine

Quando colleghi un'immagine, fondamentalmente ciò che stai facendo è collegarti al file originale sul server di qualcun altro. Disabilitare questo impedisce alle persone di rubare la tua larghezza di banda, quindi è qualcosa che vorrai fare.

Puoi farlo con molti plugin di WordPress, come WP Rocket. Di solito puoi anche chiedere al tuo host di farlo per te (se sei con un buon host).


Rimuovi dati EXIF

I dati EXIF ​​sono informazioni nascoste che non puoi vedere nel tuo editor di WordPress, ma potrebbero essere viste da altri. Contiene informazioni come la marca e il modello di una fotocamera, nonché le impostazioni di data e ora. La rimozione di questo ridurrà l'utilizzo della larghezza di banda!

Questo processo prevede l'utilizzo di uno strumento di pulizia delle immagini come JPEGsnoop o jhead, che ti consente di rimuovere tutti i dati EXIF ​​dalle immagini sul tuo sito, senza doverli prima scaricare!


Offri immagini di qualità inferiore agli utenti con connessioni lente

Questo è qualcosa che puoi fare con le tue immagini, ma non tutti i temi avranno la possibilità di nasconderlo. Fondamentalmente ciò che fa è servire immagini di qualità inferiore alle persone con connessioni lente (cellulari o altro). Puoi farlo con il plugin Optimole.

una tartaruga sulla sabbia

Perché è importante utilizzare immagini ottimizzate?

Le immagini possono essere una parte importante delle prestazioni del tuo sito, quindi è importante ottimizzarle! Ciò garantirà che le immagini vengano caricate nel modo più rapido ed efficiente possibile.

Più veloce è il caricamento del tuo sito web, meglio è per gli utenti e per i motori di ricerca! Di recente è stato dato più peso al tempo di caricamento nelle classifiche di Google (ma solo leggermente), ma anche se ciò non fosse vero, dovresti comunque assicurarti che tutto si carichi il più velocemente possibile.

Le persone odiano aspettare sui siti, in particolare gli utenti mobili, il che rende l'ottimizzazione delle immagini una parte essenziale di qualsiasi sito WordPress. Aiuta anche con la SEO perché a Google piacciono anche i siti Web a caricamento rapido (per una buona ragione).

SEO enunciato con arte della parete in ceramica

Conclusione

In conclusione, le immagini sono una parte importante di qualsiasi sito web. Possono essere utilizzati per creare un'atmosfera, mostrare prodotti o aggiungere interesse visivo a una pagina.

Tuttavia, a volte le immagini originali potrebbero non essere ottimizzate abbastanza bene e potrebbero occupare più spazio del necessario. WordPress ha una serie di funzionalità per ottimizzare questi file in modo che si carichino più velocemente senza compromettere la qualità! Il modo migliore è installare un plug-in di compressione delle immagini, come LazyLoad o PSI, che comprime e ridimensiona automaticamente le immagini se necessario. Puoi anche ottimizzare le immagini specificando le loro dimensioni, usando sprite CSS, usando la memorizzazione nella cache delle immagini e