Secondo il Rapporto annuale sullo stato del web di HTTP Archive del 2022, se prendiamo in considerazione pagine standard formate da HTML, CSS, Javascript e immagini, queste ultime impattano sul 60% del peso totale delle pagine.

Questo ci fa capire come le immagini non sono solo un elemento estetico ma al contrario, se ottimizzate, possono aumentare significativamente l’efficacia del vostro sito web.

  1. I Vantaggi dell’ottimizzazione delle immagini
  2. Le tipologie di immagini che si possono utilizzare
  3. 9 Step per ottimizzare le immagini in ottica SEO
  4. Plugin per l’ottimizzazione delle immagini
  5. Come controllo se le immagini del mio sito web sono ottimizzate?

I Vantaggi dell’ottimizzazione delle immagini.

L’ottimizzazione delle immagini sul web è una componente cruciale che impatta sia sulla SEO, sia sull’esperienza dell’utente.

Esaminiamo i principali vantaggi:

  • Diminuzione dei tempi di caricamento del sito

    Le immagini non ottimizzate sono spesso la causa principale di un caricamento lento del sito web. Immagini di grandi dimensioni possono appesantire notevolmente la velocità di caricamento, influenzando negativamente l’esperienza dell’utente.

  • Miglioramento del Posizionamento sui Motori di Ricerca

    Google e altri motori di ricerca preferiscono i siti web che caricano velocemente. L’ottimizzazione delle immagini contribuisce a questo aspetto, migliorando il ranking del sito nei risultati di ricerca.

  • Miglioramento dell’esperienza utente

    Gli utenti tendono a interagire di più con un sito che offre un’esperienza visiva piacevole e senza intoppi. Questo non solo aumenta il tempo di permanenza sul sito ma riduce anche il tasso di abbandono, fattori che influenzano direttamente la SEO e la conversione.

  • Ottimizzazione per i dispositivi mobili

    Immagini responsive che si adattano a diverse dimensioni dello schermo sono cruciali per garantire che il sito sia facilmente navigabile su qualsiasi dispositivo, migliorando così l’accessibilità e la visibilità del sito.

  • Risparmio di bandwidth e riduzione dei costi di hosting

    Le immagini ottimizzate occupano meno spazio sul server, il che significa un minor consumo di bandwidth e, di conseguenza, una potenziale riduzione dei costi di hosting. Questo aspetto è particolarmente importante per i siti web con un alto volume di traffico o con un gran numero di immagini.

Le tipologie di immagini che si possono utilizzare.

Nella scelta delle immagini per il vostro sito web, è fondamentale considerare i diversi formati disponibili. Ogni formato ha le sue peculiarità e usi ottimali.

Diagramma sull'utilizzo dei formati immagine

Ecco una guida dettagliata sui formati di immagine più comuni:

JPG (o JPEG – Joint Photographic Experts Group)

Il JPG è perfetto per gestire una vasta gamma di colori e sfumature, rendendolo ideale per immagini ricche di dettagli come fotografie paesaggistiche o ritratti.

Tuttavia, è importante ricordarsi che il JPG utilizza una compressione lossy, il che significa che una parte della qualità dell’immagine viene persa ogni volta che l’immagine viene salvata. Questo è un aspetto da bilanciare con attenzione: una compressione troppo elevata può degradare la qualità, mentre una troppo bassa può non ridurre sufficientemente la dimensione del file.

Vantaggi: Perfetto per immagini dettagliate e complesse. Offre un buon equilibrio tra qualità dell’immagine e dimensione del file.

Svantaggi: Utilizza una compressione lossy.

PNG (Portable Network Graphics)

Per le immagini che richiedono trasparenza o nitidezza nei dettagli, come loghi o grafica web, il PNG è una scelta migliore. A differenza del JPG, il PNG supporta la trasparenza e offre una compressione lossless, il che significa che la qualità dell’immagine non viene compromessa, indipendentemente da quante volte l’immagine viene salvata o modificata. Questo lo rende ideale per immagini con testo, icone o altre grafiche che richiedono chiarezza e precisione dei dettagli.

Vantaggi: Supporta la trasparenza e offre una compressione lossless.

Svantaggi: I file PNG tendono ad avere dimensioni maggiori rispetto a JPG, il che può influenzare i tempi di caricamento del sito.

