Scegliere ed ottimizzare le immagini per il sito web

In questo articolo scoprirai i vari formati delle immagini digitali e le loro caratteristiche principali. Poi conoscerai i vari ambiti dell’ottimizzazione che risulta necessaria per rendere le immagini che dovrai caricare sul sito, più leggere e più appetibili per il motore di ricerca.
Leggendo tutto l’articolo avrai una panoramica completa per poter valutare se le immagini presenti sul tuo sito, o quelle che devi caricare, siano in linea con gli standard attuali del web.

Indice

1) Perché sono importanti le immagini sul sito
2) Formati grafici per il web (PNG, JPG, WebP, GIF, SVG)
3) Come ottimizzare le immagini
4) Strumenti di ottimizzazione
5) Ottimizzazione su WordPress tramite plugin
6) Ottimizzazione immagini per la SEO
7) Come scegliere le immagini per il sito
8) Copyright sulle immagini

PERCHÉ LE IMMAGINI SONO IMPORTANTI PER UN SITO?

Utilizzare sul sito immagini e fotografie di qualità, scelte in modo opportuno, consente di migliorare la comunicazione, di far percepire la professionalità dell’azienda, di rendere più usabile la navigazione, creare un’esperienza utente migliore e conseguentemente facilitare la conversione (cioè l’azione che vogliamo compia l’utente).

Questo principio vale per tutte le tipologie di siti, quindi non pensiamo che il sito istituzionale, solo perché non vende prodotti o servizi, non abbia bisogno di avere immagini molto curate.

Il detto “un’immagine vale più di mille parole” è tutt’ora valido e ci indica quanto dobbiamo impegnarci nella scelta delle immagini e delle foto in qualsiasi sito.

Altro aspetto importante delle immagini è legato all’ottimizzazione per i motori di ricerca (SEO). Infatti il posizionamento delle pagine del sito nelle ricerche degli utenti, dipende da una serie di valutazioni che fa il motore di ricerca stesso, e tra queste, ci sono anche le immagini presenti nelle pagine.

Ad esempio, immagini non ottimizzate allungano considerevolmente i tempi di caricamento delle pagine, oppure immagini non coerenti con il testo o di bassissima qualità implicano una scarsa attenzione da parte motore di ricerca.

Google immagini è una preziosa opportunità per aumentare il traffico sul sito quindi sfruttiamola dedicando la giusta attenzione alle immagini che inseriamo.

FORMATI GRAFICI PER IL WEB (PNG, JPG, WEBP, GIF, SVG)

È bene ora, prima di procedere con le argomentazioni relative all’ottimizzazione delle immagini, soffermarsi sui vari formati che bisogna conoscere:
– JPG (o JPEG), probabilmente è il formato immagine digitale più diffuso. È un formato di tipo “lossy” quindi perde qualità al diminuire delle dimensioni del file. Perde qualità anche se viene modificato e salvato più volte. Ha il grande vantaggio di essere un formato molto leggero, quindi ottimo per le pagine web che devono essere veloci da caricare durante la navigazione degli utenti. Il JPG non consente la trasparenza.
– GIF, formato che supporta solo 256 colori, ma consente la trasparenza (anche se non trasparenza alfa) e genera file di dimensioni contenute. Adatto per immagini come i loghi che generalmente hanno pochi colori. Con il formato GIF possiamo anche creare delle semplici animazioni anche se, in questo caso, le dimensioni del file aumentano considerevolmente.
– PNG, formato che supporta la trasparenza alfa, quindi è possibile ottenere una modulazione della trasparenza, andando ben oltre i limiti della trasparenza delle GIF. I file PNG consentono l’utilizzo di molti colori ma solo nell’ambito RGB. Il formato è di tipo lossless, quindi non dovrebbe perdere qualità ma applicando la compressione in fase di salvataggio, si verifica sempre una perdita di dati, pur mantenendo una buona qualità.
– SVG, realizzato tramite il linguaggio xml, possiamo editare i file di questo tipo sia con un programma di grafica che con un software di testi. Il formato genera file vettoriali molto leggeri adatti alla grafica 2D e 3D. Utilissimo quando necessitiamo di avere sul sito immagini che si adattino a diversi dispositivi, quindi ad essere visualizzate in diverse dimensioni (in pixel)
– WEBP, formato rilasciato da Google nel 2010, sfrutta sia la compressione lossy che quella lossless. Studiato appositamente per ottenere immagini molto leggere da utilizzare sulle pagine web. Formato che supporta la trasparenza e le animazioni.

COME OTTIMIZZARE LE IMMAGINI

Abbiamo già detto che avere immagini di dimensioni contenute è fondamentale per avere un sito web performante, apprezzato dai visitatori e anche dai motori di ricerca.
In questo contesto, dobbiamo lavorare sulle immagini in 2 fasi:
1) Ridurre le dimensioni in px (pixel)
2) Ridurre le dimensioni in kb (kilobyte)

3a) Ridurre le dimensioni in px (pixel)
Consiste nel ritagliare un’immagine, oppure ridurre larghezza e altezza in modo proporzionale, oppure entrambe le cose.
Immaginiamo di dover inserire il logo del sito, quello che in genere compare in alto a sinistra, in uno spazio di larghezza 150px. Sarebbe inutile caricare il logo con larghezza 2000px e sprecare risorse per attuare un ridimensionamento ogni volta che si carica una pagina, molto meglio ridurre le dimensioni e caricare il logo a 150px.

3b) Ridurre le dimensioni in kb (kilobyte)
Si tratta di applicare una compressione (lossy o lossless) ai file di immagine che dobbiamo utilizzare.
Dopo aver ridimensionato le immagini, presumibilmente il loro peso sarà ancora eccessivo per poterle mettere sul sito, quindi tramite una operazione di compressione potremo alleggerirle ulteriormente arrivando ad un buon risultato.
Risultato che sarà comunque un compromesso tra qualità e dimensioni.

