Bildoptimering för SEO: snabbare sidor och synlighet i bildsök

Bildoptimering för SEO handlar om två saker: att bilderna laddar snabbt och att Google förstår vad de visar. Gör du rätt får du en snabbare sajt, bättre Core Web Vitals och en chans att synas i Google Bilder. Gör du fel kan en enda produktbild på 5 MB sänka hela startsidan. Här går vi igenom allt i den ordning det faktiskt spelar roll: storlek, format, komprimering, alt-text, filnamn och den tekniska koden runt bilden.

Kort sagt

• Rätt storlek först. Ladda aldrig upp en bild som är 4 000 pixlar bred om den visas i 400. Ingen komprimering räddar en bild i fel storlek.
• WebP slår JPG för de flesta webbilder. Google mätte 25–34 procent mindre filer än JPEG vid likvärdig kvalitet.
• Alt-text ska beskriva, inte packa sökord. Skriv vad bilden visar i sitt sammanhang. Dekorativa bilder får tom alt-text.
• Ange bredd och höjd. Det förhindrar att sidan hoppar när bilden laddas och skyddar ditt CLS-värde.
• Använd vanliga img-taggar. Bilder som bara ligger som CSS-bakgrund indexeras inte i Googles bildsök.

Innehållsförteckning

• Varför bilder påverkar din ranking
• Börja med rätt storlek, inte rätt format
• WebP, JPG, PNG eller AVIF?
• Komprimering: hur hårt kan du trycka?
• Alt-text som hjälper både Google och skärmläsare
• Filnamn, bildtext och sammanhang
• Tekniken som avgör om bilden alls hittas
• Steg för steg: bildoptimera en befintlig sida
• Så ser vi på bildoptimering
• Vill du slippa göra det själv?
• Vanliga frågor
• Källor

Varför bilder påverkar din ranking

Bilder är oftast det tyngsta på en webbsida. På en typisk företagssajt är det hero-bilden på startsidan, produktfoton eller teambilden som står för merparten av datamängden. Det slår direkt mot hastigheten, och hastigheten mäter Google.

Google använder Core Web Vitals som en del av sin bedömning av sidupplevelsen. Två av mätvärdena handlar nästan alltid om bilder:

• LCP (Largest Contentful Paint): hur lång tid det tar innan det största elementet i synfältet har laddat. Google rekommenderar att det sker inom 2,5 sekunder. På de flesta sidor är det största elementet en bild.
• CLS (Cumulative Layout Shift): hur mycket innehållet flyttar sig medan sidan laddar. Målet är under 0,1. Bilder utan angivna mått är den vanligaste orsaken till att text plötsligt hoppar ner en bit när du ska klicka.

Den andra halvan är sammanhang. Google kan analysera själva bildinnehållet, men lutar sig fortfarande tungt på texten runt bilden: alt-text, filnamn, bildtext och sidans rubriker. Enligt Googles riktlinjer för bild-SEO används sidans innehåll för att förstå bilden och avgöra när den ska visas. En bild på en takläggare i Lund som heter IMG_4471.jpg och saknar alt-text berättar ingenting. Samma bild med ett beskrivande namn och en tydlig alt-text kan dyka upp när någon söker på takrenovering i Skåne.

Börja med rätt storlek, inte rätt format

Det vanligaste misstaget vi ser är inte fel format. Det är fel storlek. En bild direkt från en modern mobilkamera är ofta 4 000 pixlar bred och flera megabyte stor. Laddar du upp den och låter webbplatsen skala ner den till 600 pixlar med CSS, laddar besökaren ändå ner hela originalet. Det spelar ingen roll om filen är WebP eller JPG: du skickar fortfarande tio gånger mer data än skärmen behöver.

Så här tänker du kring storlek:

• Utgå från den största bredd bilden visas i. En bild i en textspalt som är 720 pixlar bred behöver sällan vara mer än 1 440 pixlar, alltså dubbel bredd för skärmar med hög pixeltäthet.
• Hero-bilder i full bredd klarar sig oftast med 1 920 till 2 400 pixlar. Större än så märks sällan för ögat men mycket i laddningstiden.
• Miniatyrer och ikoner ska exporteras i den storlek de visas i, inte som nedskalade fullstora bilder.
• Servera olika storlekar till olika skärmar. Med attributet srcset kan webbläsaren själv välja en mindre fil på mobilen och en större på datorn. MDN:s dokumentation för img-elementet visar hur srcset och sizes fungerar.

