Come Ottimizzare le Immagini per il Web e per le Prestazioni

Fidatevi di noi, non vorreste che Google disprezzi il vostro sito web. Per fortuna, potete ridurre le dimensioni dei file immagine per migliorare le prestazioni dei vostri siti.

Un problema legato alla formattazione è che le modifiche spesso ne riducono la qualità (che a sua volta potrebbe far odiare il vostro sito Web anche ai visitatori). Non è una brutta cosa finché le immagini non diventano brutte.

Ci sono diversi trucchi e tecniche che permettono di ridurre le dimensioni dei file immagine e di mantenerne alta la qualità in modo da poterle mostrare con orgoglio sul proprio sito.

Diamo un’occhiata a come formattare le immagini senza renderle brutte, nonché a ottimizzare le immagini per il Web e per le prestazioni.

Guardate la nostra video guida all’ottimizzazione delle immagini per la SEO

I Vantaggi della Formattazione delle Immagini

Prima di tutto, perché avete bisogno di formattare le vostre immagini? Quali sono i vantaggi? Ci sono numerosi vantaggi nell’ottimizzare le immagini per le prestazioni. Secondo HTTP Archive, le immagini rappresentano in media il 21% del peso totale di una pagina web. Quindi, quando è il momento di ottimizzare il vostro sito, dopo i contenuti video, le immagini sono di gran lunga il primo posto da cui iniziare!

Sono più importanti degli script e dei font. E, ironia della sorte, un buon flusso di lavoro per l’ottimizzazione delle immagini è una delle cose più semplici da implementare, anche se molti proprietari di siti Web ignorano questo aspetto.

Ecco una panoramica dei principali vantaggi dell’ottimizzazione delle immagini:

• Migliorerà la velocità di caricamento delle pagine (si veda il nostro caso di studio illustrato di seguito per capire quanto influisce sulla velocità). Se la vostra pagina impiega troppo tempo per caricare, i visitatori potrebbero stancarsi di aspettare e passare a qualcos’altro. Per ulteriori informazioni sull’ottimizzazione del tempo di caricamento della pagina, si veda la nostra guida approfondita all’ottimizzazione della velocità delle pagine.
• Assieme ad un ottimo plugin SEO per WordPress, migliorerà il vostro SEO. I vostri siti saranno più in alto nei risultati dei motori di ricerca. I file di grandi dimensioni rallentano il sito e i motori di ricerca odiano i siti lenti. È probabile anche che Google esegua la scansione e indicizzi più velocemente le vostre immagini nella ricerche per immagini. Siete curiosi di sapere quale percentuale del vostro traffico proviene dalla ricerca delle immagini di Google? Potete utilizzare un segmento di Google Analytics WordPress plugin per controllare il traffico delle ricerca di immagini di Google.
• La creazione dei backup sarà più veloce.
• File immagine di dimensioni ridotte utilizzano meno larghezza di banda. E reti e browser lo apprezzeranno molto.
• Richiede minore spazio di archiviazione sul server (ma questo dipende anche da quante miniature si ottimizzano).

Come clienti di Kinsta, potete beneficiare dell’ottimizzazione delle immagini gratuitamente, attivando l’ottimizzazione automatica delle immagini con pochi clic. Ne parleremo più avanti.

Come Ottimizzare le Immagini per il Web e per le Prestazioni?

L’obiettivo principale della formattazione delle immagini è trovare il giusto equilibrio tra la minore dimensione dei file e una qualità accettabile.

C’è più di un modo per implementare quasi tutte queste ottimizzazioni. Uno dei metodi più utilizzati è semplicemente quello di comprimere le immagini prima di caricarle su WordPress. Di solito, questo può essere fatto con uno strumento come Adobe Photoshop o Affinity Photo. Alcune di queste attività possono anche essere eseguite utilizzando dei plugin, che analizzeremo di seguito.