WebP

Il WebP, un formato più recente, offre il meglio di entrambi i mondi: la compressione lossy e lossless. Ciò lo rende estremamente versatile, in grado di fornire immagini di alta qualità a dimensioni di file significativamente ridotte, e supporta anche la trasparenza.

Vantaggi: Offre una compressione lossy e lossless, mantenendo una qualità dell’immagine elevata a dimensioni di file ridotte. Supporta anche la trasparenza.

Svantaggi: E’ ideato per il web e questo può limitarne l’utilizzo offline. Inoltre, diversi software ancora non supportano l’utilizzo di questo formato.

SVG (Scalable Vector Graphics)

Per la grafica vettoriale, come loghi o icone che devono essere scalati senza perdere qualità, il formato SVG è la scelta ottimale. Essendo un formato vettoriale, il SVG mantiene la nitidezza e la chiarezza a qualsiasi dimensione, il che lo rende perfetto per un web design reattivo e per le immagini che devono adattarsi a diverse dimensioni di schermo.

Vantaggi: I file SVG mantengono la loro qualità a qualsiasi dimensione, essendo basati su vettori anziché su pixel. Possono essere manipolati con CSS e JavaScript.

Svantaggi: Non adatto per fotografie o immagini complesse.

GIF (Graphics Interchange Format)

Spesso utilizzato in siti web per animazioni semplici, banner pubblicitari, e elementi grafici umoristici o espressivi.

Vantaggi: Supporta l’animazione e la trasparenza, utile per piccole animazioni o icone.

Svantaggi: Limitato a una palette di 256 colori, il che riduce la qualità per immagini più complesse.

9 Step per ottimizzare le immagini in ottica SEO.

  1. Scegli il formato giusto
  2. Ridimensiona l’immagine
  3. Riduci la qualità dell’immagine
  4. Salva l’immagine con un nome appropriato
  5. Aggiungi l’attributo Alt
  6. Aggiungi l’attributo Title
  7. Utilizza il lazy loading
  8. Utilizza immagini responsive
  9. Implementa l’uso di una CDN

1. Scegli il formato giusto

La selezione del formato giusto per le vostre immagini è il primo passo cruciale nell’ottimizzazione per il web e la SEO.

Come abbiamo visto, ogni formato ha caratteristiche specifiche che influenzano la qualità visiva, le dimensioni del file e la velocità di caricamento.

Alcuni formati sono più adatti a immagini ricche di colori e dettagli, ideali per fotografie o grafiche complesse. Altri formati, invece, si adattano meglio a immagini con trasparenze o grafiche semplici, come loghi o icone.

La domanda fondamentale da porsi è:
Qual è lo scopo dell’immagine sul mio sito?

2. Ridimensiona l’immagine

Ridimensionare un’immagine significa adattarne le dimensioni fisiche (larghezza e altezza) in modo che si adattino perfettamente allo spazio assegnato sul sito web, senza spreco di risorse o compromissioni visive.

Come ridimensionare correttamente le immagini

Per ridimensionare le tue immagini può usare strumenti di editing grafico come Adobe Photoshop, GIMP o anche editor online.

  1. Determina le dimensioni corrette: prima di tutto, è necessario determinare le dimensioni ideali dell’immagine per il posto dove verrà visualizzata. Questo può variare a seconda del layout del sito e della risoluzione dello schermo degli utenti.
  2. Mantieni le proporzioni: durante il ridimensionamento, è cruciale mantenere le proporzioni originali dell’immagine per evitare distorsioni. La maggior parte degli strumenti di editing ha un’opzione per bloccare le proporzioni durante il ridimensionamento.
  3. Considera il peso del file: oltre alle dimensioni fisiche, è importante considerare anche le dimensioni del file. Una volta ridimensionata, l’immagine dovrebbe essere salvata in un formato che bilanci qualità e dimensioni del file.

3. Riduci la qualità dell’immagine

La riduzione della qualità dell’immagine è forse l’aspetto principale sul quale soffermarsi. Questo passaggio comporta la diminuzione della quantità di dati presenti nell’immagine, riducendo così le dimensioni del file.

È importante, tuttavia, trovare un equilibrio tra la riduzione delle dimensioni del file e il mantenimento di una qualità visiva accettabile.

