Come ottimizzare le immagini per un sito web
Indice Articolo
Ottimizzare immagini per un sito web: la guida
In questa guida troverai tutto ciò che devi sapere per ottimizzare immagini per il Web, incluso come ottimizzare le immagini per la SEO:
- Che cos’è l’ottimizzazione delle immagini?
- 7 passaggi per ottimizzare le immagini per il web.
- Scegli le immagini giuste.
- Considera attentamente il testo associato alle tue immagini.
- Regola le dimensioni e il formato dell’immagine.
- Considera il Lazy loading.
- Abilita la memorizzazione nella cache del browser.
- Non dimenticare i metadati delle immagini.
- Crea una Sitemap delle immagini.
- Conclusione e prossimi passi.
E ora cominciamo!
Che cos’è l’ottimizzazione delle immagini?
Secondo il Content Marketing Institute, l’ottimizzazione SEO delle immagini è il processo di creazione e consegna di immagini di alta qualità nelle dimensioni, nel formato e nella risoluzione ideali per aumentare il coinvolgimento degli utenti. Implica anche l’etichettatura corretta delle immagini in modo che i crawler dei motori di ricerca possano trovarle e capire di cosa si tratta.
7 passaggi per ottimizzare le immagini per il web
Data l’importanza delle immagini per il brand e per la presenza online di un’azienda, è sorprendente come un numero così grosso di persone non sia preparato nell’includere l’ottimizzazione delle immagini nella propria strategia SEO.
Proviamo quindi a invertire la tendenza seguendo questi sette passaggi:
1. Scegli le immagini giuste
I motori di ricerca si concentrano sul fornire dei contenuti pertinenti agli utenti, il che include anche le immagini. Per questo motivo dovrai aver premura di selezionare immagini pertinenti a ciò di cui stai parlando.
Se ti concentri sul social media content marketing, ad esempio, non cominciare a pubblicare foto di famose popstar soltanto per attirare l’attenzione, a meno che la tua attività non sia legittimamente connessa a quella persona (e tu non abbia il loro consenso).
In definitiva, la ragione per cui dovresti includere immagini nei tuoi post è per integrare il contenuto, rompere lunghi blocchi di testo e aiutare il tuo pubblico a comprendere meglio il concetto.
Usa le tue immagini
Quando possibile, usa le tue immagini. Il mondo online è dominato dalle foto d’archivio, quindi l’impatto sulla creazione dei tuoi contenuti sarà notevole.
Non limitarti soltanto alle foto. Le immagini originali potrebbero includere grafici, diagrammi e infografiche, o affini.
Ad esempio, se possiedi un ristorante le foto dei tuoi piatti rappresenteranno meglio ciò che servi rispetto a un’immagine generica presa da un qualsiasi sito di foto d’archivio. Tali immagini ti aiuteranno anche a evitare di far sì che accidentalmente il tuo prodotto o servizio venga travisato.
Conoscere e applicare le migliori strategie sulla fotografia dei tuoi prodotti può fare la differenza nel lungo periodo.
Le foto d’archivio sono un’opzione
Nei casi in cui non hai una immagine di tua proprietà che rappresenti ciò su cui stai scrivendo e intendi usare l’immagine più come illustrazione che come esempio del prodotto che stai vendendo, puoi benissimo usare le foto d’archivio – sempre se hai le licenze appropriate.
Una licenza stabilisce l’ambito legale entro il quale l’immagine può essere utilizzata. Alcune immagini possono essere utilizzate per vari scopi, anche commerciali, purché siano debitamente accreditate.
Per altre immagini, l’uso commerciale potrebbe essere severamente proibito. Fondamentalmente, una licenza di immagine è un contratto per il quale il fotografo concede diritti specifici a un cliente/persona che utilizza la propria immagine.
Puoi ottenere le licenze assumendo un fotografo e commissionando nuovi lavori o attingendo a lavori già esistenti. A volte, i lavori già pubblicati online possono essere gratuiti, ma spesso dovrai pagare per i diritti di utilizzo.
Dare un volto ai fatti
Come specie, gli esseri umani sono predisposti a prestare attenzione ai volti. Per questo motivo, le immagini con volti umani sono generalmente più efficaci nell’incoraggiare gli acquisti rispetto ad altri tipi di grafica o animazioni.
2. Prendi attentamente in considerazione il testo associato alle tue immagini.
Ad esempio, se sei abituato a caricare foto su WordPress, potresti ricordare di essere stato reindirizzato ad aggiungere gli Attachment Details (dettagli dell’allegato). Poiché la maggior parte delle persone non sa in che modo questi dettagli aggiuntivi siano importanti per ottimizzare le immagini dal punto di vista della SEO, spesso non hanno la pazienza di compilare le suddette informazioni.
Le informazioni che WordPress ti chiede di aggiungere sono essenziali per migliorare l’ottimizzazione SEO dell’immagine. Non sai cosa dovrebbe comparire quando aggiungi testo alle tue immagini? Non temere, tratteremo questo passaggio in seguito.
Tieni presente, tuttavia, che mentre WordPress è un sistema di gestione dei contenuti popolare per i siti Web, le opzioni che tratteremo qui si applicheranno più generalmente a diversi strumenti di creazione di siti Web.
Tenendo a mente ciò, cominciamo la nostra analisi.
Titolo dell’immagine (Image Title)
Qualsiasi immagine vorrai aggiungere, sarà fondamentale utilizzare un titolo preciso e pertinente. Spesso il titolo predefinito per un’immagine rifletterà il nome del file, qualunque cosa tu abbia caricato. Se questo equivale a lettere e numeri casuali non ti sarà molto utile per un motore di ricerca.
Il nome del file dovrebbe anche includere parole chiave per le quali l’immagine potrebbe posizionarsi in una ricerca di Google. Ti consigliamo di separare le parole chiave con trattini (–) e non underscore (_) poiché i motori di ricerca non riescono a riconoscerli.
L’utilizzo delle parole chiave corrette può migliorare la tua SEO, poiché queste aiutano i motori di ricerca a capire meglio di cosa parlano le immagini.
Leggi anche: Come fare la ricerca delle parole chiave
Testo alternativo all’immagine (Image Alt Text)
I motori di ricerca raccolgono informazioni facendo scorrere gli “spider” attraverso i siti Web, registrando le informazioni mentre procedono. Sfortunatamente questi “ragnetti” non sono in grado di vedere fisicamente un’immagine e comprenderla, ma ne leggono solo il codice basandosi sulle informazioni ad essa associate per guidarli.
Il testo alternativo (alt text) è stato progettato per fornire una descrizione dell’immagine nei casi in cui il browser non sia in grado di mostrarla agli utenti.
Il testo alternativo aiuta anche i motori di ricerca a capire quale sia l’immagine. Inoltre, il testo alternativo facilità l’accessibilità. Tali informazioni sono utili per gli utenti che accedono a una pagina Web con screen reader o utilizzano browser che non sono in grado di elaborare immagini.
Includendo le parole chiave nel tuo testo alternativo, puoi dare anche una piccola spinta alla tua SEO – assicurati solo di non esagerare con le parole chiave.
Didascalia dell’immagine (Image Caption)
Le didascalie sono il testo descrittivo, posto sotto un’immagine, visibile a tutti gli utenti.
Una didascalia può fornire ulteriori informazioni su un’immagine che potrebbe non essere ovvia per gli utenti, come la data in cui è stata scattata la foto, dove è stata scattata e chi si trova al suo interno.
Puoi anche usare la didascalia per rafforzare lo scopo dell’immagine. In altre parole, la didascalia fornisce un contesto aggiuntivo.
Se stai utilizzando la stessa immagine per più post, modificare la didascalia che usi con l’immagine può essere utile per la SEO e per il coinvolgimento degli utenti.
Descrizione dell’immagine (Image Description)
Le descrizioni delle immagini sono spesso considerate uno dei segreti più preziosi del post allegato. Questo perché una volta inserita una descrizione, la suddetta viene archiviata come contenuto per il post dell’allegato. Quindi, se qualcuno fa click sul post dell’allegato verrà indirizzato su un’altra pagina che mostra l’immagine, il titolo dell’immagine, la didascalia e la descrizione dell’immagine come contenuto del post.
3. Regola le dimensioni e il formato dell’immagine
Quando si ottimizzano le immagini per la SEO, ci sono diversi fattori da tenere presenti per quanto riguarda le dimensioni, la formattazione e il tasso di compressione delle immagini.
Queste proprietà dell’immagine influenzeranno l’esperienza dell’utente sul tuo sito web. Se fatte male, possono condurre dei potenziali clienti alla ricerca di un prodotto o un fornitore di servizi differente. Ecco tre modi per assicurarti di fare tutto nel modo migliore:
Ridimensiona le tue immagini
Un sito web nella media contiene circa 1,8 MB di immagini, che rappresentano il 60% del peso dell’intero sito. Sebbene sia importante includere foto di alta qualità e ad alta risoluzione sul tuo sito, spesso queste possono causare un rallentamento nel caricamento della pagina.
Ciò si verifica maggiormente quando le immagini non sono ottimizzate per la visualizzazione online.
Il problema si aggrava quando gli utenti accedono al tuo sito tramite dispositivi mobili – un grosso problema poiché più della metà delle ricerche avvengono attraverso dispositivi mobili.
Ad esempio, Amazon ha scoperto che un ritardo di un secondo nel tempo di caricamento del sito potrebbe costare 1.6 miliardi di dollari nelle vendite annuali.
Un modo per aumentare la velocità di caricamento del tuo sito è ridurre le dimensioni delle immagini, cosa che dà un contributo positivo anche alla SEO. Per fortuna, è possibile limitare la dimensione delle immagini che si stanno utilizzando senza comprometterne gravemente la qualità o le proporzioni.
È importante notare come la dimensione dell’immagine e la dimensione del file siano due cose diverse.
La dimensione (size) dell’immagine si riferisce alla sua larghezza e altezza (ad es. 1024×680 pixel), mentre la dimensione del file è la quantità di spazio necessario per memorizzarla sul server (ad es., 350 KB).
Come ci si potrebbe aspettare, più grande è l’immagine più lo è la dimensione del file. Ciò non è comunque motivo di allarme quando si vuole ottimizzare immagini per un sito web. Anche se la qualità dell’immagine sarà inferiore, l’esperienza di visualizzazione online potrebbe non risentirne affatto: probabilmente gli utenti non potranno stampare l’immagine, inquadrarla e metterla sulla parete.
Scegli i tipi di formati giusti
La scelta del giusto tipo di formato può aiutare per ottimizzare le immagini, poiché alcuni tipi di file sono più adatti per applicazioni specifiche.
Questi formati rappresentano i modi migliori per caricare un’immagine, sia per quanto riguarda le dimensioni ridotte che per il minor tempo di inattività.
Scegli il giusto tasso di compressione
Se hai scelto il tipo di formato immagine che ritieni migliore per le tue esigenze, ma risulta essere ancora troppo grande, potresti prendere in considerazione la compressione dell’immagine. Nel fare questo, è essenziale scegliere il giusto tasso di compressione.
Una compressione dal 60% al 75% manterrà la qualità dell’immagine decente. Tuttavia, è meglio utilizzare quell’intervallo come punto di partenza e quindi sperimentare file di dimensioni e rapporti diversi per vedere quale funziona meglio per il tuo sito.
Se il tuo sito è composto da molte immagini, utilizza plugin che includono funzionalità per la compressione GZIP, la memorizzazione nella cache o l’ottimizzazione delle immagini, come WP Rocket and Imagify. Possono aiutare a ridurre i file senza sacrificare la qualità.
Ora, se non vuoi giocare con i plugin, puoi sempre usare Photoshop per modificare le tue immagini. Per fare ciò, utilizza l’opzione “Salva per il Web“, che riduce al minimo le dimensioni del file ottimizzandone la qualità.
Altri suggerimenti per gestire file di grandi dimensioni
Ci sono alcune altre cose che puoi fare per ridurre le dimensioni dei file immagine e aumentare la velocità del tuo sito web. Se ti affidi a immagini d’archivio, prova a scaricare file più piccoli. Se l’immagine ti sembra buona nell’anteprima ancor prima di scaricarla, sarà simile sul tuo sito web.
Un altro consiglio è quello di creare immagini responsive. Tali immagini si ingrandiranno o rimpiccioliranno a seconda delle dimensioni del browser e del dispositivo utilizzato. Questo aiuta sia in termini di velocità del sito che con la SEO.
4. Prendi in considerazione il Lazy loading.
Il lazy loading consente al browser di caricare soltanto le immagini che devono essere visualizzate sullo schermo. Ciò significa che le immagini più in basso nel sito Web (above the fold) non verranno caricate fino a quando un utente non raggiungerà quella parte del sito Web.
Il lazy loading può aumentare significativamente la velocità del tuo sito Web, in particolare su pagine che includono molte immagini nella parte inferiore.
Anche se è in corso un dibattito sugli impatti del lazy loading per la SEO, lo strumento PageSpeed Insights di Google consiglia di farlo – e Google è responsabile dell’intera baracca.
Esistono diversi modi per implementare il lazy loading e la maggior parte di essi prevede la codifica manuale. Detto ciò, se stai usando WordPress il plug-in A3 Lazy Load plugin è altamente raccomandato dal team Ahrefs.
5. Abilitare la memorizzazione nella cache del browser
La memorizzazione nella cache del browser si verifica quando i file, comprese le immagini, vengono archiviati nei browser dei visitatori in modo che questi file vengano caricati più rapidamente quando visitano nuovamente il sito in futuro.
È possibile abilitare la memorizzazione nella cache del browser tramite l’uso di plug-in come W3 Total Cache. Puoi anche abilitare manualmente la memorizzazione nella cache del browser aggiungendo questo codice al tuo file .htaccess:
<IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" </IfModule>
Modifica “1 year” nel codice per qualsiasi intervallo di tempo che sembra adatto alle tue esigenze (chiediti con quale frequenza stai aggiornando i contenuti), ad esempio “1 month” o “1 week”.
6. Non dimenticare i metadata delle immagini
I Metadata costituiscono tutte le informazioni ausiliarie memorizzate in un file, incluso quando il file è stato creato o modificato l’ultima volta.
I metadata possono rappresentare fino al 15% della dimensione totale di un’immagine JPEG.
Altri image metadata possono includere miniature, informazioni sul copyright e profili colore. Questo tipo di informazioni sono considerati dati strutturati, poiché si trovano in un campo fisso all’interno di un record o di un file.
Google Immagini supporta dati strutturati per immagini di prodotti, video e ricette. Ad esempio, se hai ricette sul tuo sito e aggiungi dati strutturati alle tue immagini, Google può aggiungere un badge all’immagine che mostra appartenente a una ricetta.
Per creare questi dati strutturati è consigliabile seguire le linee guida di Google sui dati strutturati.
7. Creare una Sitemap delle immagini
Una sitemap serve a comunicare ai motori di ricerca tutte le pagine del tuo sito.
Google consente alle image sitemaps di contenere URL di altri domini, a differenza delle normali sitemap che impongono restrizioni tra domini.
Ciò significa che puoi utilizzare le reti di distribuzione dei contenuti per ospitare immagini, il che può migliorare le prestazioni del tuo sito web.
Ecco la buona novella: la creazione di una Sitemap per immagini non è qualcosa che dovrai fare manualmente.
Se stai utilizzando WordPress, puoi utilizzare il plug-in Yoast SEO per aggiungere automaticamente i tuoi contenuti, tra cui foto, video, miniature e post, a una mappa del sito. Sfortunatamente, Yoast non include didascalie con le tue foto nella sitemap. Puoi aggiungerli manualmente al tuo sito usando questi codici:
Conclusione e prossimi passi
Le immagini sono essenziali per il tuo sito web, poiché rafforzano il tuo marchio e aumentano in modo significativo l’impatto che il tuo sito ha sugli utenti. Tuttavia, i file delle immagini possono anche rallentare il tuo sito web al punto di limitare la tua esposizione agli utenti e conseguentemente perdere clienti.
Per combattere questo potenziale pericolo, oltre a migliorare la tua SEO è fondamentale ottimizzare le immagini per il Web.