Le due cose principali da tenere in considerazione sono il formato del file e il tipo di compressione che usi. Scegliendo la giusta combinazione di formato di file e tipo di compressione, potrete ridurre le dimensioni dell’immagine di ben 5 volte. Dovrete sperimentare con ogni immagine o formato di file per vedere quale combinazione funziona meglio.

1. Scegliere il formato file giusto

Prima di iniziare a modificare le immagini, assicurati di aver scelto il tipo di file più adatto. Esistono diversi tipi di file che è possibile utilizzare:

• PNG – produce immagini di qualità superiore, ma ha anche una dimensione di file maggiore. È stato creato per essere un formato senza perdita di dati, sebbene possa essere anche con perdita di dati.
• JPEG – utilizza l’ottimizzazione con perdita e senza perdita di dati. È possibile regolare il livello di qualità per un buon bilanciamento di qualità e dimensioni dei file.
• GIF – utilizza solo 256 colori. È la scelta migliore per le immagini animate. Usa solo compressione senza perdita di dati.

Ce ne sono molti altri, come JPEG XR e WebP, ma non sono al momento supportati da tutti i browser. In teoria, si dovrebbe usare il formato JPEG (o JPG) per immagini con molti colore e PNG per immagini semplici.

(Lettura suggerita: JPG vs JPEG: Comprendere il Formato di File Immagine più Comune)

2. Riduzione della Qualità contro Dimensioni

Ecco un esempio di cosa può accadere se si comprime troppo un’immagine. Nella prima immagine si sta utilizzando un tasso di compressione molto basso, che si traduce nella massima qualità (ma dimensioni maggiori del file). Il secondo sta utilizzando un tasso di compressione molto alto, che si traduce in un’immagine di bassa qualità (ma con dimensioni del file minori). Nota: l’immagine originale non modificata è di 2,06 MB.

Come si può vedere, vedere la prima immagine qui sopra è 590 KB. È troppo grande per una foto! Generalmente è meglio se si riesce a mantenere il peso totale di una pagina web a dimensioni inferiori a 1 o 2 MB. 590 KB sarebbero già un quarto di questa dimensione. La seconda immagine ovviamente risulta orribile, ma occupa solo 68 KB. Quello che dovete fare è trovare un giusto equilibrio tra il tasso di compressione (qualità) e la dimensione del file.

Quindi abbiamo portato l’immagine ad un tasso medio di compressione e, come potete vedere qui sotto, la qualità adesso sembra soddisfacente e la dimensione del file è di 151 KB, che è accettabile per una foto ad alta risoluzione. Questa è quasi 4 volte più piccola della foto originale con una compressione bassa. Normalmente, le immagini più semplici, come le PNG, devono essere inferiori a 100 KB e anche meno, per prestazioni ottimali.

3. Capire l’Ottimizzazione Lossy vs Lossless

È anche importante capire che ci sono due tipi di compressione che possiamo utilizzare, con perdita (Lossy) e senza perdita di dati (Lossless).

Lossy: è un filtro che elimina una parte dei dati. Ridurrà la qualità dell’immagine, quindi dovrete stare attenti a quanto ridurre l’immagine. La dimensione del file può essere ridotta di molto. È possibile utilizzare strumenti come Adobe Photoshop, Affinity Photo o altri editor di immagini per regolare le impostazioni di qualità di un’immagine. L’esempio che abbiamo riportato sopra utilizza la compressione con perdita di dati.

Lossless: è un filtro che comprime i dati. Non riduce la qualità ma richiede che le immagini vengano decompresse prima di poter essere rese a video. È possibile eseguire una compressione senza perdita sul desktop utilizzando strumenti come Photoshop, FileOptimizer o ImageOptim.