Le tipologie di compressione

Esistono due tipi principali di compressione: lossy e lossless.

La compressione lossy riduce la dimensione del file eliminando alcuni dati dell’immagine, il che può portare a una perdita di qualità. La compressione lossless riduce la dimensione del file senza perdere informazioni, ma è generalmente meno efficace nel ridurre le dimensioni rispetto alla lossy.

La compressione lossy è spesso utilizzata con formati come JPG mentre PNG e SVG sono esempi di formati che supportano la compressione lossless.

Per le immagini JPG, la scelta del livello di qualità durante il salvataggio è cruciale. Una qualità intorno al 70-80% è spesso un buon compromesso tra dimensione del file e qualità visiva ma ci si può spingere anche fino ad una riduzione del 60%.

Anche in questo caso possiamo utilizzare gli strumenti di editing citati nello step precedente.

4. Salva l’immagine con un nome appropriato

La denominazione delle immagini è probabilmente l’aspetto più trascurato nell’ottimizzazione SEO.

I motori di ricerca, come Google, utilizzano il nome del file come uno degli indicatori per comprendere il contenuto dell’immagine. Un nome pertinente può aumentare le possibilità che l’immagine appaia in ricerche pertinenti.

Come rinominare correttamente le immagini

  1. Scegli un nome che descriva accuratamente l’immagine. Se l’immagine mostra un tramonto sulla spiaggia, un buon nome potrebbe essere “tramonto-spiaggia-california.jpg” anziché un generico “image1.jpg”. Non esagerare però con il testo; cerca di mantenere il nome del file relativamente breve e che arrivi al punto.
  2. Utilizza parole chiave rilevanti: Include parole chiave pertinenti al contenuto del tuo sito e all’immagine stessa. Questo aiuta a migliorare la rilevanza SEO dell’immagine per quelle parole chiave.
  3. Mantieni il nome del file semplice e leggibile: evita l’uso eccessivo di parole chiave (keyword stuffing) o l’uso di caratteri speciali, trattini bassi (_) o spazi. Preferisci l’uso di trattini (-) per separare le parole.
  4. Adotta uno schema di denominazione coerente: ad esempio, se hai diverse immagini di piatti in un ristorante, potresti nominarli come “pizza-margherita-ristorante-nome.jpg”, “pasta-carbonara-ristorante-nome.jpg”, ecc.

5. Aggiungi l’attributo Alt

L’attributo Alt, noto anche come testo alternativo, fornisce una descrizione testuale delle immagini. Questa viene visualizzata in situazioni in cui le immagini non vengono caricate correttamente, come in una connessione internet lenta.

Dal punto di vista SEO, l’attributo Alt aiuta i motori di ricerca a interpretare il contesto dell’immagine, migliorando il posizionamento del tuo sito nelle ricerche.

Esempio Tag Alt

Inoltre, è fondamentale per chi utilizza lettori di schermo, poiché consente di comprendere il contenuto delle immagini anche senza vederle.

Come scrivere un attributo Alt efficace + 2 esempi pratici

  • Descrizione accurata e concisa: il testo alternatovo dovrebbe fornire una descrizione chiara e diretta di ciò che è rappresentato nell’immagine. Idealmente, mantieni la lunghezza sotto i 125 caratteri.Ad esempio, per un’immagine di un tramonto sul mare, un buon attributo alt potrebbe essere “tramonto arancione sul mare“.
  • Includi Parole Chiave rilevanti: utilizza parole chiave pertinenti al contenuto dell’immagine e del sito. Assicurati però che l’uso di queste parole sia naturale e rilevante.
  • Non Utilizzare “Immagine di” o “Foto di”: è superfluo iniziare la descrizione con frasi di questo genere poichè i lettori di schermo spesso premettono la lettura dell’attributo alt con una frase che indica che si tratta di un’immagine.
  • Controlla il contesto: se l’immagine ha una funzione specifica sul sito, come un pulsante o un link, assicurati che l’attributo alt ne descriva la funzione.

Esempi Pratici

Adidas Pharrel Williams

alt="Adidas Pharrel Williams"

Notte Stellata Vincent Van Gogh

alt="Notte Stellata Vincent Van Gogh"

6. Aggiungi l’attributo Title

