Utilizzare sfondi video sul tuo sito web può essere un buon modo per attirare l’attenzione iniziale dei visitatori. Il video è diventato sempre più popolare nel corso degli anni, così come la caratteristica di design dello sfondo e continuerà a crescere in quanto il supporto per video HTML5 in tutti i browser moderni sta diventando di default.

Una delle domande più frequenti che abbiamo visto online su come ottimizzare i video per il web design riguardavano 2 problemi comuni che potresti incontrare durante la creazione e l’implementazione di video di sfondo nei tuoi progetti.

1) Comprimere i video per il loro utilizzo sui siti web

Il primo si riferisce ai file spesso troppo grandi quando escono dall’editing o dalle applicazioni di creazione. Questo è un grosso problema, così come l’ampiezza di banda e una povera connessione internet possono causare molte pause video o stalli di caricamento prima che vengano caricati completamente.

Dunque, ciò che dovrebbe essere una funzione di design carina che migliora l’impressione generale di un sito, può trasformarsi in un fastidio per i visitatori se devono aspettare che tutti gli elementi si carichino e appaiano correttamente.

compress-web-design

I video grandi non solo rallentano i tempi di caricamento della pagina e forniscono un’esperienza utente negativa (soprattutto se si accede per la prima volta e non è stato ancora memorizzato nella cache), ma possono inoltre avere un impatto negativo sulla SEO del tuo sito dal momento in cui i rapidi tempi di caricamento delle pagine sono un fattore importante di cui Google e altri prendono in considerazione. Perciò, comprimere i video prima di utilizzarli su un sito web è la risposta.

2) Convertire i video per HTML5

Secondariamente, i video che ottieni dai colleghi o che crei in suite di modifica spesso possono essere in un formato che può causare problemi durante l’esecuzione, dal momento in cui molti browser (Chrome, Firefox, Edge, Opera, Internet Explorer, Safari, ecc.) sono in grado di riconoscerne qualcuno ma non altri formati video, codec video e (se presenti nel container) codec audio senza plugin aggiuntivi.

MP4 e WebM sono probabilmente i formati video più comuni per l’utilizzo sul web. A causa di eventuali problemi di permesso con MP4, è meglio convertire video in WebM (VP8) prima di utilizzarli sui siti web e eventualmente fornire un video MP4 (H264) come alternativa per i browser che non supportano WebM.

Questo è importante così come l’assicurarsi che i video vengano accettati da quanti più browser su quanti più telefoni, tablet, laptop e sistemi operativi possibili. Purtroppo, ad oggi, non esiste una sola combinazione di formato/codec video/codec audio per gestirli tutti quanti.

Ottimizzare i video per il web design

Come già accennato, l’unico modo per ottimizzare i video per il web design è ridurre la dimensione del file video, il che aiuterà drasticamente a migliorare i tempi di caricamento della pagina e le prestazioni di riproduzione.

Opzioni aggiuntive includono il ridurre la risoluzione e la qualità del video (livello di compressione e bitrate). Un altro fattore è quello di scegliere un formato video ampiamente riconosciuto.

Mentre di solito non consigliamo di ridurre troppo la risoluzione e il bitrate dei tuoi video, poiché questi due sono importanti per la qualità visibile di un video, ciò è meno preoccupante per i video di sfondo di un sito poiché che questi tipi di clip non sono spesso ciò su cui i visitatori si stanno concentrando.

Invece, i video HTML5 in loop vengono visualizzati dietro i starti trasparenti e/o dietro elementi di testo e sono un elemento di design di supporto che è necessario caricare e riprodurre rapidamente su qualsiasi dispositivo i visitatori utilizzano per accedere al tuo sito, indipendentemente dalla connessione internet a cui sono collegati.

Cosicché, i file di piccole dimensioni riducono la risoluzione, il bitrate e la qualità visibile in una certa misura.

Come potresti immaginare, se creare un piccolo file video di buona qualità è il tuo obiettivo, il nostro convertitore video online gratuito e il compressore video Clipchamp è un ottimo strumento per aiutarti.

È già famoso e diffuso tra i web designer, sviluppatori web, graphic designer e creatori WordPress, Wix e Squarespace. Inoltre è stata già raccomandata come applicazione utile da blogger di web design e da piattaforme di creazione di siti come Webflow soprattutto per comprimere i video di sfondo e for the purpose of compressing background videos e la cinemagrafia* per i siti.

 

compress-video-web-design

 

Clipchamp comprime e converte video localmente nel tuo browser prima che li carichi sul tuo server, provider di hosting o creatore di siti. Perciò, non è utile solo quando il video è caricato sul sito ma rende più rapido il caricamento iniziale.

Per il loro utilizzo nei siti, solitamente consigliamo di comprimere i video fino ad almeno 720p, utilizzando sia l’impostazione di qualità media o bassa presente su Clipchamp. Entrambe le opzioni di output Web Mobile sono possibili – l’impostazione predefinita Mobile produrra file di output più leggeri rispetto al Web in una qualità leggermente minore.

In sintesi, le migliori impostazioni per i video di sfondo sono sia Web, 720p, qualità media, MP4 o WebM Mobile, 720p, qualità media, MP4. In base al file di input e alla qualità e alla dimensione dei file video di output che Clipchamp produce nel tuo contesto, è meglio provare una combinazione di impostazioni diverse per ottenere un risultato soddisfacente.

 

HTML5-background-video

Capiamo bene che può essere accattivante utilizzare video di alta qualità di 1080p o più, ma lo sconsigliamo, considerando che il tempo in media che i visitatori spendono su un determinato sito ricopre meno di 15 secondi. Vorrai fare una buona prima impressione in quei pochi secondi cruciali e il nostro convertitore video online può aiutarti in questo.

 


*Cos’è la cinemagrafia? Dai un’occhiata a questo subreddit e ai suoi fantastici esempi.