Come comprimere video per il web

Come ti sarà capitato di leggere, già dal 2016 Mark Zuckerberg annunciò che i video avrebbero preso il sopravvento rispetto alle immagini statiche e alle foto sul web.

Oggi più di allora è sempre più frequente imbattersi in contenuti multimediali come i video sul web, soprattutto grazie al mondo dei social. Tutti i giorni perdiamo minuti e minuti imbambolati davanti a video sul web perché hanno l’incredibile potere di attirare l’attenzione degli utenti. Per tutti coloro che creano contenuti non solo sui social, ma soprattutto sui siti web, diventa quindi un’abilità fondamentale sapersi districare tra i parametri di compressione di un video. L’impresa, per chi sa di cosa sto scrivendo, non sempre si rivela semplice!

Per questo motivo oggi prenditi 5 minuti e leggi quest’articolo su come comprimere e ottimizzare i video per il web: vedremo insieme quali sono gli strumenti con cui potrai tranquillamente ridurre le dimensioni di un file video, usare il formato adeguato e soprattutto il metodo corretto per implementarlo sulle tue pagine web.

Quando è necessario comprimere un video per il web

Cominciamo dal definire effettivamente quando dobbiamo ottimizzare un video per usarlo sul web e quando invece è un’operazione superflua.

In linea di massima sui social media come Facebook o Instagram non è necessario comprimere o ridurre le dimensioni di un video. Questo perché i due colossi sono dotati di un algoritmo di compressione, che elabora i video nel momento stesso in cui li carichiamo. Se ci fai caso, anche per le foto accade lo stesso!

Se invece disponi di un sito web di tua proprietà dovrai quanto meno scegliere come comportarti per l’integrazione di un video. Da quando i video sono stati implementati in HTML5 è diventato molto più semplice incorporare i file direttamente nelle pagine web. Tuttavia è sempre molto facile creare danni, ad esempio caricando file troppo pesanti per essere caricati da un utente con una connessione non strabiliante.

Come ben sai un video in Full HD può arrivare a pesare anche diversi Gigabyte e pur volendo mantenere la qualità al top, sarebbe impensabile caricare un file così avido di banda in una pagina web.

Video per siti web: le tipologie

Bene, come hai letto poco più in alto, abbiamo capito che la compressione di un video è importante soprattutto per chi ha un blog o un sito proprietario.

A proposito, se hai un sito realizzato con WordPress dai un’occhiata a 10 passi per ottimizzare il tuo sito wordpress!

Mi piace pensare che essenzialmente i video sui siti web si dividano in due grandi tipologie:

1. I video background, che fanno da sfondo alle nostre pagine con grandi hero sections, magari con un overlay colorato;
2. I video che servono da contenuto saliente per la pagina o l’articolo: quelli che ci aspettiamo i nostri utenti visionino in tutta comodità;

Video come background

I video che fanno da sfondo nelle sezioni dei siti mi hanno sempre fatto perdere una marea di tempo perché proprio quando ti sembra che sia tutto perfetto ti rendi conto che manca la compatibilità con un browser, sia esso mobile o desktop.

Sono diventato sempre più scettico nel loro uso, però diciamoci la verità: sono veramente belli e fanno sempre il loro effetto!

Quello che ha iniziato negli ultimi anni a rompere le scatole a noi poveri web designer è il famoso autoplay, che ad esempio su iPhone non è proprio contemplato (mi riferisco a Safari). Anche Google chrome da poco ha introdotto il blocco per i video che si riproducono automaticamente, senza l’interazione dell’utente con un pulsante play.

Non esiste ancora una soluzione univoca. Tuttavia molti designer si convincono a usare l’agognato video di sfondo e prevedere una fallback image, ovvero una foto di copertina che verrà visualizzata solo sui dispositivi che bloccheranno la riproduzione del video. Questo a mio avviso è un ottimo compromesso per rendere più usabile il sito e non creare brutti buchi neri.

La caratteristica fondamentale del video pensato per fungere da sfondo è quella di dover pesare il meno possibile, per essere caricato velocemente assieme al resto delle risorse della pagina. Quanti più MB riusciremo a rosicchiare a quel file, tanto più fluida sarà l’esperienza dei nostri utenti.

Se sei a digiuno di esperienza utente leggi il nostro articolo User Experience: a cosa serve e perché dovremmo curarla →