L’attributo “title” delle immagini è un altro elemento che, sebbene meno impattante per la SEO rispetto all’attributo alt, gioca un ruolo significativo nell’arricchire l’esperienza utente sul tuo sito web.

Questo attributo fornisce informazioni aggiuntive sull’immagine quando un utente ci passa sopra con il cursore.

Esempio Attributo Title

Creare un attributo title efficace + 2 esempi pratici

  • Contenuto informativo: a differenza dell’attributo alt, che è destinato principalmente a descrivere l’immagine, l’attributo title può essere utilizzato per fornire informazioni aggiuntive, come dettagli su un prodotto, un autore di una fotografia, o altre curiosità.
  • Brevità e Pertinenza: Anche se l’attributo title può essere un po’ più lungo dell’alt, è importante mantenerlo conciso e rilevante. Un buon title dovrebbe arricchire l’esperienza dell’utente senza sovraccaricarlo di informazioni.
  • Non ripetere l’attributo Alt: Idealmente, l’attributo title dovrebbe fornire informazioni che non sono già presenti nell’attributo alt. Ripetere lo stesso testo è ridondante e non aggiunge valore.
  • Utilizzo oculato: Mentre è utile in molte situazioni, l’attributo title non è sempre necessario. Valuta se l’aggiunta di un title apporta realmente un valore aggiunto all’immagine e all’esperienza dell’utente.

Esempi pratici

Adidas Pharrel Williams

title="Adidas Pharrel Williams Nere"

Notte Stellata Vincent Van Gogh

title="La Notte stellata del pittore olandese Vincent van Gogh"

7. Utilizza il lazy loading

Il lazy loading è una tecnica di ottimizzazione delle prestazioni del sito web che consiste nel caricare le immagini (o altri contenuti) solo quando sono necessarie, ovvero quando entrano nel campo visivo dell’utente.

Questo approccio può ridurre significativamente i tempi di caricamento iniziali di una pagina, migliorando l’esperienza dell’utente e potenzialmente anche la SEO del sito.

Come aggiungere il lazy loading

Per implementare questa funzionalità ci sono due modi:

  1. Mediante l’attributo loading
  2. Utilizzando una libreria Javascript

Attributo loading

Attualmente, praticamente tutti i browser supportano questa forma nativa di lazy loading. Basterà aggiungere l’attributo loading=”lazy” alle immagini ed il gioco è fatto.
In automatico i browser scaricheranno le immagini solo nel momento in cui entreranno nel campo visivo dell’utente.

<img title="..." src="..." alt="..." loading="lazy" />

Potete vedere il livello di supporto di questo attributo nei vari browser mediante il sito caniuse.com

Libreria Javascript

Prima dell’introduzione dell’attributo loading, l’utilizzo di alcune librerie javascript rappresentava l’unico modo per ritardare il download delle immagini.

Ad oggi, ha senso continuare ad utilizzare queste librerie se si vuole avere un controllo maggiore sui tempi e le modalità di download delle immagini.

Esempi di librerie:

8. Utilizza immagini responsive

Con la crescente varietà di dispositivi e dimensioni di schermo, assicurarsi che le immagini si adattino e funzionino bene su tutte queste piattaforme è essenziale.

Con l’implementazione delle immagini responsive è possibile mostrare all’utente l’immagine che più si adatta alle dimensioni del suo schermo, riducendo così i tempi di caricamento e migliorando l’esperienza utente.

Per implementare questa funzionalità è necessario intervenire a livello HTML ed utilizzare l’attributo srcset nelle immagini. Questa aggiunta ci permetterà di specificare diverse versioni dell’immagine per diverse larghezze di schermo.

Per capire meglio il funzionamento di questo attributo, ti consigliamo l’articolo A Guide to the Responsive Images Syntax in HTML

9. Implementa l’uso di una CDN (Content Delivery Network)

Una CDN è una rete di server distribuiti geograficamente che lavorano insieme per fornire una consegna rapida di contenuti internet, inclusi video, file HTML, fogli di stile, JavaScript e immagini.

Quando un utente visita il tuo sito, la CDN reindirizza le richieste dell’utente al server più vicino a lui geograficamente. Questo riduce il tempo di viaggio (latenza) dei dati, permettendo un caricamento più veloce delle immagini e di altri contenuti.

