Come comprimere le immagini per un sito web

Secondo il Web Almanac 2025 di HTTP Archive, la home page mediana pesava 2,56 MB su mobile, e 911 KB erano immagini. Su desktop, la pagina mediana conteneva 1.058 KB di immagini. Le immagini sono anche ciò che i visitatori aspettano: l’elemento più grande sullo schermo durante il caricamento della pagina, il Largest Contentful Paint (LCP), era un’immagine nel 76% delle pagine mobile.

Le immagini più leggere si caricano prima con le connessioni lente, consumano meno dati mobili ai tuoi visitatori e ti costano meno banda. L’LCP è uno dei Core Web Vitals (Segnali web essenziali), le misurazioni con cui Google valuta l’esperienza sulla pagina, quindi immagini pesanti possono costare più di qualche secondo di pazienza.

La compressione non può salvare un’immagine molto più grande dello spazio che occupa. Una foto da fotocamera larga 4000 pixel, mostrata in una colonna da 800 pixel, contiene 25 volte più pixel di quanti la pagina ne possa usare. web.dev fa notare che inviare ai telefoni immagini pensate per il desktop può consumare 2–4 volte più dati del necessario.

• Banner a tutta larghezza: circa 1600–2000 pixel di larghezza bastano per la maggior parte dei layout.
• Immagini nella colonna di un articolo: circa il doppio della larghezza della colonna, così restano nitide sugli schermi ad alta densità (per esempio 1400 pixel per una colonna da 700 pixel).
• Miniature e avatar: il doppio delle dimensioni in cui vengono mostrati, spesso 200–400 pixel.

Il formato determina con quanta efficienza un’immagine può essere memorizzata. In breve: le foto vanno bene in JPG o WebP; loghi, screenshot e tutto ciò che ha parti trasparenti vanno bene in PNG o WebP. Il nostro confronto tra JPG, PNG e WebP spiega quando conviene ciascuno.

Circa il 97% dei browser in uso visualizza il WebP, che spesso è sensibilmente più leggero. Per provarlo, converti con JPG in WebP o PNG in WebP e confronta il risultato con l’originale: un file convertito non è sempre più piccolo, soprattutto con le grafiche semplici.

La compressione elimina dati che l’occhio difficilmente noterà. Nel compressore di immagini Bitinz puoi trascinare un gruppo di file JPG, PNG o WebP e scegliere uno dei tre livelli:

• Veloce: la velocità prima di tutto, per grandi quantità di file.
• Bilanciato: il livello predefinito, adatto alla maggior parte delle immagini di un sito web.
• Massimo: richiede un po’ più di tempo per ottenere file più piccoli; vale la pena per le immagini presenti in ogni pagina, come banner e sfondi.

Se mantieni il formato, Bitinz non ti restituisce mai un file più grande di quello che hai caricato. Confronta il risultato con l’originale a grandezza reale, soprattutto per le immagini con testo sottile o sfumature morbide, poi scarica quelle che ti convincono.

Un’immagine ben compressa può comunque rallentare la pagina se si carica nel momento sbagliato o nelle dimensioni sbagliate. Pochi attributi HTML fanno quasi tutto il lavoro:

• Imposta width e height su ogni immagine, così il browser può riservare lo spazio e il layout non salta durante il caricamento.
• Aggiungi loading="lazy" alle immagini più in basso nella pagina, così si caricano solo quando il visitatore scorre fin lì.
• Non usare mai il caricamento lazy per l’immagine principale in cima alla pagina. Per quell’immagine web.dev consiglia invece fetchpriority="high", su non più di una o due immagini.
• Usa srcset e sizes per offrire alcune larghezze della stessa immagine, così i telefoni scaricano un file più piccolo rispetto agli schermi grandi.
• Servi le immagini con una durata della cache lunga, tramite una CDN se ne hai una, così chi torna sul sito non deve scaricarle di nuovo.

Analizza la pagina con PageSpeed Insights o con il pannello Lighthouse di Chrome. Da Lighthouse 13, i controlli sulle immagini sono raggruppati in un unico insight, “Improve image delivery”, che elenca le immagini che potrebbero essere compresse di più, servite in un formato moderno o rimpicciolite. Le immagini che farebbero risparmiare meno di 4 KiB non vengono elencate, quindi una lista corta è un buon segno.

Poi guarda la pagina con i tuoi occhi su un telefono. Bordi netti, testo all’interno delle immagini e toni della pelle sono i punti in cui i problemi di compressione si notano per primi.

Se il tuo sito aggiunge immagini ogni giorno, per esempio tramite un sistema di gestione dei contenuti o un negozio online, comprimile durante il caricamento o la pubblicazione invece che a mano. L’API per sviluppatori di Bitinz riceve un’immagine via HTTP e restituisce un link al file compresso, quindi può essere eseguita da uno script o da una pipeline di build. Ogni account ha una quota mensile gratuita.

1. 01Ridimensiona ogni immagine a circa il doppio delle dimensioni in cui viene mostrata.
2. 02Usa JPG o WebP per le foto, e PNG o WebP per le grafiche e la trasparenza.
3. 03Comprimi al livello Bilanciato e prova Massimo per le immagini più grandi.
4. 04Confronta il risultato con l’originale prima di sostituirlo.
5. 05Imposta larghezza e altezza, usa il caricamento lazy per le immagini sotto la piega e mai per l’immagine principale.
6. 06Ricontrolla la pagina in PageSpeed Insights.

Devi caricare immagini altrove, non sul tuo sito? Ogni piattaforma ha le sue regole: consulta i requisiti di dimensione delle immagini per email e negozi online.