Sæt videoer på slankekur med HandBrake video transcoder

Når vi bygger websites, har vi ofte behov for at konvertere en .mov, .mpeg eller en .avi fil til en .mp4 fil som vi kan anvende direkte i HTML5. Og selv hvis originalen allerede er en .mp4 fil, kan det som regel betale sig at undersøge om filen kan komprimeres yderligere. Mindre filer betyder hurtigere sider, en bedre oplevelse for mobil-brugere, bedre placeringer på Google og et mindre klimaaftryk.

HandBrake som findes til Windows, MacOS og Linux, konverterer alt hvad vi smider efter den til H.264/H.265 eller WebM. Der er indbyggede profiler der gør det nemt at komme i gang med at konvertere til specifikke platforme, nyttige filtre som fx deinterlace og man sætte flere filer i kø på en gang.

Optimal komprimering kan reducere fil-størrelsen betragteligt

Herunder ser du eksempler på en 29 sekunder lang screencast. En original version eksporteret fra Screencastify til Crome, samt en version der er komprimeret med HandBrake. I videoen demonstrerer vi hvordan den indbyggede talesyntese i Windows virker i Microsoft Edge. Vi skal beklage lydkvaliteten – stemmen “Microsoft Helle” lyder altså ikke altid helt appelsinfri 😉

Pointen er at billede og lyd er tæt på at være ens i henholdsvis originalen og i den komprimerede udgave. Men vurdér selv:

Bitrate og filstørrelse følges ad

Bitrate og endelig filstørrelse hænger tæt sammen. De 420 kbps, altså kilo-bits per sekund, kan ganges op i videoens længde, og så får vi et antal kilobit i resultat, som vi for nemheds skyld angiver i megabytes. Ergo – reducerer vi videoens bitrate til ⅓, fylder den komprimerede video ca. ⅓ af originalen.

En bedre brugeroplevelse, bedre SEO og et grønnere Internet

Jamen det er jo hele tre ting på én gang?! Ikke desto mindre er det hvad man opnår ved at optimere medierne på hjemmesiden, og det gælder i særdeleshed video, som er noget af det tungeste indhold vi kan servere.

Lettere filer loader hurtigere hos brugeren og spiser mindre af mobil-brugerens datapakke. Hurtigere sider ranker bedre på søgemaskiner, især for mobilbrugere – det er ikke længere nogen nyhed.

Dataoverførsler er ikke gratis. Der er mange af dem og de bruger alle strøm. Når vi reducerer filstørrelsen med 66% anvendes der tilsvarende mindre energi under dataoverførslen.

Anvendte HandBrake-indstillinger til screencast

Kort fortalt anvender vi her en MP4 container med H.264 encoder, ingen skalering eller filtre, H.264 encoder tunet til Still Image i en lav bitrate på 360 kbps og 2-Pass-encoding. Audio mixes til mono.

Det er for tidligt med H.265 og WebM

Disse formater komprimerer potentielt endnu bedre end H.264. Problemerne er pt., at H.265 kun virker i Safari, og WebM virker ikke i ældre udgaver af Safari. Apple tillader reelt ikke andre “browser rendering engines” end Apples egen, dvs. har brugeren en ældre iPad eller iPhone, kan de ikke bare installere Chrome eller Firefox. En god tommelfingerregel er, skal videoen være tilgængelig for de fleste, er en MP4 container med H.264 encoding det fornuftige valg.

En undtagelse er måske WebM i stedet for en GIF-animationer

Der er dog potentielt en undtagelse. Animerede GIF’er bruges ofte til at understøtte en skrevet pointe. Her kan man måske slippe afsted med et stillbillede til de få besøgende som ikke har mulighed for at opdatere deres Safari-browser. I HTML5 video-elementet angiver man et poster image som vises i stedet for videoen i de versioner af Safari der ikke understøtter WebM.

WebM er markant lettere end GIF

Klippet herover er fundet på giphy.com. Ved at konvertere det til WebM med HandBrake bliver det meget mindre. Fordelene er så mange, at de opvejer den ulempe, at ældre Safari-brugere ikke kan se animationen. Disse brugere får i stedet et stillbillede med det samme budskab: “Skidegodt, Egon”.

Lad os bygge bæredygtige hjemmesider

Bæredygtig webudvikling handler om mere end at slanke siderne. Det er også vigtigt bevidst at overveje om en video eller et billede overhovedet er nødvendigt. Kan den samme information måske leveres som tekst eller en vektorbaseret grafik?

Kontakt os hvis I kan bruge hjælp til at finde de helt rigtige indstillinger til jeres videoer.