Beskär också bilden innan du skalar den. Ett foto där motivet bara upptar en tredjedel av ytan blir både tyngre och sämre än samma bild beskuren till det som faktiskt är viktigt.

WebP, JPG, PNG eller AVIF?

När storleken är rätt är det dags att välja format. För de flesta fotografier på en företagssajt är svaret i dag WebP, men varje format har sin plats.

WebP mot JPG i siffror

Googles egen jämförelsestudie av WebP visade att WebP gav 25–34 procent mindre filer än JPEG vid samma eller något bättre uppmätt bildkvalitet. För förlustfria bilder anger Google att WebP blir 26 procent mindre än PNG. På en sida med tio produktbilder är det skillnaden mellan en sida som känns direkt och en som segar på mobilnätet.

Det betyder inte att JPG är dåligt. En välkomprimerad JPG i rätt storlek slår en okomprimerad WebP i fel storlek varje gång. Men om du ändå exporterar bilder till webben finns det sällan skäl att välja JPG framför WebP i dag.

Var står AVIF?

AVIF är nästa steg och ger enligt caniuse.com generellt bättre komprimering än WebP, JPEG och PNG. Google räknar AVIF till de format som stöds i Google Bilder, enligt riktlinjerna för bild-SEO. Om ditt publiceringssystem kan generera AVIF automatiskt är det värt att använda, gärna med WebP eller JPG som reserv via ett picture-element. Att handkonvertera varje bild till AVIF är däremot sällan värt tiden för en vanlig företagssajt.

Komprimering: hur hårt kan du trycka?

Komprimering är att ta bort data som ögat inte märker. Med förstörande komprimering, som i JPG, WebP och AVIF, väljer du en kvalitetsnivå. Ett par tumregler som fungerar i praktiken:

• Kvalitet 75–85 räcker för de flesta foton på webben. Under 70 börjar du ofta se artefakter i himmel, hud och mjuka toningar.
• Jämför på riktigt. Öppna original och komprimerad version bredvid varandra i full storlek. Ser du ingen skillnad kan du ofta gå ett steg längre.
• Ta bort metadata. Kamerans EXIF-data, som kameramodell och ibland GPS-position, gör ingen nytta på webben och kan dessutom avslöja mer än du vill.
• Låt systemet göra jobbet. Moderna publiceringsverktyg och bildtjänster kan komprimera och konvertera automatiskt vid uppladdning. Det är tryggare än att lita på att alla som laddar upp bilder minns rätt inställningar.

En rimlig målbild för en vanlig innehållsbild är under 150–200 kB, och för en stor hero-bild under 300–400 kB. Det är inga officiella gränser utan våra arbetsvärden. Det som räknas är att LCP hamnar under 2,5 sekunder.

Alt-text som hjälper både Google och skärmläsare

Alt-texten är den text som läses upp av skärmläsare och visas om bilden inte kan laddas. Enligt MDN är alt-attributet obligatoriskt och avgörande för tillgängligheten. För SEO är det din viktigaste signal om vad bilden föreställer.

Den största missuppfattningen är att alt-texten är en plats för sökord. Googles riktlinjer varnar uttryckligen för att fylla alt-attribut med nyckelord, eftersom det ger en dålig upplevelse och kan uppfattas som spam. Skriv i stället vad bilden visar, i det sammanhang den står.

Några regler som håller:

• Var konkret och kort. En mening räcker oftast. Googles kurs i att skriva hjälpsam alt-text rekommenderar kortfattade och korrekta beskrivningar.
• Börja inte med “bild på”. Skärmläsaren säger redan att det är en bild.
• Bilder med text eller data ska återge budskapet, inte bara kalla sig “infografik”.
• Dekorativa bilder får tom alt-text (alt=“”), så att skärmläsaren hoppar över dem i stället för att läsa upp ett filnamn.
• Ett sökord får gärna finnas med om det naturligt beskriver bilden. Står bilden i en text om takrenovering i Lund, och visar en takrenovering i Lund, är det helt rätt att säga det.

Alt-text är också ett lagkrav för många företag

