Affinché il tuo sito WordPress possa indirizzare il traffico, fidelizzare visitatori e aumentare le conversioni, i suoi contenuti devono essere coinvolgenti. I media possono aiutare in questo. Sfortunatamente, le immagini web di alta qualità spesso significano file di grandi dimensioni che possono rallentare i tempi di caricamento.
Naturalmente, eliminare i contenuti visivi dal tuo sito non è la giusta soluzione. Tuttavia, esistono tecniche che è possibile utilizzare per formattare e ottimizzare le immagini e aumentare la velocità del sito.
In questo post, vedremo come le immagini influenzano la velocità e le prestazioni del tuo sito WordPress. Quindi ti forniremo tre modi per ottimizzarle per ridurre i tempi di caricamento.
Iniziamo!
In che modo le immagini influiscono sulla velocità e sulle prestazioni del tuo sito web
Secondo HTTP Archive, le immagini rappresentano quasi un quarto del peso totale di una pagina web .
Quando si tratta di tempi di caricamento della pagina, ogni secondo conta. I siti che impiegano troppo tempo per il rendering creano un’esperienza utente (UX) scadente e, a loro volta, una frequenza di rimbalzo più alta.
Oltre ai tuoi visitatori, anche Google non apprezza i siti lenti. Le immagini ottimizzate sono più facili da scansionare e indicizzare. Più veloce è il tuo sito web, più è probabile che si posizioni meglio nelle SERP.
Ridurre la qualità e le dimensioni delle foto e delle immagini utilizzerà meno larghezza di banda e spazio su disco del server dove è ospitato il tuo sito. Le tue pagine diventeranno più chiare, il tuo server comunicherà più rapidamente con i browser degli utenti e, alla fine, i tuoi contenuti verranno caricati più velocemente.
La compressione delle immagini può essere paragonata alla preparazione di una valigia per un viaggio. In primo luogo, potresti gettare indifferentemente i tuoi vestiti nella valigia senza piegare nulla. è il modo più rapido, riempirai la valigia fino al punto in cui riuscirai a malapena a chiuderla.
Potresti invece provare a piegare ordinatamente ogni indumento, magari usando anche sacchetti sottovuoto. Ora hai ancora più spazio di prima. I contenuti sono gli stessi, l’unica differenza è il modo in cui sono confezionati.
Ad ogni modo, non devi ridurre la qualità dei file multimediali al punto da farli sembrare poco professionali o del tutto incomprensibili. La corretta ottimizzazione dell’immagine consiste nel trovare il giusto equilibrio tra qualità e dimensioni.
3 modi per ottimizzare le immagini per web e prestazioni
Non è necessario scegliere tra file multimediali di qualità e tempi di caricamento brevi. È possibile ottenere il meglio dei due modi se si utilizzano gli strumenti giusti e le migliori pratiche. Ecco tre modi per ottimizzare le immagini per aumentare la velocità del sito.
1. Riduci la dimensione dei file immagine prima di caricarle sul tuo sito
Un modo per ottimizzare le immagini consiste nel ridurre le dimensioni delle foto prima di caricarle nella libreria multimediale di WordPress. In breve, ciò comporta il ridimensionamento delle dimensioni e la regolazione della qualità tramite compressione.
Esistono due tipi di compressione delle immagini:
- La compressione con perdita di dati cioè quando un’immagine perde alcuni dei suoi dati per ridurre le dimensioni dei file. Sebbene non sia sufficiente a causare cambiamenti evidenti per i visitatori, può ridurre l’onere sul tuo server.
- Con la compressione senza perdita di dati, tutti i dati delle immagini sono intatti e recuperabili. La qualità non è influenzata e le immagini vengono visualizzate solo quando non sono compresse.
Il tipo di compressione che dovresti usare dipende dal tuo formato di file, ma ne parleremo più avanti.
Uno strumento online che puoi usare per comprimere le tue immagini è TinyPNG (o TinyJPG):
TiniPNG applica automaticamente il metodo di compressione ideale per ridurre le dimensioni del file dell’immagine alla massima quantità possibile senza perdita di qualità.
Dimensioni troppo grandi aggiungono peso inutile al tuo sito e al tuo server. Pertanto, puoi anche ridurre le dimensioni del file regolando l’altezza e la larghezza delle immagini. Puoi definire queste misurazioni nel tuo HTML o utilizzando un software di fotoritocco prima di caricarle.
Supponiamo che tu abbia un’immagine con le dimensioni originali di 5.472 x 3.648 pixel (px). La dimensione del file (o peso) è di 3 megabyte (MB). Tuttavia, il tuo sito necessita solo di un’immagine banner di 1.920 x 1.280 px.
Ridimensionare l’immagine a queste dimensioni e ridurne leggermente la qualità del dieci percento riduce la dimensione complessiva del file da 3 MB (3.000 kilobyte) a 613 kilobyte (KB).
2. Scegli un formato file appropriato
Come avrai capito, il tipo di compressione e il formato del file sono entrambi fattori importanti quando si tratta di ottimizzazione delle immagini. La scelta del tipo di immagine appropriato può ridurne il peso e, a sua volta, aumentare la velocità del tuo sito.
Esistono quattro principali formati di file utilizzati per le immagini sul web:
- Portable Network Graphic (PNG) . Questo formato utilizza una compressione senza perdita. In genere, le immagini PNG sono di alta qualità ma hanno dimensioni di file naturalmente grandi.
- Joint Photographic Experts Group (JPEG) . Le immagini JPEG tendono ad essere di qualità inferiore rispetto ai file PNG, ma sono anche naturalmente più piccole. La compressione con perdita è il metodo più comune per ridurne ulteriormente le dimensioni.
- Graphics Interchange Format (GIF) . Questo formato utilizza solo la compressione senza perdita. È riservato alle immagini animate con file di piccole dimensioni ed è comunemente usato per i social media e post del blog.
- webP. Un formato di file immagine relativamente nuovo che può utilizzare la compressione lossy o lossless. Le immagini webP sono più piccole del 26% rispetto ai PNG e fino al 34% più piccole dei file JPEG. Tuttavia, il formato non è supportato da tutti i principali browser Internet (in particolare Safari).
Le immagini webP sono migliori nel senso che offrono file di dimensioni minime possibili con la massima qualità. Tuttavia, poiché Safari è il secondo browser più popolare dopo Google Chrome (soprattutto per i dispositivi mobili), potrebbe non essere la scelta migliore per fornire contenuti visivi in modo affidabile.
Le immagini GIF dovrebbero essere usate con parsimonia. Sebbene siano spesso un’ottima fonte di umorismo o informazioni istruttive, l’animazione tende a rallentare la velocità del tuo sito.
Quando si tratta di scegliere tra immagini PNG e JPEG, il consenso generale è che il primo è il migliore per schermate e grafica mentre il secondo produce foto migliori.
3. Utilizza un plugin di Lazy Load come WP Smush
Come abbiamo già detto, ci sono strumenti online che puoi usare per comprimere i tuoi file multimediali. Tuttavia, oltre a regolare il formato e le dimensioni, è possibile ottimizzare ulteriormente le immagini sfruttando il lazy loading.
Con il lazy loading delle immagini, le foto o la grafica nella parte inferiore di una pagina non verranno visualizzate mentre il visitatore è ancora nella parte alta del sito. Una volta che l’utente inizia a scorrere, i file multimediali diventeranno visibili man mano che vengono visualizzati.
Lo scopo di questa tecnica è di ridurre al minimo il numero di immagini che i browser dei visitatori devono caricare contemporaneamente. Aiuta sia con la larghezza di banda che con la velocità del sito.
Per abilitare questa funzione, ti consigliamo di utilizzare un plugin per l’ottimizzazione delle immagini e il caricamento lento come WP Smush :
Con oltre un milione di installazioni attive e una valutazione di WordPress a cinque stelle, questo plugin gratuito è una potente soluzione per affrontare una varietà di attività di ottimizzazione delle immagini, incluso il lazy loading:
Oltre al lazy loading, WP Smush utilizza la compressione senza perdita e il ridimensionamento delle immagini per ottimizzare automaticamente i file multimediali quando li carichi su WordPress. Puoi usarlo per tutti i formati di file, inclusi PNG, JPEG e GIF. Ciò elimina la necessità di eseguire questo processo in anticipo.
Una volta installato e attivato il plugin, inizierà immediatamente la scansione del tuo sito alla ricerca di immagini che devono essere ottimizzate. Puoi configurare le impostazioni dalla tua dashboard di WordPress andando su Smush> Dashboard> Impostazioni.
Conclusione
Le immagini di alta qualità sono una parte fondamentale del tuo sito. Sfortunatamente, possono anche peggiorare le prestazioni e danneggiare la UX e la SEO.
In questo post, abbiamo trattato tre modi per ottimizzare le immagini e aumentare la velocità del sito:
- Riduci le dimensioni del file delle tue immagini prima di caricarle sul tuo sito.
- Scegli il formato file appropriato.
- Utilizzare un plugin di lazy loading come WP Smush .
Buon lavoro!
