Immagina che un visitatore del sito web abbia appena visto la tua nuova promozione. Ne è rimasto così attratto che ha deciso di dare un'occhiata all'offerta che proponi. Poi, purtroppo, non riesce a caricare la pagina del carrello e a completare l'acquisto. Cos'è successo?
I problemi di caricamento delle pagine possono avere diverse cause. Ad esempio, potresti non avere sufficiente spazio di archiviazione online per il tuo sito. Il sito potrebbe anche non avere una cache di memoria sufficientemente grande da soddisfare le esigenze.
Ma, tra tutti gli errori che si possono commettere durante la creazione di un sito Web, la mancata ottimizzazione delle immagini per le pagine web può essere uno dei più problematici. Non ottimizzare correttamente le immagini per il web può rallentare un sito e, a sua volta, portare a una riduzione del traffico e alla perdita di opportunità di vendita. Di seguito vedremo come ottimizzare le immagini per il web in modo da crear un sito web che ottenga risultati.
Che cos'è l'ottimizzazione delle immagini?
Circa il 70% delle persone riferisce che la velocità di caricamento di una pagina web influisce sulla volontà di effettuare un acquisto online. Inoltre, circa il 45% di queste persone non acquista da un sito web se la pagina si carica più lentamente del previsto.
Queste statistiche evidenziano l'importanza dell'ottimizzazione delle immagini per il web. Se non hai ottimizzato la velocità di caricamento delle tue pagine, è già una fortuna che un cliente sia arrivato fino alla cassa. Spesso, il problema si manifesta appena l'utente arriva sulla home page del sito. Ottimizzando le immagini del sito web, puoi fare in modo che ciò non si verifichi.
Uno dei motivi per cui il sito web si carica lentamente è che le immagini non sono ottimizzate correttamente. Questo significa che i file sono così grandi da appesantire il resto del sito e consumano spazio di archiviazione sul sito web.
L'ottimizzazione delle immagini, invece, ridimensiona la risoluzione delle immagini presenti sulla pagina. L'ottimizzazione delle immagini riduce anche le dimensioni dei file, quindi il server del sito web ha più spazio disponibile. Liberando spazio di archiviazione sul server, si possono ridurre i tempi di caricamento delle pagine sul sito web, rendendo così la navigazione del sito più facile e piacevole.
Perché è importante ottimizzare le immagini per il web?
L'ottimizzazione delle immagini per le pagine web rende felici gli utenti. Inoltre, fa sì che i server di dominio funzionino a dovere.
Tieni presente che circa la metà dei visualizzatori utilizza il cellulare per cercare informazioni online e visitare siti web, quindi l'ottimizzazione delle immagini può fare molto per ottimizzare la velocità delle pagine e la SEO per dispositivi mobili del tuo sito web. L'ottimizzazione delle immagini per il web può aiutare i visitatori a vedere i contenuti anche con una connessione WiFi lenta.
L'ottimizzazione delle immagini per il web, quindi, può migliorare il tuo sito web sotto diversi aspetti. Di seguito ne abbiamo elencati altri.
Velocizza il caricamento delle pagine
Uno dei motivi principali per ottimizzare le immagini è far sì che si carichino più velocemente. Le immagini non ottimizzate possono rallentare un sito web fino a renderlo difficile da navigare e frustrante da usare.
Suggerimento: ottimizzare le immagini significa ridurre la loro risoluzione, in modo che non occupino troppo spazio di archiviazione online. Puoi anche comprimere le immagini mantenendo la stessa qualità dell'immagine originale oppure utilizzare immagini e grafiche solo quando necessario.
Ottimizza l'esperienza dell'utente
Ottimizzando le immagini per il web, ottimizzi anche l'esperienza dell'utente. In altre parole, puoi ridurre la frustrazione dei clienti. Se non vuoi che i visitatori restino ad aspettare chiedendosi quando lo spazio bianco della pagina mostrerà testo e grafiche, è il momento di modificare la risoluzione di ogni immagine.
I visitatori del sito web apprezzeranno i miglioramenti nell'utilizzo e nell'aspetto legati a tempi di caricamento delle pagine più rapidi. Invece di un messaggio di errore, vedranno le icone e le immagini corrette.
Potenzia la SEO
L'ottimizzazione delle immagini può anche migliorare la SEO del sito web. È anche possibile etichettare le immagini con i tag alt per migliorare l'accessibilità e ottimizzare la SEO. Se utilizzi un website builder, puoi farlo facilmente quando carichi immagini in una libreria multimediale.
Le librerie multimediali, come quelle fornite da WordPress o Mailchimp, offrono caselle di testo in cui puoi inserire tag alt e parole chiave. Questi si assoceranno all'immagine e appariranno nei motori di ricerca, a meno che tu non abbia disabilitato l'indicizzazione del tuo sito web.
Riduci al minimo lo spazio di archiviazione sul server
Le immagini non ottimizzate possono rallentare i server dei siti web. Se i contenuti multimediali che inserisci sul tuo sito web superano i limiti di dimensione consigliati, la pagina potrebbe impiegare troppo tempo a caricarsi o non caricarsi affatto.
Archiviare un minor numero di file immagine sul tuo server farà sì che il tuo sito web funzioni alla velocità che i visitatori si aspettano. Dopo aver scoperto come ottimizzare le immagini per il web, potrai ottenere tempi di caricamento delle pagine più rapidi.
Iscriviti per ricevere altri suggerimenti di marketing direttamente nella tua casella di posta.
Come ottimizzare le immagini per il web
Ottimizzare le immagini per il web non è molto complesso. Di seguito, vedremo come comprimere le immagini di un sito web ed esamineremo i passaggi di base necessari per ottimizzare le immagini per il web.
Seleziona un formato di file
Esistono centinaia di tipi di file diversi. Alcuni dei più comuni includono JPEG (o .jpg), PNG o GIF. Ma prima di procedere con l'ottimizzazione delle immagini web, è necessario comprendere lo scopo di ciascun formato di file immagine.
- JPEG – È uno dei tipi di file di immagine web più comuni utilizzati. Questo perché offre una buona qualità e occupa meno spazio rispetto a un file PNG. Alcune immagini in formato JPEG (JPG), tuttavia, potrebbero perdere parte della loro qualità se si riducono le dimensioni del file.
- PNG – Questo formato è spesso più adatto a ridurre le dimensioni dei file immagine senza comprometterne la qualità. Consente inoltre di utilizzare e comprimere immagini con uno sfondo trasparente.
- GIF – Il formato di file "GIF" non è particolarmente adatto per le immagini sul web. È più adatto alla creazione di immagini animate e video grafici. L'uso migliore di questo tipo di file è per i tutorial dimostrativi. Il formato GIF potrebbe sembrare ormai obsoleto, perché è possibile utilizzare file MP4, MOV o WMV compressi che producono animazioni di qualità superiore rispetto a una GIF. Il formato GIF, però, utilizza meno spazio e risorse sul server web e non causa rallentamenti nel caricamento delle pagine.
- SVG — Questo formato è diventato più popolare con la necessità di adattare le immagini a schermi di diverse dimensioni. Un file SVG si adatta a tutti i dispositivi, inclusi computer, telefoni cellulari e tablet, senza perdere qualità. Tuttavia, i file SVG potrebbero non essere visualizzati correttamente in tutti i browser.
Per quanto riguarda il tipo di file, vengono tutti compressi in modo diverso. Ad esempio, i file JPEG subiscono una compressione con perdita di dati. Per ottenere la stessa qualità con questo tipo di file è necessaria un'immagine quasi perfetta.
La compressione senza perdita, invece, non riduce la qualità del file quando le dimensioni vengono ridotte. Questo accade spesso con le immagini PNG. I tipi di compressione con perdita e senza perdita di dati sono aspetti da considerare quando si usa un plugin per il ridimensionamento automatico. Il tipo di file gioca un ruolo, ma anche il design del plugin può influire sul risultato finale della compressione.
Aggiungi testo alternativo (in modo semplice)
L'aggiunta di testo alternativo non serve solo a ottimizzare un'immagine per la SEO utilizzando parole chiave. Rende anche una pagina web più accessibile aggiungendo una descrizione alle immagini visualizzate.
Consente alle persone con problemi di vista di comprendere le foto e le immagini visualizzate. È utile anche quando non vengono visualizzate correttamente le immagini in una guida tutorial, perché consente di comprendere comunque le istruzioni.
Il modo più semplice per aggiungere testo alternativo è quello di inserirlo nel campo apposito quando si carica un'immagine in una libreria di immagini. Inoltre, di solito è possibile caricare immagini anche nei post di blog su molte piattaforme di hosting che supportano i blog. Quando crei un post sul tuo blog, probabilmente noterai un campo in cui puoi inserire il testo alternativo quando aggiungi le immagini.
Aggiungi testo alternativo (in più modo difficile)
Se il blog o website builder non offre un'opzione per inserire rapidamente il testo alternativo e la descrizione dell'immagine, dovrai utilizzare l'HTML. Puoi farlo in un campo di testo di un post o di una pagina del blog, oppure in un file da caricare sul server da un file del Blocco note.
L'utilizzo dell'HTML è un po' più avanzato rispetto al semplice utilizzo di un editor visuale di pagine per blog o siti web. Richiede di avere il codice da copiare e incollare (o scrivere da zero) in modalità "testo" invece che in modalità "visiva" o "sorgente". Se non hai idea di cosa significhi, dai un'occhiata a questo esempio di come si presenta il codice HTML quando si aggiunge del testo alternativo a un'immagine.
Non preoccuparti di doverlo utilizzare se stai appena iniziando a creare il tuo sito web. Puoi creare testo alternativo senza conoscere l'HTML se utilizzi il metodo più semplice descritto sopra. In caso contrario, puoi imparare il codice HTML strettamente necessario per formattare l'immagine una volta che l'hai caricata in un post del blog.
Imparare a scrivere il codice del tag alt in HTML in modo manuale è qualcosa che riguarda principalmente chi vuole imparare a creare un sito web partendo da zero. In questo caso, impareranno a inserirlo in un file di testo e a caricarlo sul proprio sito web utilizzando un client FTP o creando un sito web con un editor codice.
Probabilmente non sarà necessario farlo se hai appena iniziato a creare il tuo sito. Tuttavia, ora sai che è un'opzione che puoi prendere in considerazione per ottimizzare le immagini per il web.
Ottimizza le dimensioni dei file
È più facile ottimizzare le dimensioni dei file se non sono ancora caricati sul web. In questo caso, puoi salvarli nel tuo programma di editing di foto preferito con le dimensioni di cui hai bisogno. Per le intestazioni, le dimensioni sono di circa 1024 pixel di larghezza e 786 pixel di altezza.
Le immagini di sfondo dovranno essere di circa 1920 x 1080 pixel. Le immagini del logo variano da circa 100 a 400 pixel di larghezza e di solito sono alte tra 50 e 100 pixel. Tieni presente, soprattutto per le immagini di sfondo, che le dimensioni utilizzabili dipendono dalle dimensioni del file di immagine.
Comprimi le immagini
Le immagini del sito web che possono influenzare maggiormente i tempi di caricamento sono quelle dell'intestazione e le immagini di sfondo della pagina.
Per le immagini di intestazione e di sfondo della pagina, in genere consigliamo di utilizzare la compressione GIF o JPEG. Rendile delle dimensioni minime possibili per dare al tuo sito web l'aspetto professionale di cui hai bisogno.
Usa strumenti e plugin per ottimizzare le immagini
Un modo per evitare di passare ore e ore a ottimizzare manualmente le immagini per il web è usare strumenti di ottimizzazione delle immagini. Questi plugin di solito vengono forniti con la maggior parte delle principali piattaforme di blog e ridimensionano automaticamente le immagini.
I plugin e gli strumenti di ottimizzazione delle immagini offrono anche un modo veloce per aggiungere i tag alt. Di solito è sufficiente selezionare le immagini dalla libreria multimediale che si desidera comprimere. In questo modo, in pochi clic è possibile ridurre le dimensioni delle immagini mantenendone la qualità.
Strumenti per l'ottimizzazione delle immagini
Per ottimizzare le immagini per le pagine web una per una sono necessarie conoscenze di programmazione avanzate. Gli strumenti per l'ottimizzazione delle immagini automatizzano questo processo. Inoltre, evitano di dover eliminare e ricaricare decine o addirittura centinaia di immagini o file grafici.
Anziché dover fare tutto il duro lavoro di modificare i tipi e le dimensioni dei file immagine, sono i plugin a farlo per te. Alcuni esempi includono LazyLoad, TinyPNG o Shortpixel. Tuttavia, dipende dalla piattaforma di blog che si utilizza.
Il quarto passaggio che vedi sopra si riferisce ai casi in cui un plugin di compressione delle immagini non riconosce le immagini caricate. Dipende dal plugin che si utilizza, ma potrebbe non rilevare le immagini che non sono state modificate. Tuttavia, hai l'opzione di modificare manualmente quelle immagini con alcuni plugin di compressione delle immagini.
Tipi di file per l'ottimizzazione delle immagini web
Come abbiamo accennato, ci sono diversi tipi di file tra cui scegliere quando ottimizzi le immagini per il web. I tipi di file comuni per l'ottimizzazione delle immagini web includono JPG (JPEG), PNG, GIF e, in alcuni casi, SVG.
Un altro formato che potresti notare è il Web Picture Format (.webp), che è diventato sempre più utile per rendere uniformare le immagini su tutti gli schermi dei dispositivi. Alcune versioni di Chrome, Android, Microsoft Edge, Opera o Firefox lo supportano.
Ottimizzazione delle immagini per dispositivi mobili
Molte persone navigano su internet con il loro telefono, quindi è fondamentale che gli utenti dei dispositivi mobili visualizzino le immagini nel modo corretto. I dispositivi mobili hanno spesso connessioni più lente e piani dati limitati, il che significa che ogni byte della dimensione di un file è importante quando si tratta di immagini JPG e PNG.
Pensa a un utente che cerca di navigare sul sito web mentre viaggia in metropolitana o è seduto in un bar con un WiFi instabile. Se le immagini non sono ottimizzate correttamente per i dispositivi mobili, con file di dimensioni inutilmente grandi, probabilmente l'utente si arrenderà e passerà al sito di un concorrente che si carica più velocemente.
La buona notizia è che ci sono diversi modi efficaci per ottimizzare le immagini per gli utenti dei dispositivi mobili. Uno degli approcci più efficaci è quello delle immagini responsive, che adattano automaticamente le loro dimensioni in base alle dimensioni dello schermo dell'utente e alle caratteristiche del dispositivo.
Puoi anche utilizzare immagini adattive, che consentono di creare diverse versioni di un'immagine specificamente per dispositivi e dimensioni di viewport differenti. A differenza delle immagini responsive, che si ridimensionano in modo fluido, le immagini adattive forniscono versioni predefinite a larghezza fissa in base a specifici breakpoint dei dispositivi. Quando qualcuno visita il sito web, il server rileva il tipo di dispositivo e fornisce la versione appropriata dell'immagine predefinita.
Questo è diverso dalle immagini responsive, che usano un'unica immagine che si adatta in modo flessibile. Le immagini adattive possono offrire prestazioni migliori poiché ciascuna immagine è ottimizzata specificamente per il dispositivo di destinazione, anche se richiede il mantenimento di più versioni di ogni immagine.
L'utilizzo della compressione senza perdita di dati per le immagini PNG aiuta a mantenere la qualità riducendo le dimensioni del file, il che è particolarmente importante per i loghi e le immagini con testo. Per le fotografie, la compressione JPG può essere più elevata sui dispositivi mobili, perché gli schermi più piccoli non mostrano i minimi dettagli con la stessa chiarezza.
Ecco alcuni suggerimenti pratici per implementare l'ottimizzazione delle immagini per i dispositivi mobili:
- Rilevamento del dispositivo: presta attenzione alle dimensioni delle immagini e utilizza le media query CSS e JavaScript per rilevare le dimensioni dello schermo. Questo aiuta a evitare che i dispositivi mobili scarichino file di dimensioni inutilmente grandi.
- Caricamento progressivo: implementa strategie in cui i file immagine vengono caricati in più fasi. Questo fornisce agli utenti un feedback visivo immediato in attesa dell'immagine completa.
- Scelte di compressione: scegli il metodo di compressione giusto per ogni tipo di immagine. Usa la compressione senza perdita per le immagini con testo o bordi netti e la compressione standard per le fotografie dove una certa perdita di qualità non si nota sugli schermi dei dispositivi mobili.
L'impatto di una corretta ottimizzazione delle immagini sui dispositivi mobili può essere notevole. Immagini ben ottimizzate, con file di dimensioni adeguate, possono ridurre significativamente i tempi di caricamento delle pagine mobili, pur mantenendo una buona qualità visiva.
Tecniche avanzate di ottimizzazione delle immagini
Anche dopo aver imparato le basi dell'ottimizzazione delle immagini, alcune tecniche più sofisticate possono migliorare le prestazioni del tuo sito web.
Il caricamento lazy è una tecnica intelligente che migliora notevolmente i tempi di caricamento delle pagine. Invece di caricare tutte le immagini in una volta sola quando si visita la pagina, il caricamento lazy carica le immagini solo quando stanno per essere visualizzate.
Immagina di avere un lungo post sul blog con 20 immagini. Senza il caricamento lazy, il browser del visitatore dovrebbe scaricare subito tutte le 20 immagini, anche se legge solo il primo paragrafo per poi abbandonarlo. Ciò comporta un notevole spreco di larghezza di banda e un caricamento iniziale delle pagine più lento. Con il caricamento lazy, il browser scarica inizialmente solo le prime immagini, rendendo il caricamento della pagina molto più veloce.
Oltre al caricamento lazy, potresti anche utilizzare l'attributo srcset per fornire immagini di dimensioni appropriate a diversi dispositivi. Invece di un approccio unico per tutti, srcset permette di offrire più versioni della stessa immagine e lascia che il browser scelga l'opzione migliore. Questo significa che gli utenti di dispositivi mobili non scaricano immagini inutilmente grandi, mentre gli utenti desktop ricevono comunque immagini di alta qualità.
Conclusione:
Se stai imparando a ottimizzare le immagini per le pagine web, ricorda questo: puoi ridurne le dimensioni mantenendo la qualità il più vicino possibile all'originale.
Puoi ridimensionare automaticamente tutte le immagini utilizzando i plugin. I migliori risultati si ottengono quando si usano gli strumenti che sanno come gestire i propri tipi di file. Se l'immagine con cui hai iniziato ti soddisfa, ottimizzarla per la visualizzazione web non dovrebbe essere troppo difficile.
Punti chiave da ricordare
- L'ottimizzazione delle immagini è cruciale per le prestazioni dei siti web, influenzando direttamente la velocità di caricamento delle pagine e l'esperienza utente.
- Un'ottimizzazione efficace delle immagini comporta la riduzione delle dimensioni dei file mantenendo la qualità delle immagini, utilizzando tecniche come la scelta del formato di file corretto, la compressione delle immagini e l'aggiunta di testo alternativo per migliorare la SEO e l'accessibilità.
- Esistono diversi strumenti e tecniche per ottimizzare le immagini, tra cui plugin di compressione automatica, uso di immagini responsive e strategie come il caricamento lazy, che possono migliorare significativamente i tempi di caricamento del sito web e l'interazione degli utenti su diversi dispositivi
Domande frequenti
Come faccio a comprimere le immagini per il mio sito web?
Per comprimere le immagini per il tuo sito web, puoi ridimensionare ogni immagine alla risoluzione ideale prima di caricarla sul sito. Altrimenti, puoi usare un plugin automatico per farlo. È meglio installare il plugin sul sito web o blog prima di aggiungere nuove immagini,in modo che vengano compresse automaticamente. Puoi ridurre manualmente le dimensioni delle immagini dopo averle caricate e prima di installare un plugin di compressione. Questo può rendersi necessario se il plug-in non rileva alcuni file meno recenti.
Come posso ottimizzare un JPEG per il web?
La compressione delle immagini JPEG può ridurre i tempi di caricamento delle pagine. Di solito aiuta anche a mantenere la qualità dell'immagine originale nel processo. Tuttavia, per ottenere i migliori risultati è necessario partire da un'immagine di alta qualità.
Per comprimere rapidamente un JPEG per il web, prendi in considerazione l'utilizzo di strumenti e plugin di ottimizzazione delle immagini. Ad esempio, puoi utilizzare il Content Studio di Mailchimp e l'editor di foto per modificare, ridimensionare e ottimizzare vari tipi di immagini.
Qual è la dimensione ideale per un'immagine su un sito web?
La dimensione ideale di un'immagine varia a seconda dell'uso che se ne fa. Ad esempio, la dimensione ideale per un logo è solitamente di circa 100 pixel di larghezza, e si adatta alla larghezza dello schermo. La dimensione ideale di un'immagine per l'intestazione è di almeno 1024 pixel, ma può arrivare fino a 2500 pixel.
Tieni presente che questo non considera il livello di qualità dopo la compressione. Tuttavia, i compressori automatici aiutano a raggiungere la migliore qualità con il minimo sforzo.