Chiedi a qualsiasi sviluppatore web cosa rallenta la maggior parte dei siti e la risposta è quasi sempre la stessa. Le immagini. L'ottimizzazione delle immagini per il web è il processo di riduzione del peso dei file immagine senza perdere qualità visiva, così le pagine si caricano più in fretta senza peggiorare. Una singola fotografia non compressa può pesare diversi megabyte. La stessa immagine, formattata e compressa nel modo giusto, può stare sotto i 100 kilobyte senza differenze visibili sullo schermo. Questo articolo spiega quali formati di file usare, come funziona la compressione, quando ridimensionare prima di caricare, come si inserisce il lazy loading e cosa fa la differenza più grande nella pratica sulla velocità di caricamento della pagina.
Le immagini sono il fattore che pesa di più sul peso della pagina nella maggior parte dei siti. Una pagina con cinque foto non ottimizzate può pesare dieci volte più del necessario. Quel peso si traduce direttamente in un caricamento più lento, in un punteggio peggiore di Largest Contentful Paint e in visitatori che se ne vanno prima che la pagina finisca di comparire. Per capire perché la velocità di caricamento influisce sulla tua attività e sul posizionamento, leggi l'articolo su perché la velocità del sito è importante.
Perché le immagini rallentano i siti?
Quando un visitatore apre una pagina, il browser scarica ogni risorsa che contiene prima di mostrarla. Le immagini sono di solito le più grandi tra queste risorse. Ogni immagine richiede una richiesta propria, e il browser deve aspettare che quelle richieste finiscano prima di poter mostrare il contenuto per intero.
Come le immagini influiscono sulle metriche di caricamento
- Le immagini influiscono direttamente sul Largest Contentful Paint (LCP). Se l'elemento visibile più grande di una pagina è un'immagine principale, l'LCP è il tempo che quell'immagine impiega a caricarsi del tutto
- Le immagini non ottimizzate aumentano il peso totale della pagina, il che ritarda ogni altra metrica lungo la sequenza di caricamento
- Sulle connessioni mobili l'effetto è amplificato. Un'immagine principale da 3 MB che si carica in due secondi su una connessione fissa può richiedere otto secondi o più su una rete mobile media
- Più immagini grandi aggravano il problema. Una galleria o una pagina prodotto con dieci foto non compresse può essere difficile da usare sulle connessioni più lente
Quali formati di file usare per le immagini web?
JPEG
- Il formato standard per fotografie e immagini con sfumature e molti colori
- Supporta la compressione con perdita (lossy), cioè una parte dei dati dell'immagine viene rimossa in modo permanente per ridurre il peso del file
- Supportato da tutti i browser e dispositivi senza eccezioni
- Un'impostazione di qualità da 75 a 85 produce file più piccoli del 60-80 per cento rispetto all'originale, senza perdita di qualità visibile per la maggior parte delle fotografie
PNG
- Il formato per le immagini che hanno bisogno di uno sfondo trasparente, compresi loghi, icone e grafiche con aree di colore piatto
- Usa la compressione senza perdita (lossless), cioè non viene rimosso nessun dato e l'immagine resta esattamente com'è
- I file PNG sono molto più grandi dei JPEG per le fotografie. Usa il PNG solo quando serve la trasparenza; usa JPEG o WebP per le foto
WebP
- Un formato moderno nato per sostituire sia JPEG sia PNG, con una compressione migliore a parità di qualità
- Le immagini WebP sono in genere più piccole del 25-35 per cento rispetto ai file JPEG equivalenti
- Supporta sia la compressione con perdita sia quella senza perdita, e supporta la trasparenza
- Supportato da tutti i principali browser. Se il tuo creatore di siti non converte in automatico le immagini in WebP, convertile a mano prima di caricarle
AVIF
- Un formato più recente che offre una compressione migliore del WebP, spesso più piccolo del 50 per cento rispetto al JPEG a qualità comparabile
- Il supporto dei browser sta crescendo ma non è ancora universale. Usa l'AVIF dove è supportato, con un ripiego automatico su WebP o JPEG per i browser che non lo supportano
Cos'è la compressione delle immagini e come funziona?
La compressione riduce il peso del file rimuovendo o semplificando i dati dell'immagine. Ce ne sono due tipi, e la differenza determina quando usare ciascuno.
Compressione con perdita (lossy)
- Rimuove in modo permanente una parte dei dati dell'immagine per ottenere un file più piccolo
- I dati rimossi vengono scelti in base a ciò che l'occhio umano nota meno, di solito sottili variazioni di colore e dettagli fini della texture
- Usata nel JPEG e nel WebP con perdita
- Un'impostazione di qualità da 75 a 85 produce file molto più piccoli con immagini che sembrano identiche all'originale non compresso per la maggior parte degli usi pratici
- Evita di risalvare un JPEG già compresso con un'impostazione di qualità più bassa. Così si sommano gli artefatti di compressione e l'immagine peggiora a ogni salvataggio
Compressione senza perdita (lossless)
- Riduce il peso del file senza rimuovere alcun dato dell'immagine. Ogni pixel resta esattamente com'è
- Usata nel PNG e nel WebP senza perdita
- Il risparmio sul peso del file è minore rispetto alla compressione con perdita, ma senza alcuna perdita di qualità
- Ideale per schemi di prodotto, schermate, grafiche piene di testo o qualsiasi immagine in cui gli artefatti di compressione sarebbero visibili o inaccettabili
Devi ridimensionare le immagini prima di caricarle?
Il peso del file e le dimensioni in pixel sono due questioni distinte, ed entrambe influiscono sulla velocità di caricamento. Comprimere un'immagine larga 4.000 pixel non serve se il browser deve mostrarla solo a 800 pixel di larghezza. Il browser scarica l'intera immagine da 4.000 pixel e la riduce nella finestra di visualizzazione, sprecando banda e rallentando la pagina per ogni visitatore.
Come dimensionare correttamente le immagini prima di caricarle
- Individua la larghezza massima a cui l'immagine verrà mai mostrata. Per le immagini a tutta larghezza su desktop, di solito è tra 1.440 e 1.920 pixel
- Per le immagini in colonne o schede, la larghezza mostrata è minore, spesso tra 400 e 800 pixel
- Ridimensiona l'immagine alla sua dimensione massima di visualizzazione prima di caricarla
- Per gli schermi retina e ad alta densità, moltiplica la larghezza di visualizzazione per 1,5-2. Un'immagine di una scheda larga 400 pixel ha bisogno di un file sorgente largo da 600 a 800 pixel per apparire nitida sugli schermi retina
Cos'è il lazy loading e come influisce sull'ottimizzazione delle immagini?
Il lazy loading ritarda il download delle immagini che non sono ancora visibili nella finestra di visualizzazione. Invece di caricare tutte le immagini della pagina in una volta, il browser carica le immagini solo quando i visitatori scorrono vicino a esse. Nelle pagine con molte immagini, questo riduce in modo significativo il peso iniziale della pagina e migliora il Time to Interactive per il contenuto visibile senza scorrere.
- Il lazy loading è supportato in modo nativo da tutti i principali browser con l'attributo
loading="lazy"nei tag delle immagini - Non applicare il lazy loading alle immagini above the fold. L'immagine principale e qualsiasi contenuto visibile senza scorrere devono caricarsi subito
- Applica il lazy loading a tutte le immagini below the fold, comprese gallerie di prodotti, miniature del blog e sezioni ricche di immagini più in basso nella pagina
Per una spiegazione completa di come funziona il lazy loading e di quando usarlo, leggi l'articolo su cos'è il lazy loading e come funziona.
Cosa sono le immagini responsive e perché contano?
Un'immagine responsive è un'immagine che viene servita con un peso diverso a seconda delle dimensioni dello schermo del visitatore. Invece di inviare un'immagine da 1.920 pixel a ogni dispositivo, compreso un visitatore su uno schermo di smartphone largo 375 pixel, le immagini responsive permettono al browser di richiedere solo ciò che gli serve.
Come le immagini responsive riducono il tempo di caricamento su smartphone
- Un visitatore da smartphone riceve una versione da 400 pixel dell'immagine invece del file completo per desktop, riducendo in modo drastico il peso scaricato
- Le immagini responsive usano l'attributo
srcsetper definire più file sorgente a larghezze diverse, così il browser può scegliere quello adatto - I creatori di siti che gestiscono tutto questo in automatico ti evitano di generare a mano più dimensioni di immagine
- Le immagini responsive migliorano direttamente i Core Web Vitals su smartphone, dove l'ottimizzazione delle immagini ha l'impatto maggiore sull'LCP
Per una spiegazione dei Core Web Vitals e di come viene valutato l'LCP, leggi l'articolo su cosa sono i Core Web Vitals.
Come si ottimizzano le immagini passo dopo passo?
Prima di caricare
- Ridimensiona l'immagine alle dimensioni di visualizzazione corrette
- Scegli il formato giusto: WebP per fotografie e grafiche in generale, PNG solo quando serve la trasparenza
- Comprimi con un'impostazione di qualità da 75 a 85 per i formati con perdita
- Controlla il peso del file. Una tipica immagine web dovrebbe stare sotto i 200 KB. Le immagini principali su desktop possono arrivare a 400 KB; oltre vale la pena rivederle prima di caricarle
Dopo il caricamento
- Aggiungi un testo alternativo descrittivo a ogni immagine. È importante per l'accessibilità e contribuisce alla visibilità nei motori di ricerca. Per una guida completa, leggi l'articolo su come usare le immagini sul tuo sito web
- Applica il lazy loading a tutte le immagini below the fold
- Esegui un test di velocità della pagina dopo aver aggiunto nuove immagini. Una sola immagine non ottimizzata può annullare tutti gli altri miglioramenti di velocità della pagina
Nel tempo
- Controlla le nuove immagini prima di ogni caricamento. Le immagini non ottimizzate sfuggono facilmente quando si lavora in fretta
- Esegui un test di velocità dopo ogni gruppo consistente di nuove immagini pubblicate
- Rivedi le immagini più vecchie se il sito precede le pratiche di ottimizzazione attuali. Le librerie di immagini ereditate sono una fonte comune e trascurata di problemi di velocità
Per una guida su come testare le prestazioni dell'intero sito, leggi l'articolo su come testare la velocità del tuo sito web.
Come WEMASY gestisce l'ottimizzazione delle immagini
Il creatore di siti di WEMASY comprime e converte automaticamente le immagini quando vengono caricate. Le immagini vengono servite in formato WebP dove il browser lo supporta, con formati di ripiego per i dispositivi più vecchi. Al caricamento vengono generate più dimensioni, così i visitatori da smartphone ricevono file della misura giusta senza alcuna configurazione manuale.
Il lazy loading è applicato di default alle immagini below the fold in tutte le pagine create con WEMASY. Il testo alternativo si può aggiungere nell'editor di immagini della piattaforma. I punteggi di velocità della pagina, compreso l'LCP, sono visibili nella dashboard delle statistiche di WEMASY, con i problemi legati alle immagini segnalati per pagina insieme a raccomandazioni specifiche.
Scopri cosa è incluso nel creatore di siti WEMASY o guarda le opzioni dei piani nella pagina dei prezzi.
Domande frequenti
Cos'è l'ottimizzazione delle immagini per il web?
L'ottimizzazione delle immagini per il web è il processo di riduzione del peso di un'immagine mantenendo una qualità visiva accettabile per la visualizzazione sullo schermo. Comprende la scelta del formato giusto, la compressione a un livello di qualità adeguato, il ridimensionamento alle dimensioni reali di visualizzazione e l'uso di tecniche come il lazy loading e le immagini responsive, così i visitatori scaricano solo la versione del file di cui hanno bisogno il loro dispositivo e la loro connessione. Con il creatore di siti di WEMASY puoi impostare tutto questo direttamente sul tuo sito.
Qual è il formato migliore per le immagini di un sito web?
Il WebP è il formato migliore per la maggior parte delle immagini web. Offre una compressione molto migliore del JPEG a qualità visiva comparabile, supporta la trasparenza come il PNG ed è supportato da tutti i principali browser. Per le immagini che richiedono uno sfondo trasparente e una precisione al pixel, il PNG è la scelta giusta. L'AVIF offre una compressione ancora migliore del WebP ma ha un supporto dei browser più limitato e funziona meglio se usato con un formato di ripiego automatico.
Di quanto può ridurre il peso di un file la compressione delle immagini?
La compressione con perdita con un'impostazione di qualità da 75 a 85 riduce di solito il peso di un JPEG del 60-80 per cento senza differenze visibili di qualità per la maggior parte delle fotografie. Convertire da JPEG a WebP allo stesso livello di qualità riduce il peso di un altro 25-35 per cento. Una foto che parte da 4 MB può spesso scendere sotto i 150 KB con una combinazione di ridimensionamento corretto, conversione del formato e impostazioni di compressione.
L'ottimizzazione delle immagini influisce sulla SEO?
Sì. Le immagini non ottimizzate sono una delle cause più comuni di un punteggio lento di Largest Contentful Paint, che è un Core Web Vital usato come segnale di posizionamento dai motori di ricerca. Le pagine con immagini grandi e non compresse spesso ottengono punteggi LCP scarsi rispetto a pagine con lo stesso contenuto in forma ottimizzata. Inoltre, un testo alternativo descrittivo sulle immagini contribuisce alla visibilità nella ricerca di immagini e all'accessibilità generale della pagina.
Il lazy loading va usato su tutte le immagini?
No. Il lazy loading va applicato solo alle immagini che compaiono below the fold, cioè al contenuto non visibile quando la pagina si apre per la prima volta. Le immagini above the fold, compresa l'immagine principale o qualsiasi elemento visivo in evidenza vicino alla cima della pagina, devono caricarsi subito. Applicare il lazy loading alle immagini above the fold ritarda l'LCP, il che peggiora i punteggi dei Core Web Vitals e l'esperienza dei visitatori.
Quanto devono essere grandi le immagini di un sito?
Una tipica immagine web dovrebbe stare sotto i 200 KB. Le immagini principali e a tutta larghezza su desktop possono arrivare a 400 KB senza un impatto significativo sul tempo di caricamento, purché siano in formato WebP e ben compresse. Le immagini usate in schede, miniature e contenitori più piccoli devono essere dimensionate sulla loro larghezza reale di visualizzazione. Servire un'immagine da 1.920 pixel in un contenitore da 400 pixel spreca banda per ogni visitatore su ogni dispositivo.