Fråga vilken webbutvecklare som helst vad som gör de flesta webbplatser långsamma, så blir svaret nästan alltid detsamma. Bilder. Bildoptimering för webben är processen att minska bildfilernas storlek utan att förlora visuell kvalitet, så att sidor laddar snabbare utan att se sämre ut. Ett enda okomprimerat fotografi kan vara flera megabyte. Samma bild, rätt formaterad och komprimerad, kan vara under 100 kilobyte utan synlig skillnad på skärmen. Den här artikeln går igenom vilka filformat du ska använda, hur komprimering fungerar, när du ska ändra storlek före uppladdning, hur lazy loading passar in och vad som gör störst praktisk skillnad för sidans laddningshastighet.
Bilder är den enskilt största bidragande faktorn till sidans vikt på de flesta webbplatser. En sida med fem ooptimerade foton kan väga tio gånger mer än nödvändigt. Den vikten leder direkt till långsammare laddning, ett sämre Largest Contentful Paint-resultat och besökare som lämnar innan sidan hunnit visas klart. För sammanhanget om varför laddningshastighet påverkar ditt företag och dina sökplaceringar, se artikeln om varför webbplatshastighet spelar roll.
Varför gör bilder webbplatser långsamma?
När en besökare öppnar en sida laddar webbläsaren ner varje resurs på den innan sidan visas. Bilder är oftast störst av de resurserna. Varje bild kräver en egen förfrågan, och webbläsaren måste vänta på att de förfrågningarna slutförs innan den kan visa innehållet fullt ut.
Hur bilder påverkar laddningsmåtten
- Bilder påverkar Largest Contentful Paint (LCP) direkt. Om det största synliga elementet på en sida är en huvudbild är LCP den tid det tar för den bilden att laddas helt
- Ooptimerade bilder ökar sidans totala vikt, vilket fördröjer alla andra mått längre fram i laddningsförloppet
- På mobila uppkopplingar förstärks effekten. En huvudbild på 3 MB som laddar på två sekunder på bredband kan ta åtta sekunder eller mer på ett genomsnittligt mobilnät
- Flera stora bilder förvärrar problemet. Ett galleri eller en produktsida med tio okomprimerade foton kan vara svår att använda på långsammare uppkopplingar
Vilka filformat ska du använda för webbbilder?
JPEG
- Standardformatet för fotografier och bilder med toningar och många färger
- Stödjer förlustbehäftad komprimering, vilket innebär att en del bilddata tas bort för gott för att minska filstorleken
- Stöds av alla webbläsare och enheter utan undantag
- En kvalitetsinställning på 75 till 85 ger filer som är 60 till 80 procent mindre än originalet, utan synlig kvalitetsförlust för de flesta fotografier
PNG
- Formatet för bilder som behöver genomskinlig bakgrund, som logotyper, ikoner och grafik med släta färgytor
- Använder förlustfri komprimering, vilket innebär att ingen data tas bort och bilden bevaras exakt
- PNG-filer är betydligt större än JPEG för fotografier. Använd PNG bara när genomskinlighet krävs; använd JPEG eller WebP för foton
WebP
- Ett modernt format som utvecklats för att ersätta både JPEG och PNG med bättre komprimering vid motsvarande kvalitet
- WebP-bilder är vanligtvis 25 till 35 procent mindre än motsvarande JPEG-filer
- Stödjer både förlustbehäftad och förlustfri komprimering, och stödjer genomskinlighet
- Stöds av alla större webbläsare. Om din webbplatsbyggare inte automatiskt konverterar bilder till WebP, konvertera dem manuellt före uppladdning
AVIF
- Ett nyare format som erbjuder bättre komprimering än WebP, ofta 50 procent mindre än JPEG vid jämförbar kvalitet
- Webbläsarstödet växer men är ännu inte allmänt. Använd AVIF där det stöds, med automatisk reservlösning i WebP eller JPEG för webbläsare som inte stödjer det
Vad är bildkomprimering och hur fungerar den?
Komprimering minskar filstorleken genom att ta bort eller förenkla bilddata. Det finns två typer, och skillnaden avgör när du ska använda vilken.
Förlustbehäftad komprimering
- Tar bort en del bilddata för gott för att uppnå en mindre filstorlek
- Den borttagna datan väljs utifrån vad det mänskliga ögat minst sannolikt märker, oftast subtila färgvariationer och fina texturdetaljer
- Används i JPEG och förlustbehäftad WebP
- En kvalitetsinställning på 75 till 85 ger dramatiskt mindre filer med bilder som ser identiska ut med den okomprimerade originalbilden för de flesta praktiska användningar
- Undvik att spara om en redan komprimerad JPEG med lägre kvalitet. Det staplar komprimeringsartefakter och försämrar bilden ytterligare för varje sparning
Förlustfri komprimering
- Minskar filstorleken utan att ta bort någon bilddata. Varje pixel bevaras exakt
- Används i PNG och förlustfri WebP
- Mindre besparing i filstorlek än förlustbehäftad komprimering, men helt utan kvalitetsförlust
- Passar bäst för produktdiagram, skärmdumpar, texttung grafik eller alla bilder där komprimeringsartefakter skulle synas eller vara oacceptabla
Behöver du ändra storlek på bilder före uppladdning?
Filstorlek och pixelmått är separata frågor, och båda påverkar laddningshastigheten. Att komprimera en bild som är 4 000 pixlar bred hjälper inte om webbläsaren bara behöver visa den i 800 pixlars bredd. Webbläsaren laddar ner hela bilden på 4 000 pixlar och skalar ner den i visningsområdet, vilket slösar bandbredd och gör sidan långsammare för varje besökare.
Så anpassar du bildstorleken rätt före uppladdning
- Ta reda på den största bredd bilden någonsin kommer att visas i. För bilder i full bredd på datorn är det vanligtvis 1 440 till 1 920 pixlar
- För bilder i kolumner eller kort är den visade bredden mindre, ofta 400 till 800 pixlar
- Ändra bildens storlek till dess största visningsstorlek före uppladdning
- För retina- och högdensitetsskärmar, multiplicera visningsbredden med 1,5 till 2. En kortbild på 400 pixlars bredd tjänar på en källfil på 600 till 800 pixlars bredd för att se skarp ut på retinaskärmar
Vad är lazy loading och hur påverkar det bildoptimeringen?
Lazy loading fördröjer nedladdningen av bilder som ännu inte syns i visningsområdet. I stället för att ladda varje bild på sidan på en gång laddar webbläsaren bilder först när besökare scrollar nära dem. På sidor med många bilder minskar det sidans startvikt avsevärt och förbättrar Time to Interactive för innehållet som syns utan att scrolla.
- Lazy loading stöds inbyggt i alla större webbläsare med attributet
loading="lazy"på bildtaggar - Använd inte lazy loading på bilder ovanför vecket. Huvudbilden och allt innehåll som syns utan att scrolla ska laddas direkt
- Använd lazy loading på alla bilder under vecket, inklusive produktgallerier, bloggminiatyrer och bildtunga avsnitt längre ner på sidan
För en fullständig genomgång av hur lazy loading fungerar och när du ska använda det, se artikeln om vad lazy loading är och hur det fungerar.
Vad är responsiva bilder och varför spelar de roll?
En responsiv bild är en bild som levererar en olika stor fil beroende på besökarens skärmstorlek. I stället för att skicka en bild på 1 920 pixlar till varje enhet, även till en besökare med en mobilskärm på 375 pixlars bredd, låter responsiva bilder webbläsaren begära bara det den behöver.
Hur responsiva bilder minskar laddtiden på mobil
- En mobilbesökare får en version av bilden på 400 pixlar i stället för hela datorfilen, vilket minskar nedladdningsstorleken dramatiskt
- Responsiva bilder använder attributet
srcsetför att ange flera källfiler i olika bredder så att webbläsaren kan välja rätt - Webbplatsbyggare som hanterar detta automatiskt gör att du slipper skapa flera bildstorlekar för hand
- Responsiva bilder förbättrar Core Web Vitals direkt på mobil, där bildoptimering har störst effekt på LCP
För en genomgång av Core Web Vitals och hur LCP poängsätts, se artikeln om vad Core Web Vitals är.
Hur optimerar du bilder steg för steg?
Före uppladdning
- Ändra bildens storlek till rätt visningsmått
- Välj rätt format: WebP för fotografier och allmän grafik, PNG bara när genomskinlighet krävs
- Komprimera med en kvalitetsinställning på 75 till 85 för förlustbehäftade format
- Kontrollera filstorleken. En vanlig webbbild ska vara under 200 KB. Huvudbilder på dator kan gå upp till 400 KB; allt över det är värt att se över före uppladdning
Efter uppladdning
- Lägg till beskrivande alt-text på varje bild. Det är viktigt för tillgänglighet och bidrar till synlighet i sök. För en fullständig guide, se artikeln om hur du använder bilder på din webbplats
- Använd lazy loading på alla bilder under vecket
- Kör ett hastighetstest av sidan efter att du lagt till nya bilder. En enda ooptimerad bild kan upphäva alla andra hastighetsförbättringar på sidan
Löpande
- Kontrollera nya bilder före varje uppladdning. Ooptimerade bilder slinker lätt igenom när man arbetar snabbt
- Kör ett hastighetstest efter varje större omgång nya bilder som publiceras
- Se över äldre bilder om webbplatsen är äldre än dagens optimeringsrutiner. Gamla bildbibliotek är en vanlig och förbisedd källa till hastighetsproblem
För en guide till att testa hela webbplatsens prestanda, se artikeln om hur du testar din webbplatshastighet.
Så hanterar WEMASY bildoptimering
WEMASY:s webbplatsbyggare komprimerar och konverterar bilder automatiskt när de laddas upp. Bilder levereras i WebP-format där webbläsaren stödjer det, med reservformat för äldre enheter. Flera storlekar skapas vid uppladdning så att mobilbesökare får lagom stora filer utan någon manuell konfiguration.
Lazy loading används som standard på bilder under vecket på alla sidor byggda med WEMASY. Alt-text kan läggas till i bildredigeraren på plattformen. Sidhastighetsresultat, inklusive LCP, syns i WEMASY:s analysdashboard, med bildrelaterade problem markerade per sida tillsammans med konkreta rekommendationer.
Se vad som ingår i WEMASY:s webbplatsbyggare, eller jämför planerna på prissidan.
Vanliga frågor
Vad är bildoptimering för webben?
Bildoptimering för webben är processen att minska en bilds filstorlek samtidigt som den visuella kvaliteten förblir godtagbar för skärmvisning. Det handlar om att välja rätt filformat, komprimera bilden till en lämplig kvalitetsnivå, ändra storleken till de faktiska visningsmåtten och använda tekniker som lazy loading och responsiva bilder så att besökare bara laddar ner den version av filen som deras enhet och uppkoppling behöver. Med WEMASY:s webbplatsbyggare kan du sätta upp det direkt på din webbplats.
Vilket är det bästa bildformatet för en webbplats?
WebP är det bästa formatet för de flesta webbbilder. Det ger betydligt bättre komprimering än JPEG vid jämförbar visuell kvalitet, stödjer genomskinlighet som PNG och stöds av alla större webbläsare. För bilder som kräver genomskinlig bakgrund och pixelperfekt precision är PNG rätt val. AVIF ger ännu bättre komprimering än WebP men har mer begränsat webbläsarstöd och fungerar bäst med ett automatiskt reservformat.
Hur mycket kan bildkomprimering minska filstorleken?
Förlustbehäftad komprimering vid en kvalitetsinställning på 75 till 85 minskar vanligtvis JPEG-filstorleken med 60 till 80 procent utan synlig kvalitetsskillnad för de flesta fotografier. Att konvertera från JPEG till WebP vid samma kvalitetsnivå minskar filstorleken med ytterligare 25 till 35 procent. Ett foto som börjar på 4 MB kan ofta minskas till under 150 KB genom en kombination av rätt storleksändring, formatkonvertering och komprimeringsinställningar.
Påverkar bildoptimering SEO?
Ja. Ooptimerade bilder är en av de vanligaste orsakerna till ett dåligt Largest Contentful Paint-resultat, som är en Core Web Vital och används som rankingsignal av sökmotorer. Sidor med stora, okomprimerade bilder får ofta låga LCP-resultat jämfört med sidor som har samma innehåll i optimerad form. Dessutom bidrar beskrivande alt-text på bilder till synlighet i bildsök och sidans tillgänglighet i stort.
Ska man använda lazy loading på alla bilder?
Nej. Lazy loading ska bara användas på bilder som visas under vecket, alltså innehåll som inte syns när sidan först öppnas. Bilder ovanför vecket, inklusive huvudbilden eller andra framträdande bilder nära sidans topp, ska laddas direkt. Lazy loading på bilder ovanför vecket fördröjer LCP, vilket försämrar Core Web Vitals-resultaten och besökarnas upplevelse.
Hur stora ska webbplatsbilder vara?
En vanlig webbbild ska vara under 200 KB. Huvudbilder och bilder i full bredd på dator kan vara upp till 400 KB utan betydande påverkan på laddtiden, förutsatt att de är i WebP-format och ordentligt komprimerade. Bilder i kort, miniatyrer och mindre behållare ska anpassas till sin faktiska visningsbredd. Att leverera en bild på 1 920 pixlar i en behållare på 400 pixlar slösar bandbredd för varje besökare på varje enhet.