Sedan den 28 juni 2025 gäller lagen om vissa produkters och tjänsters tillgänglighet i Sverige. Den ställer krav på bland annat e-handel och andra digitala tjänster riktade till konsumenter. Kraven bygger på WCAG, den standard som Post- och telestyrelsen beskriver som grunden för tillgängligt webbinnehåll, och textalternativ till bilder är en av de mest grundläggande punkterna.

Om du driver e-handel eller säljer tjänster digitalt till privatpersoner: kontrollera med PTS eller en jurist med inriktning på tillgänglighet om och hur lagen gäller just din verksamhet, eftersom det finns undantag. Oavsett juridiken är det här en av de få åtgärder där tillgänglighet och SEO pekar åt exakt samma håll. PTS granskning av hur tillgängliga svenska webbplatser är visar att grundläggande brister i struktur och textalternativ är vanliga, så ribban för att sticka ut är inte särskilt hög.

Filnamn, bildtext och sammanhang

Filnamnet är en liten men gratis signal. Googles riktlinjer säger att filnamnet kan ge ledtrådar om vad bilden handlar om.

• Byt IMG_4471.jpg mot något som takrenovering-lund-tegeltak.webp.
• Använd bindestreck mellan orden och undvik å, ä och ö i filnamn, eftersom de kan bli konstiga tecken i adressen. I alt-texten skriver du “takläggning”, i filnamnet “taklaggning”.
• Håll det kort. Tre till fem ord räcker.

Bildtexten under bilden är den text som läses mest på många sidor, och den hjälper Google att koppla bilden till ämnet. Placera också bilden nära den text den illustrerar. En bild av ett badrum hör hemma under rubriken om badrumsrenovering, inte i en generisk bildkarusell längst ner.

Bilden är en del av helheten på sidan. Rubriker, ingress och interna länkar avgör fortfarande mest. Vill du se hur bilderna passar in i resten av sidans optimering har vi skrivit om on-page SEO för varje sida.

Tekniken som avgör om bilden alls hittas

Här är de tekniska detaljerna som ofta faller mellan stolarna när en sajt byggs. De syns inte för besökaren, men de avgör om Google hittar bilden och om sidan känns snabb.

Använd img-elementet

Google indexerar inte bilder som bara läggs in som CSS-bakgrund. Enligt Googles bild-SEO-dokumentation behöver bilden ligga i ett vanligt img-element med ett src-attribut för att kunna hittas i bildsök. Använder du picture-elementet för att servera AVIF eller WebP ska det alltid finnas en img-tagg som reserv inuti.

Tumregeln: bilder som bär innehåll, som produktfoton, referensjobb och teambilder, ska vara img. Rena dekorbakgrunder kan gärna ligga i CSS.

Ange bredd och höjd

Skriv alltid ut width och height på bilden, eller reservera ytan med aspect-ratio i CSS. Då vet webbläsaren hur stor plats bilden tar innan den har laddat, och texten hoppar inte. Det är det enklaste sättet att hålla CLS under 0,1, som Google rekommenderar.

Lat laddning, men inte överallt

Attributet loading=“lazy” gör att bilder längre ner på sidan laddas först när besökaren närmar sig dem. Det sparar mycket data. Undantaget är bilden högst upp: om hero-bilden laddas lat fördröjs just det element som LCP mäter. Ladda den direkt, och lazy-ladda resten.

Bildsitemap och CDN

Har du många bilder som är viktiga för affären, till exempel i en webbutik, kan du lista dem i en bildsitemap så att Google hittar dem lättare. Googles riktlinjer beskriver hur bildsitemaps fungerar. Ett CDN, alltså ett nätverk som serverar filer från servrar nära besökaren, gör dessutom att bilderna laddar snabbare oavsett om kunden sitter i Malmö eller i Luleå.

Steg för steg: bildoptimera en befintlig sida

Så här gör du om du vill gå igenom en sida du redan har:

1. Mät först. Kör sidan i Googles PageSpeed Insights och notera LCP och CLS. Titta på vilket element som räknas som LCP.
2. Lista de tyngsta bilderna. Verktyget visar vilka bilder som är större än de behöver vara. Börja med de fem tyngsta.
3. Skala om och beskär. Exportera varje bild i den bredd den faktiskt visas i, gånger två för skärmar med hög upplösning.
4. Konvertera till WebP (eller AVIF om systemet stöder det) och komprimera till kvalitet runt 80.
5. Byt filnamn till beskrivande namn innan du laddar upp igen.
6. Skriv alt-texter för varje bild som bär innehåll, och sätt alt=“” på dekor.
7. Kontrollera koden: img-element, width och height, ingen lat laddning på hero-bilden.
8. Mät igen och jämför. Fältdata i Search Console uppdateras långsammare, så räkna med några veckor innan förbättringen syns där.

