Stai cercando una guida che ti aiuta a ottimizzare le immagini per un sito web? In questo articolo troverai una raccolta di suggerimenti utili e tool gratuiti che puoi utilizzare per comprimere e ridimensionare le immagini.
Perché è necessario ottimizzare le immagini in un sito web?
Se hai iniziato a leggere questo articolo saprai benissimo che immagini troppo pesanti possono influire su diversi aspetti del tuo sito web:
- La velocità di caricamento, su cui il peso delle immagini influisce direttamente;
- La SEO, su cui la velocità di caricamente influisce.
Partiamo dal primo punto.
Ogni volta che una pagina del sito web deve caricarsi, il browser carica dal server le immagini che sono presenti nella pagina.
Ovviamente, maggiore è il peso delle immagini, più alto sarà il tempo necessario per effettuare questa azione. In particolare quando l’utente cerca di collegarsi a un sito web con una connessione più lenta (per esempio da mobile).
Sulla velocità di caricamento non incide solamente il peso delle immagini e nel prossimo paragrafo vediamo come capire se gli elementi multimediali di una pagina sono troppo pesanti.
Come detto la velocità di caricamento influisce anche sulla SEO. Per Google infatti è fondamentale che le pagine mostrate agli utenti siano user friendly e, di conseguenza, rapide nel caricarsi.
Come analizzare se le immagini di una pagina sono troppo pesanti
Per capire se le immagini presenti all’interno di una pagina web sono troppo pesanti possiamo utilizzare PageSpeed Insights.
Questo strumento gratuito di Google, una volta fornito un URL, lo analizza fornendo dei dati sulle prestazioni del sito web, sia da desktop che da mobile.
Cliccando appunto nella sezione prestazioni, viene mostrata la diagnostica della pagina con una serie di errori risolvibili.
Tra quegli errori ne viene mostrato uno relativo alle immagini, se sono troppo pesanti.
Approfondendo questa schermata è anche possibile visualizzare quali immagini sono considerate troppo pesanti ed eventualmente qual è la potenziale riduzione di peso.
Ovviamente, come vedremo più avanti, una compressione eccessiva rischia di peggiorare di molto la qualità dell’immagine. Il consiglio è quindi di cercare sempre un giusto compromesso tra peso e qualità dell’immagine.
Ottimizzare le immagini di un sito web: la guida
Per comprimere le immagini utilizzate all’interno di un sito web è necessario intervenire su diversi aspetti:
- La dimensioni delle immagini. Immagini più grandi, intese come dimensioni in pixel, sono tendenzialmente più pesanti rispetto a immagini più piccole.
- Il formato delle immagini. Esistono dei formati che comprimono le immagini rendendole più leggere, anche se allo stesso tempo ne peggiorano la qualità.
Per quanto riguarda la dimensione delle immagini non esiste una dimensione assoluto. Dobbiamo considerare che le immagini possono essere visualizzate su schermi con dimensioni e risoluzioni differenti.
In generale le immagini non dovrebbero mai avere dimensioni più grandi degli schermi su cui sono visualizzate.
Ad esempio, se un’immagine deve essere visualizzata a tutto schermo da desktop, la dimensione corretta potrebbe essere di 1920 pixel per 1080 pixel.
Per quanto riguarda il formato facciamo prima una panoramica:
- JPEG e WEBP sono formati che comprimono le immagini portando a una perdita di qualità. Il formato WEBP consente anche di mantenere lo sfondo trasparente dell’immagine.
- PNG è un formato che non comprime l’immagine e permette di mantenere lo sfondo trasparente, mantenendone la qualità.
- SVG è un formato vettoriale, che quindi permette il ridimensionamento delle immagini nel caso in cui esse siano all’origine vettoriali.
Qual è il formato consigliato quindi?
Il formato SVG deve essere utilizzato per icone, illustrazioni grafiche e loghi, permettendo quindi a questa tipologia di immagini di rimanere leggere senza perdere minimamente la qualità.
Il formato PNG è consigliato per loghi o icone nel caso non sia possibile utilizzare il formato SVG. L’utilizzo di questo formato per foto rischia di appesantire e rallentare di molto il caricamento della pagine e, per questo, è fortemente sconsigliato.
I formati WEBP e JPEG sono invece consigliati per fotografie o comunque immagini raster, facendo attenzione a trovare il giusto compromesso tra compressione e qualità. Come detto il formato WEBP consente anche di esportare immagini con sfondo trasparente, sostituendo quindi la necessità di utilizzare file PNG.
Strumenti utili per comprimere le immagini
La compressione e il ridimensionamento di immagini per il web può essere fatta utilizzando diversi strumenti, gratuiti o a pagamento.
Uno strumento gratuito estremamente efficace è Squoosh.
Questo tool gratuito online consente di caricare un file in qualsiasi formato, ridimensionarlo sia con un ritaglio oppure mantenendo le proporzioni originali ed esportarlo in diversi formati.
Mentre modifichiamo il file ci viene mostrata una preview che mostra il file originale a fianco al file compresso, così da valutare se la qualità finale è soddisfacente o meno.
In fase di export è possibile anche selezionare il livello di compressione, nel caso in cui si decida di esportare in JPEG o WEBP.
La nota negativa di Squoosh è che non è possibile fare azioni in sequenza, e quindi ogni file deve essere modificato singolarmente.
Uno strumento professionale che permette di ottimizzare le immagini per un sito web è invece Adobe Photoshop.
Photoshop è uno dei più famosi tool per la postproduzione di immagini e permette di:
- Ridimensionare e ritagliare le immagini in base alle dimensioni specifiche necessarie all’interno di un sito web;
- Scegliere il formato di export migliore e il fattore di compressione in base alla tipologia di immagine;
- Registrare delle azioni per velocizzare il lavoro, realizzando degli interventi massivi sulle immagini;
- Esportare le immagini in batch, agevolando e semplificando la fase di export.
Essendo uno strumento professionale, rispetto a Squoosh Photoshop è decisamente più complesso, oltre ad avere un costo in abbonamento.
Per sintetizzare
Abbiamo visto come ottimizzare le immagini per un sito web, analizzando:
- Le dimensioni consigliate delle immagini;
- I formati migliori in base alla tipologia di file;
- Gli strumenti utili per comprimere le immagini.
Seguendo questa guida potrai ridurre il peso di foto, icone ed elementi grafici, velocizzando il caricamento delle pagine e migliorando il posizionamento SEO del tuo sito web.
