Le immagini sono di solito la cosa più pesante su una pagina, il che le rende la più grande leva di velocità che controlli. Azzecca le loro dimensioni e il loro peso in file e le pagine sembrano istantanee. Sbaglia e fallisci i Core Web Vitals per quanto pulito sia il tuo codice. Ecco gli obiettivi e il flusso di lavoro per raggiungerli.
Obiettivi di dimensione
Abbina la dimensione in pixel dell'immagine al punto in cui appare davvero. Guida approssimativa:
- Hero a larghezza piena: 1600–2000 px di larghezza copre la maggior parte dei layout desktop. Andare più larghi raramente aiuta e costa molti byte.
- Foto nel contenuto: la larghezza della tua colonna di contenuto, comunemente 800–1200 px.
- Miniatura / immagine scheda: 300–500 px.
- Avatar / icona: 48–200 px alla dimensione a cui si mostra.
Servire un'immagine da 4000px in uno slot da 800px significa che il browser scarica e decodifica 25 volte i pixel che mostrerà mai. È puro spreco — e decodificare immagini grandi fa anche impuntare il thread principale.
Obiettivi di peso
Le dimensioni fissano il tetto; la compressione fissa il peso effettivo. Punta a:
- Immagine hero: sotto i 200 KB (idealmente 100–150 KB).
- Foto nel contenuto: 80–150 KB.
- Miniatura: 10–30 KB.
- Totale immagini per pagina: cerca di restare sotto ~1 MB per l'intera pagina.
Se una singola immagine supera i ~300 KB, trattala come un bug da investigare.
Perché questo guida i Core Web Vitals
Il Largest Contentful Paint (LCP) di Google misura quanto tempo passa prima che il più grande elemento sullo schermo si renderizzi — e sulla maggior parte delle pagine, quell'elemento più grande è un'immagine (di solito l'hero). Un hero pesante e sovradimensionato gonfia direttamente l'LCP. Un buon LCP è sotto i 2,5 secondi; un hero appesantito può superarlo da solo su connessioni mobili.
Altri due vantaggi legati alle immagini:
- Imposta gli attributi width e height così il browser riserva lo spazio — questo protegge il tuo punteggio Cumulative Layout Shift (CLS).
- Dai priorità all'hero (non fare lazy-load dell'immagine LCP) e fai lazy-load di tutto ciò che è sotto la piega.
Il flusso di lavoro in due passaggi
Passaggio 1 — ridimensiona alla larghezza reale di visualizzazione. Usa il Ridimensionatore di immagini per portare ogni immagine alla dimensione a cui appare. Blocco delle proporzioni attivo, riduzione ad alta qualità. Questo da solo spesso taglia il peso dell'80–90%.
Passaggio 2 — comprimi. Dai i file ridimensionati al Compressore di immagini: qualità 75–85 per le foto (visivamente senza perdite), quantizzazione a 256 colori per i PNG. Non produce mai un file più grande dell'originale, gestisce i blocchi e ha un tetto di larghezza opzionale così puoi effettivamente fare entrambi i passaggi in una volta. Per i browser moderni, convertire le foto in WebP spreme via un altro 25–35%.
Misuralo, non tirare a indovinare
Una volta ottimizzate le immagini, conferma che la pagina sia davvero diventata più veloce. Il Controllo Qualità Pagina di IMG.DIY analizza una URL live attraverso Google PageSpeed Insights e riporta il peso delle immagini della pagina così puoi individuare qualsiasi file ancora troppo pesante. Un'avvertenza: il Controllo Qualità Pagina ha bisogno di una connessione internet — a differenza degli strumenti per immagini, chiama l'API PageSpeed di Google, quindi non può funzionare offline. Usalo dopo il deploy per verificare il tuo LCP reale e il budget delle immagini.
Privato per impostazione predefinita
Gli strumenti di ridimensionamento, compressione e conversione girano interamente nel tuo browser con Canvas e WebAssembly — nulla viene caricato, e dopo la prima visita sono in cache e funzionano offline. Puoi preparare le immagini di un intero sito senza connessione, poi eseguire il Controllo Qualità Pagina online una volta che la pagina è live.
Riepilogo rapido: dimensiona correttamente, comprimi agli obiettivi di peso, dai priorità all'hero per l'LCP e verifica con il Controllo Qualità Pagina.