Videokomprimering

Så här optimerar du HTML5-videor för din webbplats

Clipchamp är en kostnadsfri videoredigerare onlineProva utan kostnad
Dela inlägget

Senast uppdaterad: den 15 oktober 2019

Onlinevideo fortsätter att dominera på internet och har nu blivit ett vanligt inslag på webbplatser. 

Videor drar till sig uppmärksamhet och stimulerar fantasin, så det är inte konstigt att de finns inbäddade i så många hemsidor. Nästan alla webbläsare har nu stöd för HTML5-video, så det här är absolut rätt tillfälle att lägga till en bakgrunds- eller rubrikvideo till din webbplats.

Clipchamp har jättebra mallar som skulle kunna passa perfekt för din webbplats, till exempel den här snygga filmsekvensen:

Använd den här mallen

Det finns många skäl till att du bör lägga till HTML5-video till din webbplats, men kasta dig inte in i det för fort. Det finns vissa problem som kan uppstå, och det gäller att optimera dina videor för bästa tänkbara resultat. Här är vad vi kommer att gå igenom:

  1. Varför du behöver optimera videor för din webbplats

    • Långsamma webbplatser förlorar kunder

    • Det finns olika videoformat att välja mellan

  2. Så här optimerar du dina videor med Clipchamp

    • Komprimera dina videor för HTML5

    • Konvertera din video för webbläsarkompatibilitet

1. Varför du behöver optimera videor för din webbplats

De många fördelarna med HTML5-video har ett pris. Inbäddat videoinnehåll som spelas upp automatiskt kan göra att sidorna laddas långsamt, vilket är en enorm trafikdödare. Du kan också stöta på problem om dina videor inte är kompatibla med de webbläsare som kunderna använder.

Långsamma webbplatser förlorar kunder

Om din HTML5-video är för tung kan den göra din företagswebbplats avsevärt långsammare. Det kan leda till en obekväm upplevelse för användaren, som måste se din video stanna upp och buffras medan webbplatsen laddas. 

Det som skulle ha varit ett snyggt designinslag som förhöjer det totala intrycket av webbplatsen kan alltså bli till ett störande moment för besökarna om de måste vänta på att alla element ska laddas och visas ordentligt.

Även om du har världens bästa SEO och ett fantastiskt erbjudande som lockar människor till din webbplats kan en dålig användarupplevelse förstöra allt. Inte nog med att folk kommer att klicka bort från webbplatsen – Google kommer också att lägga märke till det. Hur lång tid det tar för dina sidor att laddas och hur fort användarna klickar bort är båda viktiga faktorer som påverkar webbplatsens Google-rankning. Därför bör du se till att komprimera videor som du använder på din webbplats.

Om ditt videoinnehåll ligger i molnet ska du se till att molnleverantören garanterar korta laddningstider och hög drifttid. Då kan du ge dina webbplatsbesökare en videoupplevelse utan avbrott.

Videoredigerare i webbläsaren.

Kostnadsfritt för alltid. Gör proffsiga videor på bara några minuter.

Det finns olika videoformat att välja mellan

Det spelar ingen roll om du har den bästa HTML5-videon i världen om den inte laddas i webbläsaren. Det är inte alla videoformat som kan laddas i alla webbläsare. Därför måste du konvertera dina videor för att undvika det där pinsamma ögonblicket då det fräsiga videoinnehållet inte laddas alls. Detta är viktigt för att se till att dina videor godtas av så många webbläsare som möjligt på så många enheter som möjligt. 

Tyvärr finns det inte ett enda format som slår alla andra, men det bästa att satsa på är WebM (VP8) eller MP4 (H264). Dessa format laddas i de flesta webbläsare, men inte alla. 

Faktum är att det bästa du kan göra är att konvertera ditt videoinnehåll till WebM innan du använder det i din webbplatsdesign men också tillhandahålla MP4 som alternativ. Då laddas MP4-versionen istället om WebM mot förmodan inte stöds.

2. Så här optimerar du dina videor med Clipchamp

De två viktigaste sätten att optimera video för webbdesign är komprimering och konvertering. Du kan göra båda delarna utan kostnad med Clipchamp Utilities!

Som nämnts ovan är de bästa metoderna för att optimera video för webdesign komprimering och konvertering, vilket bidrar till en avsevärt kortare laddningstid och bättre uppspelning. 

Men innan du gör det skulle vi vilja rekommendera en sak. För att inte försämra kvaliteten föreslår vi att du undviker att sänka upplösningen och bithastigheten alltför mycket för dina videor. Om du skapar videor som främst ska spelas i bakgrunden på din webbplats kan det hända att du har lite mer utrymme för flexibilitet. Sådana videor ligger inte i centrum för uppmärksamheten, och kan oftast visas på mindre skärmar eftersom så många surfar på mobilen. 

HTML5-videor i slinga brukar vanligtvis visas bakom genomskinliga lager eller textelement, och måste laddas och spelas upp snabbt på alla enheter oavsett internetanslutning. Därför är filstorleken viktigare än upplösningen. Clipchamps egen webbplats är faktiskt ett exempel på hur det här rådet fungerar i praktiken. Men tillbaka till hur du optimerar dina videor:

Komprimera dina videor för HTML5

Du kanske redan har gissat att om målet är att skapa en liten videofil med bra kvalitet så är vår kostnadsfria videokonverterare och videokompressor online, Clipchamp, ett bra verktyg.

Clipchamp är redan populärt bland webbdesigners, webbutvecklare, grafiska formgivare och skapare av WordPress-, Wix- och Squarespace-webbplatser. Verktyget har också rekommenderats som en användbar app av webbdesignbloggare och visuella plattformar för webbplatsbygge som Webflow, specifikt för att det går att komprimera bakgrundsvideor och filmsekvenser för webbplatser.

Clipchamp komprimerar och konverterar videor lokalt i webbläsaren innan du laddar upp dem till servern, värdleverantören eller webbplatsbyggaren. Det är alltså inte bara när videon ligger ute på webbplatsen som det spelar roll, utan det gör också att det går snabbare att ladda upp den.

Vi rekommenderar generellt att videor som ska användas på webbplatser komprimeras ner till åtminstone 720p, med hjälp av inställningen för medelhög eller låg kvalitet i Clipchamp. Både webb och mobil är möjliga som utdataalternativ – med förinställningen Mobil blir utdatafilen mindre än för Webb och får något sämre visuell kvalitet.

Konvertera din video för webbläsarkompatibilitet

Med hjälp av Clipchamp Utilities kan du enkelt konvertera din video för att göra den kompatibel med fler webbläsare. Det är bara att ladda upp din video och välja format under Anpassa inställningar, så gör Clipchamps kostnadsfria konverterare resten:

Om du vill ha en MP4 som extra säkerhet för din webbplats är det bara att upprepa processen men välja MP4 istället.

Börja skapa video utan kostnad med Clipchamp