Compressione video

Ottimizzare i video HTML5 per il tuo sito

Clipchamp è un editor di video online gratuitoProva gratis
Condividi questo post

Ultimo aggiornamento: 15 ottobre 2019

I video online spopolano su Internet e sono diventati un elemento essenziale nella progettazione dei siti web. 

I video attirano l'attenzione e stimolano la fantasia, quindi non c'è da stupirsi se sono sempre più presenti nelle home page dei siti web. Ora quasi tutti i browser web supportano i video HTML5, per cui è arrivato il momento di aggiungere un video all'intestazione o allo sfondo della tua pagina.

Clipchamp offre dei template perfetti per il design del tuo sito web, come questo splendido cinemagraph:

Usa questo modello

Ci sono molte ragioni per aggiungere un video HTML5 al tuo sito, ma non farti prendere dalla fretta. Per far sì che sortiscano l'effetto desiderato, devi prima ottimizzare i tuoi video in modo da evitare alcuni dei problemi più comuni. Di seguito ti spieghiamo tutto ciò che c'è da sapere.

  1. Perché ottimizzare i video per il tuo sito

    • I siti web lenti spingono i clienti a cercare altrove

    • I formati video non sono tutti uguali

  2. Come ottimizzare i video con Clipchamp

    • Comprimi i video per l'HTML5

    • Converti i video per renderli compatibili con il browser

1. Perché ottimizzare i video per il tuo sito

I video HTML5 presentano qualche piccolo svantaggio: i contenuti video incorporati che si riproducono automaticamente possono rallentare il caricamento della pagina, causando una perdita di traffico enorme. Inoltre, un altro rischio è che i video non siano compatibili con i browser usati dai clienti.

I siti web lenti spingono i clienti a cercare altrove

Se il tuo video HTML5 è troppo grande, può rallentare la pagina in modo considerevole e influire negativamente sull'esperienza utente. I visitatori, infatti, potrebbero ritrovarsi a guardare un video che si interrompe di continuo mentre il sito tenta di caricarsi. 

Quella che doveva essere una funzionalità di progettazione utile a migliorare l'effetto complessivo di un sito web potrebbe trasformarsi in una seccatura se i visitatori devono attendere che tutti gli elementi vengano caricati e visualizzati correttamente.

Anche se la SEO e le fantastiche offerte del tuo sito attirano visite, un'esperienza utente scadente può spingere le persone a cercare altrove e peggiorare il posizionamento su Google. La tua visibilità tra i risultati di ricerca, infatti, dipende molto dai tempi di caricamento della pagina e dalla frequenza con cui gli utenti abbandonano il sito. Ecco perché è fondamentale comprimere i video presenti sulla pagina.

Se i contenuti video si trovano nel cloud, assicurati che il provider del servizio di hosting garantisca la massima operatività e tempi di caricamento rapidi. Questo ti consentirà di offrire un'esperienza video senza interruzioni ai visitatori del tuo sito web.

Provalo gratis

Usalo gratis per sempre o esegui l'upgrade per soli 9 $ al mese

I formati video non sono tutti uguali

È inutile aggiungere un video HTML5 spettacolare se poi non viene caricato dal browser degli utenti. I browser, infatti, non accettano tutti i formati video e onde evitare la spiacevole sorpresa di un video molto accattivante che però non si carica, è meglio convertire i file video in modo che siano visibili sul maggior numero di browser e dispositivi possibili. 

Purtroppo non esiste un formato che valga per tutti, ma puoi provare con WebM (VP8) o MP4 (H264), perché in genere vengono caricati su gran parte dei browser. 

In realtà, la cosa migliore da fare è convertire i contenuti video in WebM prima di usarli nella progettazione del sito web e averli a disposizione anche in MP4. In questo modo, nell'eventualità remota che WebM non sia supportato, potrai usare la versione in MP4.

2. Come ottimizzare i tuoi video con Clipchamp

Clipchamp Utilities ti consente di eseguire gratuitamente le due operazioni più importanti per ottimizzare i video da aggiungere al tuo sito, ovvero la compressione e la conversione del file.

Come già detto, queste due procedure contribuiranno a velocizzare notevolmente i tempi di caricamento delle pagine e a migliorare la riproduzione dei video. 

Di solito consigliamo di non ridurre troppo la risoluzione e il bitrate dei video per non peggiorarne la qualità, ma se i tuoi filmati devono essere riprodotti sullo sfondo del sito, potresti avere un po' più di spazio di manovra con queste impostazioni. Questi video, infatti, non sono l'elemento principale su cui attirare l'attenzione degli utenti, e l'uso sempre più massiccio di smartphone per la navigazione aumenta la probabilità che vengano visualizzati su schermi di dimensioni ridotte. 

In genere i video HTML5 vengono riprodotti in loop dietro a elementi testuali o layer trasparenti, per cui si devono caricare rapidamente su qualsiasi dispositivo, a prescindere dalla velocità della connessione internet. A tal fine, le dimensioni ridotte sono più importanti della risoluzione elevata. Il sito web di Clipchamp è un buon esempio di questo concetto. Ma vediamo subito come ottimizzare i tuoi video:

Comprimi i video per l'HTML5

Come avrai intuito, se l'obiettivo è creare un video di qualità elevata ma non ingombrante, gli strumenti gratuiti per convertire e comprimere video online di Clipchamp sono quello che fa per te.

Clipchamp è già molto popolare tra web designer, sviluppatori web, graphic designer e creativi che lavorano su WordPress, Wix e Squarespace. Inoltre, viene consigliato da blogger di web design e piattaforme per la creazione di siti web ad alto impatto visivo come Webflow per la sua utilità nel comprimere video di sfondo e cinemagraph per siti web.

Clipchamp comprime e converte i video localmente nel browser prima di caricarli sul server, nel provider di hosting o nel website builder, rivelandosi molto utile non solo dopo che il video è stato aggiunto al sito web, ma anche per velocizzare il caricamento iniziale.

In genere, suggeriamo di comprimere i video destinati ai siti web fino a una risoluzione di 720p, scegliendo l'opzione qualità media o bassa di Clipchamp. Sono disponibili opzioni di output sia per il web, sia per i dispositivi mobili. Selezionando il preset Mobile verranno creati file finali più piccoli e con una qualità leggermente inferiore rispetto ai video realizzati con il preset Web.

Converti i video per renderli compatibili con il browser

Con Clipchamp Utilities, puoi convertire facilmente il tuo video per aumentarne la compatibilità con il browser. Ti basterà caricare il video, scegliere il formato desiderato andando su Personalizza impostazioni e lasciar fare al convertitore gratuito di Clipchamp.

Se vuoi aggiungere un MP4 di backup per il sito, ripeti la procedura scegliendo questo formato.

Inizia a creare video con Clipchamp Create gratuitamente.