Optimera och komprimera bilder

Om du bara kan göra en enda sak för att förbättra din hemsidas prestanda och hållbarhet så är det ett smart val att optimera och komprimera bilder. Bilder står nämligen för nästan hälften av en genomsnittlig hemsidas storlek.

Bilder kan säga mer än tusen ord och tillför ofta ett stort värde till din hemsida, men för varje megabyte med bilder kan du istället skriva 150 000 ord. Fundera därför en extra gång innan du laddar upp en bild och se dessutom till att de bilder du använder är komprimerade och optimerade för webben.

Med hjälp av vår kostnadsfria klimatkalkylator kan du analysera din hemsida, se hur många bilder du har och jämföra antalet med genomsnittet. Du får också fram massor av annan information om tips om hur du kan göra din hemsida mer hållbar.

Komprimera bilder – minska filstorleken

Bilder som tar lång tid att ladda är ingenting som varken dina användare eller Google gillar. Har din hemsida inte laddat färdigt på 7 sekunder så försvinner hela 53 procent av dina användare. Som tabellen nedan visar så höjs avvisningsfrekvensen dock redan drastiskt redan vid 4 sekunder.

Laddningstid (sekunder)Avvisningsfrekvens (procent)
17
26
311
424
538
646
753
859
961
1065
Tabellen visar hur en hemsidas laddningstid korrelerar med avvisningsfrekvens.

Men som tur är så är det enkelt att komprimera bilder och göra din hemsida snabbare. Det är bara tre saker du behöver göra:

Välja rätt bildformat
Välja rätt bildstorlek
Optimera bilden

Välj rätt bildformat – WebP

Tidigare har du behövt hålla koll på vilket bildformat som passar bäst för olika typer av bilder. En bild med en transparent bakgrund har till exempel länge inneburit att bilden ska vara i formatet png, samtidigt som bilder med en detaljerad bakgrund ska vara i jpg-format.

WebP ersätter jpg och png

WebP är ett modernt bildformat som fungerar både för transparenta och detaljerade bakgrunder, det betyder att du bara behöver förhålla dig till ett enda bildformat. Men den största fördelen med WebP är att filstorleken blir mycket mindre än för jpg och png. Google har analyserat tiotusentals bilder och i genomsnitt förminskas bilden med 25-34 procent.

Anledningen till att WebP hittills inte slagit igenom på bred front är att det tidigare inte haft stöd av alla webbläsare. Numera stöttas dock WebP av alla moderna browsers, så det finns inte längre någon anledning att inte välja WebP.

WebP ersätter även GIF-animationer

WebP har även stöd för animationer vilket innebär att formatet gif också blivit överflödigt. Kvaliteten på en WebP-animation är högre än en gif-animation samtidigt som filerna i genomsnitt blir 64 procent mindre.

WordPress-plugins för WebP

Över 40 procent av världens hemsidor finns på plattformen WordPress. I WordPress finns ännu inget inbyggt stöd för att direkt ladda upp och använda WebP-bilder, däremot finns det flera plugin som gör det möjligt genom att konvertera de jpg och png-bilder du laddar upp till WebP-format:

WebP Express

WebP Converter

Välj rätt bildstorlek

En bilds storlek ska aldrig vara bredare eller högre än den container som bilden är placerad i. Det säger sig självt att det är onödigt att en bild som visas på en mobilskärm har en storlek som är anpassad till en stor datorskärm.

Samtidigt så besöker användarna din hemsida på datorer, mobiler och surfplattor i helt olika storlekar, så containerns storlek varierar beroende på enhet. Därför behöver du ha flera versioner av en och samma bild för att göra filstorleken så liten som möjligt. Det löser du enkelt genom att använda srcset.

Så använder du srcset

Med srcset skapar du flera versioner av en och samma bild och beroende på vilken enhet din besökare använder så visas den bild som passar bäst. Dina användare märker ingen skillnad på bildens kvalitet, men däremot laddas din hemsida snabbare eftersom bildens filstorlek inte är större än nödvändigt.

<picture>
    <source media="(max-width: 767px)" srcset="bild-liten.webp">
    <source media="(min-width: 768px)" srcset="bild-stor.webp">
    <img src="bild-fallback.webp" alt=" ">
</picture>
Med srcset kan du visa olika bilder beroende på användarens skärmstorlek.

Ändra storlek på flera bilder

Det finns många verktyg på nätet som enkelt hjälper dig att ändra storlek på många bilder på en och samma gång. Men visste du att du också kan göra det direkt i Windows 10?

Microsoft PowerToys är en verktygslåda för Windows 10 med massor av smarta tillägg för den produktive. Ett av dessa tillägg – Image Resizer – gör att du med ett högerklick kan ändra storleken på en eller flera bilder blixtsnabbt.

Microsoft PowerToys Image Resizer
Ändra snabbt och enkelt storlek på flera bilder direkt i Windows 10.

Optimera bilder på nätet

Innan du laddar upp dina bilder på din hemsida bör du använda ett verktyg för att komprimera dem. Du minskar filstorleken drastiskt och hela processen tar bara några sekunder. För den avancerade användaren finns det både scripts och plugins som kan komprimera bilder, men minst lika bra resultat får du med hjälp av flera smidiga verktyg på nätet:

Compressor.io

Kraken.io

Optimizilla

För att illustrera vilken markant skillnad ett bildoptimeringsverktyg gör för dina bilders filstorlek så har vi komprimerat samma bild i fyra olika storlekar med hjälp av verktyget Compressor.io:

Format (px)Filstorlek föreFilstorlek efterSkillnad
4920×32802.14 MB677 kB-69%
1920×1280303 kB135 kB-55%
1280×853155 kB75 kB-51%
640×42655 kB29 kB-47%
Att optimera bilder minskar filstorleken markant.

Som du ser i tabellen kunde vi minska filstorleken med i genomsnitt 55,5 procent genom att komprimera bilden i ett verktyg. Ta för vana att alltid göra det innan du laddar upp en bild på din hemsida.

Apa
Filstorleken på denna bild blev i genomsnitt 55,5 procent mindre.

Komprimera flera bilder samtidigt

I de flesta bildoptimeringsverktygen kan du komprimera flera bilder samtidigt. På bara ett par sekunder kan du minska storleken på bilderna innan du laddar upp dem. Vissa av verktygen har funktioner du måste betala för, men den vanliga användaren kommer långt enbart med versionen som är gratis.

Komprimera en eller flera bilder i formaten jpg, png, gif, svg och webp.
Ladda ner dina komprimerade bilder, du ser hur mycket de komprimerats.

Bonustips: Lazy loading

Det är ingen anledning att ladda bilder som användarna inte ser, det kräver extra energi och påverkar dessutom din hemsidas laddningstid negativt. Lazy loading är en smart funktion som innebär att webbläsarens först börjar ladda in bilden när den närmar sig användarens viewport.

<img src=" " loading="lazy" alt=" " height=" " width=" " />
Definera lazy loading direkt i bild-taggen

Du definerar alltså lazy load genom html-attributet loading. Utöver lazy kan du också välja auto och eager. Auto låter webbläsaren avgöra om lazy loading ska användas och eager laddar bilden oavsett var den befinner sig på hemsidan.

Tänk på att inte använda lazy load på de bilder som syns direkt när din sida laddas in, utan enbart på de bilder som inte är synliga i viewporten. Om du vill lära dig mer så har web.dev skrivit en fördjupande artikel i ämnet: Browser-level image lazy-loading for the web.