È meglio fare prima qualche esperimento con le tecniche di compressione per vedere cosa funziona meglio per ogni tipo di immagine o formato. Se i vostri strumenti hanno la funzionalità corrispondente, assicuratevi di salvare l’immagine per il web. Questa è un’opzione di molti editor di immagini e vi darà le regolazioni di qualità giuste per eseguire una compressione ottimale. Perderete un po’ in qualità, quindi cercate il miglior equilibrio possibile senza rovinare le immagini.

4. Strumenti e Programmi di Ottimizzazione delle Immagini

Ci sono in giro un sacco di strumenti e programmi, sia premium che gratuiti, che potete utilizzare per ottimizzare le immagini. úAlcuni offrono gli strumenti per eseguire da voi le vostre ottimizzazioni, mentre altri fanno il lavoro al posto vostro. Siamo personalmente grandi fan di Affinity Photo, in quanto è economico e offre funzionalità quasi identiche a quelle di Adobe Photoshop.

Ecco alcuni altri strumenti e programmi a cui dare un’occhiata:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org
• Kinsta’s Image Optimization feature

Non dimenticate che i vostri metodi per servire le immagini sono importanti quanto la dimensione del file. Molti host premium come Kinsta implementano un CDN per fornire rapidamente immagini e altri file agli utenti. L’integrazione gratuita di Kinsta con Cloudflare protegge tutti i siti sulla piattaforma, rendendola veloce e sicura.

5. Ridimensionare le Immagini

Un altro aspetto molto importante quando si tratta di ottimizzazione delle immagini è che si dovrebbe provare a caricarle nelle dimensioni giuste e non lasciare che sia CSS a ridimensionarle. Tuttavia, ciò non è più così importante dal momento che, a partire da WordPress 4.4, ora sono supportare le immagini reattive (non ridimensionate dai CSS). Fondamentalmente, WordPress crea automaticamente diverse dimensioni di ogni immagine caricata nella libreria multimediale. Includendo le dimensioni disponibili di un’immagine in un attributo srcset, i browser ora possono scegliere di scaricare la dimensione più appropriata e ignorare le altre. Guardate un esempio di come appare il vostro codice qui sotto.

Quindi, con sempre più schermi HiDPI al giorno d’oggi, può essere bello trovare un buon media. Diciamo 2 o 3 volte le dimensioni della colonna del sito o di una div, ma sempre meno delle dimensioni originali. Il browser mostrerà quella corretta in base alla risoluzione del dispositivo.

La libreria multimediale di WordPress crea miniature in base alle vostre impostazioni. Tuttavia, l’originale viene conservato e rimane inalterato. Se desiderate ridimensionare le immagini e risparmiare spazio su disco senza salvare l’originale, potete utilizzare un plug-in gratuito come Imsanity.

Imsanity vi consente di impostare un limite di integrità in modo che tutte le immagini caricate siano limitate a una dimensione ragionevole che comunque è grande abbastanza per le esigenze di un normale sito Web.

Imsanity si aggancia a WordPress subito dopo il caricamento dell’immagine, ma prima che avvenga l’elaborazione da parte di WordPress. Quindi WordPress si comporta esattamente allo stesso modo, tranne che sarà come se chi carica il contenuto avesse ridotto l’immagine ad una dimensione ragionevole prima di caricarla.

Pulite la vostra libreria media

Se state cercando uno strumento per risparmiare spazio e allo stesso tempo per ripulire la vostra libreria media, potete usare Media Cleaner per trovare i file multimediali inutilizzati. Il plugin eseguirà la scansione di tutti i file multimediali ed elencherà quelli inutilizzati nel Media Cleaner Dashboard in modo che li possiate sfogliare ed eliminare.

Media Cleaner implementa un sistema intelligente per cestinare i file: quando vengono cancellati, vengono spostati in una directory cestino. In questo modo, siete in grado di testare il vostro sito web per un po’ di tempo e assicurarvi che tutto sia a posto. Se manca un file o una voce media, potete facilmente ripristinarlo con un clic o semplicemente svuotare il cestino se tutto vi sembra a posto.