STRUMENTI DI OTTIMIZZAZIONE

Sia per ridurre le dimensioni in px che in kb, possiamo usare strumenti da installare nel nostro pc oppure strumenti online.

Nel caso di strumenti da installare, ne esistono tantissimi. Se ti va, prova questi:
– Photoshop, Affinity Photo (entrambi della Adobe)
– Gimp (gratuito)
– FILEminimizer Pictures (gratuito) https://balesio.com/fileminimizerpictures/ita/download.php
– ImageOptim (gratuito) https://imageoptim.com/it.html

Strumenti online:
– TinyJPG/TinyPNG (gratuito) https://tinyjpg.com/
– Compressor (gratuito) https://compressor.io
– Squoosh.app (gratuito) https://squoosh.app/editor (gratuito)

Tutti gli strumenti online sono molto semplici da utilizzare. Serve solo fare un po’ di pratica e sperimentare le diverse opzioni.

OTTIMIZZAZIONE SU WORDPRESS TRAMITE PLUGIN:

Se il tuo sito è realizzato su WordPress, potresti anche considerare l’idea di installare un plugin che ottimizzi le immagini.
Ne esistono diversi, sia gratuiti (in genere con limitazioni) che a pagamento. Ad esempio:
– Smush (versione gratuita) https://wordpress.org/plugins/wp-smushit
– EWWW Image Optimizer (versione gratuita) https://wordpress.org/plugins/ewww-image-optimizer/
– TinyPNG (versione gratuita) https://wordpress.org/plugins/tiny-compress-images/

Utilizzando un plugin sul nostro WordPress, non dovremo preoccuparci di ottimizzare le immagini prima di caricarle sul sito. Ma teniamo conto che, in genere, questi plugin generano copie ottimizzate delle immagini caricate, quindi ci sarà un aumento notevole dello spazio occupato sull’hosting che stiamo utilizzando.

OTTIMIZZAZIONE IMMAGINI PER LA SEO

Non meno importante dell’ottimizzazione in termini di dimensioni è da considerarsi l’ottimizzazione delle immagini in ottica SEO.
Infatti, l’algoritmo di Google considera, tra le altre cose, anche la qualità e la cura nel caricamento delle immagini sul sito.
Da qui deriva la necessità di eseguire una serie di attività di ottimizzazione SEO:
1) Nome file, rinominare l’immagine in modo corretto. Ad esempio se abbiamo una foto con nome del tipo IMG_20230112_125875.jpg rinominiamo con un nome che rappresenti il significato della foto (Sede-azienda.jpg, staff.jpg, parco-macchine, ecc.).
2) Alt text (testo alternativo), è un attributo del tag “img”. Il suo contenuto lo vediamo quando l’immagine non viene visualizzata sulla pagina per un problema di connessione, di risposta del server, o altro.
Il testo alternativo consente al visitatore, pur vedendo uno spazio vuoto (dato dall’immagine mancante), di capire che immagine fosse stata predisposta in quel punto e quindi di capire meglio la comunicazione espressa dal testo che legge.
L’alt text serve anche ai motori di ricerca per classificare meglio la foto e quindi restituirla in modo corretto come risultato alle ricerche degli utenti.
Da considerare importantissimo è anche l’aumento dell’usabilità che implica l’alt text, infatti i browser per non vedenti leggono l’alt text consentendo al visitatore con disabilità di fruire di tutti i contenuti.
3) Attributo Title, serve appunto a titolare l’immagine. Se lo utilizziamo comparirà quando posizioniamo il mouse sull’immagine stessa. Anche il Title è utile ai motori di ricerca per migliorare l’indicizzazione.

COME SCEGLIERE LE IMMAGINI PER IL SITO

La scelta delle immagini non è mai una cosa banale. Provate a cambiare le immagini in un sito e noterete subito come cambi l’impatto visivo che ne deriva.
Ecco perché, come è necessario far realizzare il sito web da persone competenti, anche le foto dovrebbero essere scattate da un professionista, perchè solo chi ha conoscenza ed esperienza a livello professionale può realizzare foto che esprimano il valore dell’azienda, dei prodotti/servizi, i vantaggi per i clienti, ecc.
Nel caso non si riesca a dare l’incarico ad un fotografo, si può optare per l’acquisto di foto su banche dati online che offrano questo servizio.
Naturalmente le foto di queste banche online sono generiche, non rappresentano la tua azienda, il tuo staff, i tuoi macchinari, i tuoi mezzi, ma almeno andranno a veicolare bene la tua comunicazione sul sito.

Alcuni servizi online per scaricare immagini e foto:
– https://it.freepik.com
– https://unsplash.com/it
– https://www.istockphoto.com/it
– https://www.shutterstock.com/it/
– https://stock.adobe.com/it/

I servizi indicati sopra, prevedono sia il download gratuito che costi per le immagini singole, i pacchetti e i piani di abbonamento. In entrambi i casi sono previste delle regole di utilizzo, quindi leggi bene le clausole indicate prima di scaricare le foto.

COPYRIGHT SULLE IMMAGINI

Potresti essere tentato di effettuare una ricerca per immagini su Google e scaricare quelle che ti piacciono come se non ci fosse un domani. Evita di farlo perchè la maggior parte delle immagini sono coperte da copyright, quindi non sei autorizzato dall’autore ad utilizzarle per i tuoi scopi commerciali o privati.

Vuoi dei consigli sulle immagini/foto del tuo sito? Sia che tu le debba ancora inserire o che le abbia già sul sito e non ti soddisfino appieno, possiamo darti utili consigli.