Le immagini grandi sono la causa numero uno delle pagine che caricano lentamente. La soluzione è quasi sempre in due passaggi: dai all'immagine le dimensioni giuste, poi comprimi ciò che resta. Fai entrambi e una foto da 4 MB diventa una foto da 150 KB che appare identica sullo schermo.
Mettiamoci sopra dei numeri reali.
Dimensioni target a cui puntare
Non devi tirare a indovinare. Ecco budget di peso pratici che mantengono le pagine veloci:
- Hero / banner a tutta larghezza: sotto i 200 KB, idealmente ~100–150 KB.
- Foto nell'articolo: 80–150 KB ciascuna.
- Miniatura / avatar: 10–30 KB.
- Logo o icona (PNG/SVG): sotto i 30 KB; spesso molto meno.
E le dimensioni:
- Hero a tutta larghezza: 1600–2000 px di larghezza sono abbondanti per la maggior parte dei layout (raddoppia solo se punti al Retina e puoi permetterti i byte).
- Foto in colonna: abbina la larghezza del tuo contenuto — spesso 800–1200 px.
- Miniatura: la dimensione a cui viene effettivamente mostrata, ad esempio 300–400 px.
Se una singola immagine su una pagina supera i ~300 KB, di solito è un errore che vale la pena correggere.
Passaggio 1: ridimensiona alla larghezza reale di visualizzazione
È il passaggio che le persone saltano, ed è la leva più grande. Una foto appena scattata da un telefono è spesso larga oltre 4000 pixel. Se viene mostrata in una colonna da 800 pixel, stai spedendo 25 volte più pixel di quanti lo schermo ne mostri — e il numero di pixel determina la dimensione del file più di ogni altra cosa.
Usa il Ridimensionatore di immagini per portare l'immagine alla larghezza a cui appare davvero. Ridimensiona per pixel o percentuale, tieni bloccato il rapporto d'aspetto e lascia che il rimpicciolitore di alta qualità mantenga puliti i bordi.
Il solo dimensionamento corretto spesso taglia la dimensione del file dell'80–90% prima ancora di aver compresso un singolo byte.
Passaggio 2: comprimi ciò che resta
Ora rimpicciolisci i dati dentro quelle dimensioni corrette.
- Foto (JPG/WebP): imposta il cursore della qualità su 75–85. È visivamente senza perdita per la maggior parte delle immagini tagliando molto la dimensione.
- PNG (screenshot, grafiche): il Compressore di immagini li riduce a una palette di 256 colori, in genere facendo risparmiare il 60–80% senza cambiamenti visibili e mantenendo la trasparenza.
Il compressore limita anche l'output alla dimensione originale — non restituisce mai qualcosa di più grande — e ha un limite di larghezza opzionale, così puoi fare entrambi i passaggi in un solo passaggio: imposta il limite sulla tua larghezza target e comprimi in una volta. Elabora in blocco un'intera cartella e scaricala come ZIP.
Scegli il formato giusto già che ci sei
Se le tue immagini verranno servite a browser moderni, convertire le foto in WebP in genere batte il JPEG di un altro 25–35% a parità di qualità. Le grafiche piatte restano PNG (o WebP). Non salvare le fotografie come PNG — è il classico errore di gonfiaggio, facilmente una penalità di 5–10×.
Un flusso di lavoro realistico
Per un articolo di blog con cinque foto:
- Ridimensiona ciascuna alla larghezza della tua colonna (diciamo 1200 px).
- Comprimi a qualità 80, o converti in WebP.
- Conferma che ciascuna resti sotto i ~150 KB.
- Controlla un ritaglio al 100% di un'immagine per essere sicuro che la qualità abbia tenuto.
Cinque foto che partivano da 20 MB in totale atterreranno intorno ai 600 KB — una pagina che carica in un batter d'occhio invece di uno stallo.
Privato e offline
Tutto quanto sopra gira interamente nel tuo browser usando Canvas e WebAssembly. Nessuna immagine viene caricata su un server, e dopo la prima visita gli strumenti sono in cache e funzionano offline. Puoi ottimizzare le immagini di un intero articolo senza alcuna connessione e con nulla che lasci la tua macchina.