Perché ottimizzare le immagini migliora un sito web
Le immagini in genere rappresentano una parte significativa dei dati scaricati da una pagina. Un file di grandi dimensioni ritarda la visualizzazione dei contenuti, consuma più dati mobili e può peggiorare l'esperienza del visitatore. L'ottimizzazione combina tre decisioni: dimensioni, formato e livello di compressione.
Non esiste un confine perfetto per tutte le immagini. Una miniatura dovrebbe pesare molto meno di una foto che occupa l'intero schermo. L'obiettivo è fornire pixel e qualità sufficienti per lo spazio reale, senza forzare il browser a scaricare informazioni che non utilizzerà.
Flusso passo passo consigliato
- Identifica la larghezza massima alla quale l'immagine apparirà nel layout.
- Ritaglia la cornice prima di comprimerla per evitare di preservare aree che verranno eliminate.
- Scegli il formato in base al contenuto e all'esigenza di trasparenza.
- Aprire il file nel formato compressore di immagini e provare una qualità medio-alta.
- Confronta il peso ed esamina testo, bordi, facce e gradienti.
- Pubblica il risultato e controlla la pagina su mobile e desktop.
Dimensioni: evitare di caricare più pixel del necessario
Se una scheda visualizza un'immagine con una larghezza di 600 pixel, caricare una foto da 5000 pixel è solitamente uno spreco. Il browser lo ridurrà visivamente, ma prima dovrà scaricare l'intero file. Preparare una versione prossima alla dimensione massima richiesta dal progetto.
Per gli schermi ad alta densità potrebbe essere utile fornire una versione di circa il doppio delle dimensioni, ma idealmente il sito dovrebbe utilizzare immagini reattive con srcset y taglie. In questo modo ogni dispositivo scarica una variante appropriata invece dello stesso file gigante.
Quale formato scegliere
- JPG: buona compatibilità e dimensioni ragionevoli per foto non trasparenti.
- WebP: utile per foto e grafica web; può preservare la trasparenza e offrire file compatti.
- PNG: adatto per trasparenza, screenshot con testo chiaro e grafica semplice; Può pesare molto nelle fotografie.
- SVG: ideale per loghi e icone vettoriali quando il file è sicuro e il disegno è stato creato come vettoriale.
La conversione dal formato non garantisce un file più piccolo. Confronta sempre il risultato e mantieni il formato originale quando è l'opzione più efficiente. Consulta il confronto tra JPG, PNG e WebP se non sai quale scegliere.
Come scegliere la qualità di compressione
Inizia con un'impostazione incentrata sull'aspetto e procedi gradualmente. Le foto tollerano meglio la compressione rispetto agli screenshot dell'interfaccia, ai diagrammi e al testo di piccole dimensioni. Se compaiono aloni, blocchi o bordi sfocati, aumenta la qualità o prova un altro formato.
Valuta il file all'interno della pagina, non solo in una visualizzazione espansa. Una piccola differenza visibile al 300% potrebbe non essere evidente a dimensioni normali; Tuttavia, la grafia illeggibile su una carta è un vero problema.
La compressione non sostituisce una buona implementazione
Oltre a ottimizzare il file, riserva spazio con attributi larghezza y altezza per evitare salti di contenuto. Utilizza il caricamento lento sulle immagini che si trovano all'esterno del primo blocco visibile, ma non ritardare l'immagine principale se è necessario per comprendere la pagina.
È anche una buona idea definire una lunga cache per i file con nomi di versione ed evitare di caricare la stessa immagine in più risoluzioni utilizzando CSS. Queste decisioni richiedono modifiche al sito, ma integrano i risparmi ottenuti durante la compressione.
Errori comuni
Comprimi prima di decidere la dimensione
Il ridimensionamento successivo impone l'elaborazione del file due volte e può accumulare perdite. Decidere prima l'inquadratura e le dimensioni; comprimere alla fine.
Converti screenshot in JPG con bassa qualità
Lettere e linee sottili possono causare sbavature. Prova PNG o WebP con una qualità superiore e confronta il peso.
Utilizza una piccola immagine come intestazione
L'espansione non recupera i dettagli. Inizia da una fonte sufficientemente grande e genera varianti più piccole da quella versione.
Domande frequenti
Quanto dovrebbe pesare un'immagine web?
Dipende dalle sue dimensioni, importanza e complessità. Utilizzare come criterio il peso più basso che mantenga una qualità accettabile nella sua dimensione finale, invece di perseguire una cifra universale.
Devo convertire tutte le immagini in WebP?
Non necessariamente. WebP è utile, ma un semplice PNG o un file già ottimizzato potrebbero non migliorare. Converti un campione, misura e conserva gli originali.
La sola compressione delle immagini migliora il posizionamento?
Aiuta con l'esperienza e le prestazioni, ma il posizionamento dipende anche da contenuti utili, scansione, collegamenti, intento di ricerca e molti altri segnali. La compressione è una parte di un sito Web ben preparato.
Preparare un'immagine più chiara
Regola la qualità o imposta una dimensione target, confronta il risultato e scarica la versione che meglio si adatta alla tua pagina.
Comprimi l'immagine per il web