Har din sajt hundratals bilder är det här ett jobb som bör automatiseras i publiceringssystemet snarare än göras för hand. Det är en fråga om hur sajten är byggd, inte om hur flitig redaktören är.

Så ser vi på bildoptimering

Vi bygger hemsidor och arbetar med SEO i samma team, och det märks tydligast just här. Bildoptimering blir sällan ett problem för att någon inte vet vad WebP är. Det blir ett problem för att designern väljer bilderna, utvecklaren bygger mallen och den som skriver texterna laddar upp filerna, och ingen av dem äger helheten.

När vi tar fram en företagshemsida bestämmer vi därför bildstorlekar, format och alt-textrutiner redan när vi bygger strukturen, inte i efterhand. Mallarna skalar och konverterar bilderna automatiskt, måtten är satta och hero-bilden laddar direkt. Då behöver du som kund inte tänka på pixlar, bara på att välja bilder som visar din verksamhet.

Vi är också ganska trötta på bildbanksbilder. En äkta bild på ditt team, din lokal eller ett utfört jobb säger mer till både besökare och Google än ett generiskt foto av en handskakning. Det är en anledning till att vi erbjuder foto och video i samma team som webb och SEO.

— Weblyftet

Vill du slippa göra det själv?

Hos oss ingår design, texter, SEO, drift och uppdateringar i en företagshemsida för 9 999 kr per år, till fast pris och med hemsidan i din ägo. Bildoptimeringen är inbyggd från start. Har du redan en sajt som känns långsam kan en SEO-audit visa var bilderna och resten av sidorna tappar fart. För företag i Malmö och övriga Skåne arbetar vi även med löpande SEO i Malmö.

Vanliga frågor

Är WebP alltid bättre än JPG?

För webben i de flesta fall, ja. Google mätte 25–34 procent mindre filer vid likvärdig kvalitet. JPG är fortfarande bra när filen ska fungera överallt, till exempel i e-post eller när en kund ska ladda ner bilden. Viktigast är ändå att bilden har rätt storlek.

Hur lång ska en alt-text vara?

Så kort som möjligt men så lång som behövs, oftast en mening. Beskriv vad bilden visar i just det sammanhanget. Undvik att räkna upp sökord, det hjälper varken skärmläsaranvändare eller din ranking.

Behöver alla bilder alt-text?

Alla bilder behöver ett alt-attribut, men dekorativa bilder ska ha ett tomt (alt=“”). Då hoppar skärmläsaren över dem. Bilder som bär information, som produktfoton och diagram, ska alltid ha en beskrivande text.

Påverkar bildoptimering rankingen direkt?

Indirekt men tydligt. Snabbare laddning förbättrar Core Web Vitals, som ingår i Googles bedömning av sidupplevelsen, och bra alt-texter och filnamn ger dig chansen att synas i Google Bilder. Bildoptimering ersätter inte bra innehåll, men den gör att ditt innehåll inte hålls tillbaka.

Vad kostar det att få hjälp med bild-SEO?

Det beror på hur många sidor och bilder det gäller och om det behövs ändringar i själva sajten. Vi har gått igenom prisnivåerna i vår guide om vad SEO kostar i Malmö. Bygger vi din hemsida ingår bildoptimeringen i det fasta priset.

Källor

• Google Search Central: Image SEO Best Practices
• Google Search Central: Understanding Core Web Vitals
• Google for Developers: WebP Compression Study
• Google for Developers: An image format for the Web (WebP)
• Google for Developers: Write helpful alt text
• MDN: The Image Embed element
• Can I use: AVIF image format
• Riksdagen: Lag (2023:254) om vissa produkters och tjänsters tillgänglighet
• PTS: Web Content Accessibility (WCAG) – Tillgängligt webbinnehåll
• PTS: Så tillgängliga är svenska webbplatser

Rekommendationer

• On-page SEO: så optimerar du varje sida för Google
• Hur fungerar SEO? Enkel förklaring för företagare
• SEO för småföretag – kom igång utan byrå

Created with BabyLoveGrowth, the AI writing tool