L’altra caratteristica è in genere la breve durata.  Visto e considerato che i video background vengono riprodotti in loop e fanno appunto da sfondo ad un altro contenuto (un paragrafo di testo o una Call To Action), sarebbe inutile utilizzare un video di 5 minuti. Basterà ritagliarne una porzione di 10 secondi! In questo modo il peso del file diminuirà drasticamente.

Una buona tecnica è costituita dal creare due varianti di un video: una da usare in buona qualità e l’altra compressa e ritagliata da usare come sfondo.

Video come contenuto principale

Quando il video è il focus della tua section, pagina o articolo allora conviene mantenerlo quanto più inalterato possibile. Dovrai ritagliargli un bello spazio nel body della tua pagina, mostrarne i controlli di riproduzione e magari creargli una bella copertina (o thumbnail) per renderlo ancor più accattivante.

Incorporare un video con un frame Youtube/Vimeo

Come accennavo all’inizio dell’articolo, ci sono più modi di integrare un video in una pagina web.

Il primo è quello di incorporarlo (nel gergo da nerd a volte si dice embeddarlo) tramite frame. Questo significa che il video sorgente non sarà ospitato sul nostro spazio web, bensì su una piattaforma esterna come Youtube o Vimeo ad esempio.

Non vi è nulla di più semplice: basta seguire questi semplici passaggi.

• Cliccare sul pulsante “Condividi”
• Selezionare “incorpora”
• Copiare il codice del frame
• Posizionarsi sul codice sorgente della pagina di destinazione e incollare.

• 

• 

• 

Frame video su wordpress

Possiedi un blog o un sito web costruito in WordPress? Beh, allora questo task sarà davvero di una facilità estrema!

Sarà sufficiente copiare l’URL finale del tuo video interessato, posizionarti sull’editor di testo Gutemberg, nella schermata di modifica dell’articolo o pagina che sia, e incollare.

Il tuo amato CMS trasformerà il blocchetto paragrafo in video e sarai pronto a pubblicare!

Incorporare un video come elemento HTML5

Per caricare il video direttamente sul tuo sito, invece dovrai innanzitutto effettuare l’upload del file trai media (tramite FTP o file explorer se disponi di un cPanel o Plesk). Successivamente dovrai ricavare il percorso del file stesso (o path), ad esempio: www.miosito.it/cartella-video/video1.mp4

Dovrai poi aprire un tag HTML5 che abbia come source il tuo file:

<video width="320" height="240" controls>
  <source src="https://www.miosito.it/cartella-video/video1.mp4 " type="video/mp4">
</video>

Per capire quali sono tutti gli attributi opzionali del tag video, ti consiglio di fare un salto sull’articolo dedicato di w3schools.

In linea di massima per offrire un’esperienza di navigazione piacevole è bene:

• Caricare il proprio video in più di un formato (es. mp4, ogg) per evitare problemi di compatibilità;
• Comprimere il video in modo da ottimizzare le risorse: è davvero necessario il 4K o potrà bastare il full HD?
• Lasciare i controlli del player a vista per dare il controllo all’utente sulla riproduzione;
• Evitare l’autoplay se non strettamente necessario ai fini marketing;
• Utilizzare questo metodo con criterio. I video sono avidi di spazio di archiviazione, perciò se ne caricherete molti nel tempo dovrete forse acquistare uno spazio hosting più ampio.
• Valutare sempre se non sia il caso di utilizzare Youtube, caricando il video come non in elenco.

Handbrake: comprimere video sorseggiando drink

Ma cerchiamo ora di capire come comprimere un video dal nostro computer, senza essere degli scienziati!

Io ho scelto di utilizzare da tempo Handbrake, a mio avviso uno strumento davvero ben realizzato e solido, disponibile sia per mondo Mac che per Windows e soprattutto completamente free.

Questo ha un’interfaccia piuttosto semplice e consente di ridurre drasticamente le dimensioni dei file video in pochi passaggi e in breve tempo.

Fondamentale quando il tuo videomaker ti passa tramite Wetransfer un bellissimo video in landscape della tua azienda o attività, ma ti rendi subito conto che il file pesa 150MB ?

Beh, non ci resta che guardare insieme i passaggi per ottenere un discreto risultato con il minore sforzo.

Handbrake: tutorial per comprimere un video

Se hai trovato quest’articolo su come comprimere un video per il web utile ma hai qualche dubbio a riguardo non esitare a contattarmi, scrivendo un commento qui sotto ? Sarò felice di aiutarti!