Esistono diversi fornitori di CDN, come Akamai, Cloudflare, Amazon CloudFront, e molti altri. La scelta dipenderà dalle tue specifiche esigenze, budget e preferenze.

Contattaci

Ti serve aiuto per ottimizzare le immagini del tuo sito web?

Scrivici

Plugin per l’ottimizzazione delle immagini.

Per semplificare il processo di ottimizzazione delle immagini, esistono numerosi plugin che automatizzano gran parte del lavoro.
Il nostro consiglio è di sfruttarli in concomitanza ai suggerimenti che abbiamo visto in precedenza, in modo da facilitare il lavoro di quest’ultimi ed avere risultati ancora migliori.

Vediamo adesso alcuni dei migliori plugin disponibili per diverse piattaforme di gestione dei contenuti (CMS) e le loro caratteristiche principali.

Plugin per WordPress

  • Smush: è estremamente popolare tra gli utenti di WordPress. Smush comprime e ottimizza le immagini senza una perdita percettibile di qualità. Offre anche lazy loading, ridimensionamento delle immagini e la possibilità di ottimizzare immagini in lotti.
  • EWWW Image Optimizer: offre una soluzione completa per ottimizzare le immagini. Comprime automaticamente le immagini caricate e può anche ottimizzare quelle già presenti nella libreria multimediale. Supporta diversi formati di immagini e offre la possibilità di cloud storage.

Plugin per Shopify

  • Crush.pics: questo plugin di Shopify consente la compressione automatica delle immagini mantenendo una buona qualità visiva. È ideale per i siti e-commerce che hanno bisogno di mantenere un alto livello di qualità delle immagini dei prodotti.
  • SEO Image Optimizer: oltre a ottimizzare le immagini, questo plugin aiuta anche a migliorare la SEO, aggiungendo automaticamente tag alt e title alle immagini.

Come controllo se le immagini del mio sito web sono ottimizzate?

Per verificare l’ottimizzazione delle immagini sul tuo sito web, puoi avvalerti di vari strumenti online e funzionalità integrate nei browser.

Strumenti di ispezione integrati nei Browser

La maggior parte dei browser moderni include strumenti di ispezione che consentono di visualizzare le dimensioni delle immagini e come vengono caricate.

Puoi accedere a questi strumenti in questo modo:

  1. Clicca con il pulsante destro del mouse sulla pagina web che vuoi controllare e seleziona “Ispeziona
  2. Seleziona la voce “Rete” nel menu orizzontale posizionato in alto alla finestra che si è aperta
  3. Seleziona la voce “Img” nel menu orizzontale leggermente più in basso
  4. Fai un hard refresh della pagina (Apple: command + shift + r / Windows: ctrl + F5)
  5. Vai nella colonna “Dimensioni” e clicca per vederle in ordine di peso

Ispeziona Peso Immagini

In questa tabella potrai quindi vedere il peso ed il tempo di caricamento di ogni immagine e capire facilmente quali devono essere ottimizzate.

Lo strumento “ispeziona” è utile anche per controllare il caricamento delle altre risorse come Javascript, CSS, ecc.

PageSpeed Insight

Un altro strumento essenziale per la verifica dell’ottimizzazione delle tue immagini è PageSpeed Insights, offerto da Google. Questo servizio online valuta non solo le immagini ma l’intera velocità di caricamento del tuo sito web, fornendo un punteggio complessivo di prestazione e suggerimenti dettagliati per migliorare la velocità del sito.

Per utilizzare PageSpeed Insights, segui questi semplici passaggi:

  1. Visita PageSpeed Insights.
  2. Inserisci l’URL del tuo sito web nella barra di ricerca e clicca su “Analizza“.
  3. Dopo alcuni istanti, lo strumento genererà un rapporto che comprende una sezione dedicata alle immagini. Qui, potrai vedere quali immagini necessitano di ottimizzazione e ricevere suggerimenti specifici, come la compressione delle immagini o la loro conversione in formati più efficienti (es. WebP).

Ottimizzazione Immagini PageSpeed Insight
Seguendo le raccomandazioni fornite, potrai non solo migliorare l’ottimizzazione delle tue immagini ma anche elevare l’esperienza generale degli utenti sul tuo sito.