Artikel

Optimera webbplatsmedia för snabbhet och Core Web Vitals

Bilder och videor står vanligtvis för 60 till 80 procent av en webbsidas totala vikt. Att få dem rätt är det enskilt mest verkningsfulla du kan göra för laddningshastighet, Core Web Vitals-poäng och sökranking. Den goda nyheten: inget av det kräver specialprogram eller en server, och dina filer behöver aldrig lämna din enhet.

Välj rätt format före allt annat

Formatvalet betyder mer än något kvalitetsreglage. För fotografier på en webbsida är WebP det rätta standardvalet: det är 25 till 35 procent mindre än JPEG vid samma visuella kvalitet och alla moderna webbläsare stöder det. AVIF komprimerar ännu mer, upp till 50 procent bättre än JPEG, till priset av långsammare kodning. Använd AVIF för hjältebilder och produktfoton som du komprimerar en gång; använd WebP för allt du behandlar i satser eller behöver snabbt. PNG hör bara hemma där du behöver förlustfri noggrannhet eller en transparent bakgrund. SVG är det enda rimliga valet för logotyper, ikoner och illustrationer: det skalar till valfri storlek och väger ofta några kilobyte mot hundratals för en rastrerad motsvarighet.

Komprimera bilder utan synlig kvalitetsförlust

Börja med att ändra storlek till de faktiska visningsmåtten: en hjältebild som visas 1280 pixlar bred behöver inte 4000 pixlar data. Ändra storlek först, komprimera sedan. För fotografier är kvalitet 80 i WebP eller JPEG det praktiska golvet under vilket vanliga betraktare börjar märka skillnad, så sikta på 75 till 85 och titta på resultatet vid full zoom innan du publicerar. För grafik med text och jämna ytor bevarar PNG utan förlust eller SVG den skärpa som format med förlust suddar ut. Bildkompressorn på den här sidan hanterar alla dessa format, körs helt i din webbläsare och tillämpar samma algoritmer som dedikerade skrivbordsverktyg.

Konvertera video för webben utan att ladda upp den

Bakgrundsloopar och inbäddad video är där optimering av webbmedia ofta brister. En MP4 med H.264 spelas upp överallt, men en WebM med VP9 är 20 till 40 procent mindre vid samma kvalitet, vilket spelar roll för mobilanvändare på begränsade anslutningar. Det praktiska tillvägagångssättet är att konvertera en gång till WebM, leverera den som föredragen källa i ett video-element och behålla MP4 som reserv. Videokonverteraren här använder FFmpeg kompilerat till WebAssembly: konverteringen körs inuti din webbläsare, ingenting laddas upp, och filer av valfri storlek fungerar så länge din enhet har tillräckligt med minne. För inbäddad bakgrundsvideo, överväg även videobeskäraren för att klippa bort döda sekunder före kodning: längden är den största drivkraften bakom filstorleken.

Inbäddade resurser: base64 och SVG

Mycket små bilder, ikoner och favikoner som bäddas in direkt i HTML eller CSS som base64-strängar eliminerar en nätverksrundresa per resurs. Det är vettigt för resurser under cirka 2 KB som visas på varje sida, som en logotypsprite eller en laddningsindikator. Större resurser bör förbli separata filer eftersom base64 kodar 33 procent större än binären, och webbläsare cachelagrar filreferenser men inte inbäddad data fristående. SVG-optimeraren tar bort editorskräp från exporterade SVG-filer utan att röra det visuella resultatet. Bild-till-base64-konverteraren genererar den klippklara data-URI:n i din webbläsare.

Verktyg i den här artikeln

Vanliga frågor

Påverkar bildkomprimering min sökranking?

Google använder Core Web Vitals som en rankingsignal, och Largest Contentful Paint är nästan alltid en bild eller en videoaffisch. En sida vars hjältebild laddas på under en sekund får bättre poäng än en där det tar tre sekunder. Komprimering och rätt format påverkar detta mått direkt, så ja, bildoptimering har en mätbar SEO-effekt. Effekten är som störst på mobil, där anslutningarna är långsammare och straffet för tunga bilder är större.

Varför behandla media lokalt i stället för att använda en webbtjänst?

De flesta onlineverktyg för media kräver att du laddar upp dina filer till en fjärrserver, vilket tar tid, förbrukar bandbredd och innebär att en kopia av din fil finns på infrastruktur du inte kontrollerar. Verktygen på den här sidan körs helt i din webbläsare: dina bilder och videor behandlas på din enhet och resultatet laddas ner direkt. Det finns inget konto, ingen väntan på uppladdning, och ingenting om dina filer skickas någonsin till en server.