Sulla maggior parte dei siti, le immagini sono l'elemento più pesante della pagina, spesso più grandi di HTML, CSS e JavaScript messi insieme. Se una pagina sembra lenta, le immagini sono il primo punto da controllare, e le soluzioni sono di solito rapide.
Tre tecniche fanno quasi tutto il lavoro: ridimensionare l'immagine alla dimensione con cui viene effettivamente mostrata, comprimerla e servirla in un formato moderno. Applicate insieme, riducono regolarmente il peso delle immagini del 70% o più.
Ridimensiona alla dimensione con cui la mostri davvero
Questo è l'errore più comune e più dispendioso. Una foto appena scattata potrebbe essere larga 6000 pixel, ma il tuo articolo la mostra in una colonna larga 800 pixel. Il browser scarica tutti i seimila pixel e poi ne butta via la maggior parte quando rimpicciolisce l'immagine per farla entrare.
Servire un'immagine da 6000 pixel in uno spazio da 800 pixel può significare scaricare cinque-dieci volte più dati del necessario. La soluzione è semplice: ridimensiona il file più o meno alla larghezza che occuperà, più un po' di margine per gli schermi ad alta densità.
Una regola pratica:
- Immagine hero a tutta larghezza: 1600–2000 px di larghezza sono abbondanti.
- Immagine nell'articolo: 1000–1400 px.
- Miniatura: 300–500 px.
Usa il Ridimensionatore di immagini per rimpicciolire ogni immagine prima ancora che raggiunga la pagina. Mantiene bloccato il rapporto d'aspetto, così nulla si deforma.
Comprimi per eliminare lo spreco
Una volta corrette le dimensioni, la compressione rimuove i dettagli che l'occhio non può vedere. Per le fotografie, una qualità intorno al 75–85% è il punto ideale: il file cala drasticamente mentre l'immagine appare identica. Per grafiche piatte e screenshot salvati in PNG, la riduzione del numero di colori (quantizzazione a 256 colori) può ridurre il file a una frazione della dimensione originale.
Il Compressore di immagini gestisce entrambi i casi. Ricodifica JPEG e WebP in base alla qualità, quantizza i PNG e garantisce di non produrre mai un file più grande di quello di partenza. Se hai un'intera galleria, elaborala in blocco e scarica uno ZIP.
Passa a un formato moderno
La sola scelta del formato può dimezzare un file. Ecco come si confrontano le opzioni comuni per le fotografie.
| Formato | Dimensione tipica rispetto a JPEG | Ideale per |
|---|---|---|
| JPEG | Riferimento | Ripiego universale; foto |
| WebP | ~25–35% più piccolo | Foto e grafiche; ampio supporto dei browser |
| AVIF | ~50% più piccolo | Foto dove conta la dimensione più piccola |
| PNG | Molto più grande per le foto | Loghi, icone, grafiche piatte, trasparenza |
WebP è la scelta predefinita sicura nel 2026: ogni browser attuale lo legge e batte comodamente il JPEG. AVIF va ancora più in piccolo ma richiede più tempo per codificare e ha un supporto leggermente più ristretto. Il Convertitore di immagini ti permette di puntare ad AVIF e ripiega discretamente su WebP quando AVIF non è la scelta giusta, così ottieni il miglior risultato disponibile senza tirare a indovinare.
Un'avvertenza: non usare PNG per le fotografie. Il PNG brilla per loghi, icone e tutto ciò che richiede trasparenza, ma per una foto può essere diverse volte più grande di un WebP della stessa qualità.
Metti tutto insieme
Una pipeline affidabile per qualsiasi immagine destinata al web:
- Ridimensiona alla larghezza di visualizzazione (più margine per gli schermi retina).
- Converti in WebP, o AVIF se vuoi il file più piccolo possibile.
- Comprimi al 75–85% di qualità per eliminare gli ultimi sprechi.
Fallo e una foto da fotocamera di 5 MB può diventare un WebP da 120 KB che appare identico in una colonna d'articolo. Moltiplica su un'intera pagina e la differenza nei tempi di caricamento è enorme.
Tutto gira nel tuo browser usando Canvas e WebAssembly, quindi nulla viene caricato e gli strumenti continuano a funzionare offline dopo la prima visita. Significa che puoi preparare una cartella di immagini per il tuo sito senza consegnarle a nessun server.
Oltre i file
Altre due abitudini aiutano, e non costano nulla:
- Carica in modo differito le immagini sotto la piega con
loading="lazy"così il browser le recupera solo quando il lettore si avvicina scorrendo. - Imposta gli attributi width e height così il layout non salta mentre le immagini caricano, cosa che aiuta anche il punteggio Core Web Vitals.
Vuoi sapere esattamente quali immagini stanno rallentando una pagina? La nostra guida SEO alle immagini copre l'analisi, e un controllo della velocità di pagina elencherà le risorse più pesanti così sai dove mirare per primo.