Plugin di Ottimizzazione delle Immagini

Fortunatamente, con WordPress, non è necessario eseguire tutte le operazioni di formattazione o compressione a mano. Potete usare i plugin per fare almeno una parte del lavoro in modo automatico.

Esistono diversi plugin che ottimizzano automaticamente i file di immagine quando vengono caricati. Inoltre, ottimizzano anche le immagini già caricate. Si tratta di una funzione utile, soprattutto se avete già un sito web pieno di immagini. Ecco alcuni dei migliori plugin per formattare le immagini per migliorare le prestazioni.

È importante, tuttavia, non affidarsi esclusivamente ai soli plugin. Ad esempio, non dovreste caricare immagini da 2 MB nella libreria multimediale di WordPress. In questo modo, infatti, rischiate di consumare velocemente lo spazio su disco del vostro host web.

Il metodo migliore è ridimensionare rapidamente l’immagine con uno strumento di fotoritocco, quindi caricarla e utilizzare uno dei seguenti plugin per ridurla ulteriormente.

Prima di scegliere uno di questi strumenti o plugin, però, è bene verificare che il vostro provider di hosting web non offra strumenti integrati per svolgere il lavoro al posto vostro. Ad esempio, i clienti di Kinsta hanno accesso a una funzione gratuita di ottimizzazione delle immagini che crea automaticamente copie ottimizzate di tutte le immagini di WordPress, che vengono archiviate gratuitamente. Il più piccolo dei due file immagine viene poi servito utilizzando il velocissimo CDN di Kinsta per aumentare ulteriormente la velocità. I clienti possono anche scegliere tra compressione lossless e lossy a seconda delle loro esigenze.

1. Imagify Image Optimizer

Imagify è sviluppato dallo stesso team che ha sviluppato WP Rocket, che probabilmente molti di voi conoscono. È compatibile con WooCommerce, NextGen Gallery e WP Retina. Ha anche una funzione di ottimizzazione in massa e permette di scegliere tra tre diversi livelli di compressione, normale, aggressiva e ultra. Ha anche una funzione di ripristino, quindi se non siete soddisfatti della qualità, potete ripristinare e ricomprimere le immagini con un solo clic e portarle ad un livello più adatto alle vostre necessità. C’è una versione gratuita e una versione premium. Con l’account gratuito si è limitati ad una quota di 25 MB di immagini al mese.

Con questo plugin è anche possibile liberarsi dell’immagine originale e ridimensionare le immagini più grandi.

Imagify, inoltre, comprime le immagini sui propri server di terze parti, non sui vostri server, il che è molto importante per quel che riguarda le prestazioni. Imagify non dovrebbe rallentare il vostro sito WordPress.

2. Optimole

Optimole è un plugin di WordPress per l’ottimizzazione delle immagini che riduce automaticamente le dimensioni delle immagini senza alcun intervento da parte vostra. Ha un grande vantaggio per quel che riguarda la velocità di caricamento del vostro sito perché è interamente basato su cloud e non serve mai immagini più grandi di quanto dovrebbero essere, in quanto visualizza la dimensione dell’immagine perfetta per il viewport e il browser del visitatore.

Inoltre, il plugin fornisce il lazy loading e un’efficiente sostituzione delle immagini: riduce la qualità delle immagini se il visitatore ha una connessione Internet più lenta, il che lo distingue da tutti gli altri. Rileva automaticamente anche il browser dell’utente e serve il formato WebP se è supportato.

Tutte le immagini che Optimole comprime sono servite tramite un veloce CDN. Potete provare Optimole gratuitamente o eseguire l’upgrade al piano premium se avete bisogno di maggiore larghezza di banda e spazio di elaborazione.

3. Optimus Image Optimizer

