Come comprimere video per il web

Perché comprimere video per il web?

Il video grezzo appena uscito da una fotocamera, da un telefono o da un registratore dello schermo è pensato per il montaggio, non per il web. Una singola clip può pesare decine o centinaia di megabyte — molto più di quanto una pagina dovrebbe mai trasmettere. Ognuno di quei byte deve raggiungere il visitatore prima che il video possa partire, e su rete mobile è sia lento sia costoso.

Il video pesante è uno dei maggiori freni ai Core Web Vitals. Un file sovradimensionato nella parte alta della pagina peggiora il Largest Contentful Paint, e un player che si ridimensiona mentre carica danneggia il Cumulative Layout Shift — entrambi sono segnali di ranking che Google misura sui visitatori reali. Comprimere il file, impostare dimensioni esplicite e differire i video fuori schermo mantiene quei punteggi in verde.

Comprimere significa semplicemente ricodificare il video con un codec moderno a una qualità e a una risoluzione sensate per la riproduzione a schermo. Fatto bene, riduce il file del 70-95% pur apparendo quasi identico alla dimensione con cui compare davvero sulla pagina — la differenza tra un video che appare all'istante e uno che gira a vuoto.

Scegli il codec giusto

Il codec è l'algoritmo che comprime i pixel, e conta più di ogni altra impostazione. Tutti e tre i codec web moderni producono file molto più piccoli di una registrazione intatta; bilanciano la compatibilità con l'efficienza. Il contenitore — MP4 o WebM — è solo l'involucro attorno al codec.

La scelta sicura predefinita è H.264 in un MP4: si riproduce su ogni browser, telefono e Smart TV degli ultimi quindici anni. Per un sito moderno puoi distribuire un file VP9 o AV1 più piccolo e indicare l'MP4 H.264 come fallback, così i browser capaci scaricano il file piccolo e tutto il resto si riproduce comunque.

H.264 (MP4)

La base universale. Il più grande dei tre a pari qualità, ma si riproduce assolutamente ovunque — il formato da tenere come sorgente di fallback.

VP9 (WebM)

Il codec aperto di Google, circa il 30-50% più piccolo di H.264 a qualità simile. Si riproduce su Chrome, Firefox, Edge e Android; abbinalo a un fallback MP4 per i vecchi Safari.

AV1 (MP4 o WebM)

Il più nuovo e il più efficiente — di nuovo più piccolo di VP9 — a costo di una codifica più lenta e del supporto solo nei browser recenti. Meglio abbinarlo a un fallback H.264.

Bitrate, risoluzione e frame rate

Dopo il codec, tre impostazioni decidono la dimensione finale. La risoluzione è la leva più grande: se una clip viene mostrata larga 800 pixel, codificarla in 4K spreca un'enorme quantità di banda su dettagli che nessuno vede. Limita la risoluzione a come il video viene effettivamente mostrato — 1080p o 720p copre quasi ogni uso web, e i loop di sfondo possono scendere ancora più in basso.

Il bitrate — quanti bit al secondo il codec può spendere — è ciò che la codifica basata sulla qualità imposta al posto tuo. Invece di indovinare un numero, scegli un obiettivo di qualità e lascia che il codificatore assegni i bit dove l'immagine ne ha bisogno; così mantiene il dettaglio nelle scene complesse senza appesantire quelle semplici. Abbassa la qualità di un livello per gli sfondi, alzala per le riprese dettagliate che vuoi nitide.

Il frame rate è l'ultimo taglio. La maggior parte dei video web appare perfettamente fluida a 30fps, e le clip cinematografiche a 24fps; dimezzare una registrazione a 60fps dimezza all'incirca i dati di movimento. Eliminare la traccia audio — indispensabile per gli sfondi in riproduzione automatica, che devono essere silenziati — fa risparmiare ancora di più. I preset di TinyVid racchiudono queste scelte: Player standard per una qualità bilanciata, Compressione massima per il file più piccolo, Sfondo hero per una clip silenziata e in loop.

Incorpora il video compresso

Un file compresso rende davvero solo se lo incorpori bene. Mettilo in un semplice tag video con width e height espliciti così il browser riserva lo spazio e la pagina non salta mentre carica, e aggiungi un'immagine poster così c'è qualcosa a schermo prima che arrivi il primo fotogramma.

Imposta preload su metadata così il browser recupera le dimensioni ma non l'intera clip finché qualcuno non preme play, e indica più di una source — prima il WebM o l'AV1 piccolo, l'MP4 H.264 per ultimo — così ogni browser scarica il miglior file che sa decodificare. Per uno sfondo decorativo, silenzia la clip e aggiungi autoplay, loop e playsinline, dato che i browser bloccano la riproduzione automatica per tutto ciò che ha audio.

Per il markup completo di ogni schema — un player standard, un loop di sfondo silenziato e una clip a caricamento differito — consulta la guida al codice embed video HTML.