Articolo

Ottimizzare i media di un sito per velocità e Core Web Vitals

Le immagini rappresentano in genere circa il 40% del peso totale di una pagina web, più di qualsiasi altro tipo di risorsa, e i video ne aggiungono molto di più nelle pagine ricche di contenuti multimediali. Curarli al meglio è la cosa con la maggiore leva che puoi fare per la velocità di caricamento, i punteggi Core Web Vitals e il posizionamento nei motori di ricerca. La buona notizia: niente di tutto questo richiede software specializzato o un server, e i tuoi file non devono mai lasciare il dispositivo.

Scritto da Bastien Sulyan · Pubblicato il 16 giugno 2026

Scegli il formato giusto prima di ogni altra cosa

La scelta del formato conta più di qualsiasi cursore di qualità. Per le fotografie su una pagina web, il WebP è l'opzione predefinita giusta: è dal 25 al 35 percento più piccolo del JPEG a parità di qualità visiva e ogni browser moderno lo supporta. L'AVIF comprime ancora di più, fino al 50 percento meglio del JPEG, al costo di una codifica più lenta. Usa l'AVIF per le immagini hero e le foto di prodotto che comprimi una sola volta; usa il WebP per tutto ciò che elabori in blocco o ti serve in fretta. Il PNG ha senso solo dove ti serve precisione senza perdite o uno sfondo trasparente. L'SVG è l'unica scelta sensata per loghi, icone e illustrazioni: si adatta a qualsiasi dimensione e spesso pesa pochi kilobyte contro le centinaia di un equivalente rasterizzato.

Comprimere le immagini senza perdita di qualità visibile

Comincia ridimensionando alle dimensioni effettive di visualizzazione: un'immagine hero che appare larga 1280 pixel non ha bisogno di 4000 pixel di dati. Ridimensiona prima, poi comprimi. Per le fotografie, la qualità 80 in WebP o JPEG è il limite pratico sotto il quale gli osservatori comuni iniziano a notare la differenza, quindi punta tra 75 e 85 e guarda l'output allo zoom pieno prima di pubblicare. Per la grafica con testo e aree piatte, il PNG senza perdite o l'SVG preservano la nitidezza che i formati con perdite sfocano. Il compressore di immagini di questo sito gestisce tutti questi formati, gira interamente nel tuo browser e applica gli stessi algoritmi degli strumenti desktop dedicati.

Convertire un video per il web senza caricarlo

I loop di sfondo e il video incorporato sono spesso il punto debole dell'ottimizzazione dei media web. Un MP4 con H.264 si riproduce ovunque, e il WebM è l'alternativa libera da royalty supportata da ogni browser moderno. Il convertitore video di questo sito codifica il WebM in VP8, che si colloca nella stessa classe di compressione di H.264: il solo cambio di contenitore non riduce quindi la dimensione del file, il vantaggio reale è una catena interamente royalty-free e il supporto nativo del canale alfa. L'approccio pratico è convertire una volta in WebM, servirlo come sorgente preferita in un elemento video e tenere il MP4 come ripiego per i browser più datati. La conversione gira dentro il tuo browser tramite FFmpeg compilato in WebAssembly: nulla viene caricato, e i file fino a 500 MB si convertono senza coda. Per il video di sfondo inline, valuta anche il taglierino video per eliminare i secondi morti prima della codifica: la durata è il principale fattore della dimensione del file.

Asset inline: base64 e SVG

Immagini molto piccole, icone e favicon incorporati direttamente in HTML o CSS come stringhe base64 eliminano un viaggio di andata e ritorno in rete per ogni asset. Ha senso per gli asset sotto i 2 KB circa che compaiono su ogni pagina, come uno sprite del logo o un indicatore di caricamento. Gli asset più grandi dovrebbero restare file separati, perché il base64 codifica il 33 percento più pesante del binario, e i browser memorizzano in cache i riferimenti ai file ma non i dati inline in modo indipendente. L'ottimizzatore SVG rimuove gli scarti dell'editor dagli SVG esportati senza toccare la resa visiva. Il convertitore da immagine a base64 genera nel tuo browser l'URI data pronto da incollare.

Compromesso tra un file separato in cache che richiede una richiesta HTTP in più e un asset inline Base64 circa il 33% più pesante e reinviato a ogni pagina

Servire la dimensione giusta e caricarla per prima

Due aspetti della distribuzione contano quanto i file stessi. Il primo è il ridimensionamento adattivo. Con un elenco srcset di descrittori di larghezza (image-400.webp 400w, image-800.webp 800w e così via) il browser sceglie il file più piccolo che copre ancora lo schermo, moltiplicando la larghezza CSS per il rapporto pixel del dispositivo (device pixel ratio) prima di richiedere qualsiasi cosa. Un telefono con un layout largo 390px e uno schermo 3x ha bisogno di circa 1170 pixel, quindi scarica la versione 1200w e salta l'originale per desktop. Il secondo aspetto è la priorità. I browser eseguono un preload scanner che legge in anticipo e avvia il download delle immagini prima che il parser principale le raggiunga; aggiungere fetchpriority="high" alla tua immagine più grande above-the-fold (visibile senza scorrimento) indica al browser di scaricarla per prima, il che di solito determina il tuo Largest Contentful Paint.

Barre che confrontano un originale fotocamera da 4000 pixel, la dimensione di 1200 pixel usata dal layout e una miniatura da 480 pixel, a dimostrare che il ridimensionamento fa risparmiare più della qualità

Strumenti citati in questo articolo

Domande frequenti

La compressione delle immagini influisce sul mio posizionamento nei motori di ricerca?

Google usa i Core Web Vitals come segnale di posizionamento, e il Largest Contentful Paint è quasi sempre un'immagine o un poster video. Una pagina la cui immagine hero si carica in meno di un secondo ottiene un punteggio migliore di una in cui ci vogliono tre secondi. La compressione e il formato giusto influiscono direttamente su questa metrica, quindi sì, l'ottimizzazione delle immagini ha un impatto SEO misurabile. L'effetto è più forte su mobile, dove le connessioni sono più lente e la penalità per le immagini pesanti è maggiore.

Perché elaborare i media in locale invece di usare un servizio web?

La maggior parte degli strumenti media online richiede di caricare i tuoi file su un server remoto, il che richiede tempo, consuma banda e significa che una copia del tuo file esiste su un'infrastruttura che non controlli. Gli strumenti di questo sito girano interamente nel tuo browser: le tue immagini e i tuoi video vengono elaborati sul dispositivo e l'output viene scaricato direttamente. Non c'è account, non c'è attesa di upload, e nulla dei tuoi file viene mai inviato a un server.