Optimus Image Optimizer per WordPress utilizza la compressione lossless per ottimizzare le immagini. Lossless significa che non vedrete alcuna perdita di qualità. Supporta WooCoomerce e multi-site e dispone di un’utile funzionalità di ottimizzazione di massa per coloro che hanno già consistenti librerie multimediali. Inoltre è compatibile con il plugin WP Retina WordPress. Esistono una versione gratuita e una versione premium. Nella versione premium si paga una volta l’anno e si possono comprimere una quantità illimitata di immagini. Se lo si abbina al plugin Cache Enabler, ci si può anche immergere nelle immagini WebP, che è un nuovo e leggero formato immagine di Google.

4. WP Smush

WP Smush ha sia una versione gratuita che premium. Questo plugin elimina le informazioni nascoste dalle immagini per ridurre le dimensioni senza ridurre la qualità. Analizza le immagini e le riduce man mano che vengono caricate sul sito. Inoltre, analizza le immagini già caricate e ne riduce le dimensioni. Gestisce cumulativamente fino a 50 file contemporaneamente, ed è possibile interrompere manualmente l’esecuzione, se lo si desidera. Il plugin elabora i tipi di immagine JPEG, GIF e PNG. Le dimensioni dei file sono limitate a 1 MB.

• È compatibile con alcuni dei più popolari plugin di gestione della libreria multimediale come WP All Import e WPML.
• L’ottimizzazione di tutte le immagini viene eseguita con tecniche di compressione senza perdita di dati, mantenendo alta la qualità dell’immagine.
• Non importa in quale directory si salvano le immagini. Smush le trova e le comprime.
• Smush dispone di un’opzione per impostare automaticamente larghezza e altezza di tutte le immagini, così tutte le tue immagini vengono ridimensionate in base alle stesse proporzioni.

5. TinyPNG (anche JPG compressi)

TinyPNG utilizza i servizi TinyJPG e TinyPNG (l’account gratuito consente di comprimere circa 100 immagini al mese) per ottimizzare le immagini JPG e PNG. Comprime automaticamente le nuove immagini e comprime in massa le immagini esistenti. Converte CMYK in RBG per risparmiare spazio. Comprime le immagini JPEG fino al 60% e le immagini PNG fino all’80% senza una perdita visibile della qualità dell’immagine. Non ci sono limiti nelle dimensioni dei file.

6. ImageRecycle

Il plugin ImageRecyle è un ottimizzatore automatico di immagini e PDF. Questo plugin si focalizza non solo sulla compressione delle immagini, ma anche sui PDF. Una funzionalità davvero utile è la possibilità di impostare la dimensione minima del file per la compressione. Ad esempio, se avete immagini con dimensioni di 80 KB, potete escludere automaticamente dalla compressione. Ciò garantisce che le immagini e i file non vengano mai compressi in modo eccessivo. Il plugin fornisce anche ottimizzazione cumulativa e ridimensionamento automatico. Nota: offrono una prova gratuita di 15 giorni, ma si tratta comunque di un servizio premium e le immagini vengono caricate e compresse usando i loro server. Non ci sono addebiti mensili, ma viene conteggiato il numero totale delle immagini compresse, a partire da $10 per 10.000 immagini.

7. EWWW Image Optimizer

EWWW Image Optimizer vi aiuta a rimpicciolire le immagini e a rendere il vostro sito più veloce con meno problemi. Senza limiti di dimensioni e con un’ampia flessibilità per gli utenti avanzati, è possibile usare le impostazioni predefinite o personalizzare completamente il plugin a proprio piacimento.

La modalità gratuita consente una compressione JPG e una conversione WebP illimitate ed è ideale per i siti o i blog che hanno appena iniziato. Tutti gli utenti di EWWW IO possono usare l’Ottimizzatore di massa per comprimere le immagini esistenti o usare la modalità di elenco della Libreria multimediale per selezionare e scegliere immagini specifiche da comprimere. È possibile analizzare altre cartelle per assicurarsi che ogni singola immagine del sito sia ottimizzata correttamente.

EWWW IO consente anche di convertire le immagini in formati di nuova generazione come WebP o di trovare il formato migliore per un’immagine grazie alle opzioni di conversione multiformato.

L’API premium Compress consente di portare la compressione a un livello completamente nuovo senza sacrificare la qualità e con un risparmio medio del 50%. Inoltre, sblocca la compressione dei PDF e include comodi backup delle immagini per 30 giorni. Con il CDN Easy IO opzionale, le immagini vengono automaticamente compresse, ridimensionate per adattarsi alle dimensioni della pagina e del dispositivo, caricate con lazy loading e convertite nel formato WebP di nuova generazione.

Un Caso di Studio di Ottimizzazione delle Immagini

Abbiamo deciso di realizzare il nostro piccolo caso di studio per dimostrare quanto l’ottimizzazione delle immagini per il Web possa influire sulla velocità generale del vostro sito WordPress.

JPG non compresse

Abbiamo inizialmente caricato nel nostro sito di prova 6 JPG non compresse, tutte di dimensioni superiori a 1 MB. Abbiamo quindi eseguito 5 test con Pingdom e abbiamo fatto la media. Come si vede dal test di velocità riportato qui sotto, il nostro tempo di caricamento totale è stato di 1,55 secondi e le dimensioni complessive della pagina di 14,7 MB.

JPG compresse

Abbiamo quindi compresso i file JPG con il plugin Imagify WordPress, utilizzando “l’impostazione aggressiva”. Abbiamo quindi eseguito 5 test su Pingdom e abbiamo fatto la media. Come si può vedere dallo speed test qui sotto, il tempo di caricamento totale è stato ridotto a 476 ms e le dimensioni totali della pagina sono state ridotte a 2,9 MB. I tempi di caricamento totali sono stati ridotti del 54,88% e le dimensioni della pagina sono state ridotte dell’80,27%.

É difficile trovare altre ottimizzazioni che permettano di ridurre del 50% i tempi di caricamento di un sito web. Ecco perché l’ottimizzazione delle immagini è così importante, e il processo di cui sopra è stato interamente automatizzato dal plugin. È un approccio “hands-off” ad un sito WordPress più veloce.

L’unica altra ottimizzazione drastica che si potrebbe fare sarebbe cambiare l’host. Molti dei clienti che si trasferiscono a Kinsta vedono aumenti di velocità superiori al 45%. Immaginate cosa accadrebbe passando a Kinsta e ottimizzando le vostre immagini!

Ottimizzando le vostre immagini, sia con uno strumento di fotoritocco sia con un plugin per WordPress, potrete anche eliminare l’avviso “Ottimizza immagini” che ricevete in Google Page Speed Insights (come mostrato di seguito).

Se avete altre notifiche di ottimizzazione dagli strumenti di speed test, assicuratevi di leggere il nostro post su Google PageSpeed Insights e la nostra analisi dettagliata di Pingdom.

Abbiamo preso le nostre conoscenze sulla gestione efficace dei siti web in scala e le abbiamo trasformate in un ebook e in un videocorso. Fate clic per scaricare la Guida alla gestione di oltre 60 siti WordPress!

Usare gli SVG: i Vantaggi da Conoscere

Un altro suggerimento è quello di utilizzare gli SVG insieme alle altre immagini. SVG è un formato vettoriale scalabile che va perfettamente bene per loghi, icone, testo e immagini semplici. Ecco alcuni motivi per cui utilizzare SVG:

• Gli SVG sono automaticamente ridimensionabili sia nei browser che negli strumenti di editing delle immagini. É il sogno di un web/graphic designer!
• Google indicizza gli SVG, allo stesso modo di PNG e JPG, quindi non dovete preoccuparvi della SEO.
• Gli SVG sono tradizionalmente (non sempre) più piccoli nelle dimensioni del file rispetto ai PNG o JPG. Ciò può comportare tempi di caricamento più rapidi.

Genki ha scritto un ottimo articolo in cui confronta le dimensioni di SVG, PNG e JPEG. Di seguito sono riportati alcuni spunti del suo test in cui ha messo a confronto i tre diversi tipi di immagine.

JPG (dimensioni ottimizzate: 81.4 KB)

PNG (dimensioni ottimizzate: 85.1 KB)

SVG (dimensioni ottimizzate: 6.1 KB)

Come si può vedere sopra, l’SVG comporta una diminuzione delle dimensioni del file del 92,51% rispetto al JPG. E se confrontato con il PNG, il 92,83%. Si legga il nostro tutorial su come utilizzare SVG sul proprio sito WordPress.

Best Practice per l’Ottimizzazione delle Immagini per il Web

Ecco alcune best practice generali quando si tratta di ottimizzare le immagini per il web:

• Se si utilizza un plugin di WordPress, utilizzatene uno che comprima e ottimizzi le immagini esternamente sui propri server. Questo si traduce in una riduzione del carico sul vostro sito.
• Utilizzate immagini vettoriali quando possibile assieme alle vostre PNG e JPG.
• Usate un CDN per servire velocemente le vostre immagini ai visitatori di tutto il mondo. Il CDN di Kinsta include una funzione di minificazione del codice che è integrata direttamente nel cruscotto di MyKinsta. Questo permette ai clienti di Kinsta di abilitare facilmente la minificazione automatica di CSS e JavaScript con un semplice clic.
• Rimuovete i dati non necessari dell’immagine.
• Ritagliate lo spazio bianco e ricrearlo con CSS per creare il padding.
• Utilizzate gli effetti CSS3 il più possibile.
• Salvate le vostre immagini nelle dimensioni corrette. Ricordate comunque che WordPress ora supporta le immagini responsive per servirle senza ridimensionarle con i CSS.
• Usate sempre il formato di file .ico per la vostra favicon.
• Utilizzate i web font invece di posizionare il testo all’interno delle immagini: hanno un aspetto migliore quando vengono ridimensionati e occupano meno spazio.
• Utilizzate le immagini raster solo per scene con molte forme e dettagli.
• Riducete la profondità dei bit in una tavolozza di colori più piccola.
• Utilizzare la compressione con perdita di dati (lossy) quando possibile.
• Sperimentate per trovare le migliori impostazioni per ogni formato.
• Utilizzate le GIF se avete bisogno di animazioni (ma comprimete le GIF animate).
• Utilizzate PNG se avete bisogno di dettagli elevati e risoluzioni elevate.
• Utilizzate JPG per le foto in genere e per gli screenshot.
• Rimuovete tutti i metadati delle immagini che non sono necessari.
• Automatizzare il processo il più possibile.
• In alcuni casi, potreste voler caricare le immagini in ritardo per rendere più veloce il primo rendering della pagina.
• Salvate le immagini come “ottimizzate per il web” in strumenti come Photoshop.
• Utilizzate WebP in Chrome per servire immagini più piccola.
• Usare la funzione integrata di ottimizzazione delle immagini di Kinsta.

Una volta che avete formattato le immagini in modo da ottenere prestazioni migliori e aver seguito le best practice, il vostro sito sarà più apprezzato dai motori di ricerca, dai browser e dalle reti, e verrà caricato più velocemente per i vostri lettori. Oh, e assicuratevi di dare un’occhiata al nostro tutorial sull’hotlinking, per evitare che altri vi rubino le immagini e la larghezza di banda.

Avete formattato le vostre immagini per migliorare le prestazioni? Le formattate manualmente, utilizzate un plugin o entrambi? C’è un altro strumento o plugin che consigliereste? Avete qualcosa da aggiungere? Fateci sapere le vostre tecniche e le vostre migliori prassi nei commenti qui sotto!

Brian Jackson

Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.

• LinkedIn
• Twitter