Bild-SEO gör webbplatsens bilder lättare att förstå för både människor och sökmotorer. Arbetet omfattar allt från relevant bildkontext och tillgänglig alt-text till format, komprimering, responsiva bildvarianter och rätt laddningsprioritet.
För företag med många produktbilder, redaktionellt innehåll eller komplexa webbplattformar är bildoptimering sällan en enskild punktinsats. Den behöver fungera i publiceringsflödet, CMS:et och den tekniska leveransen. Vi på TribuSoft ser därför bild-SEO som ett gemensamt arbete mellan innehåll, SEO, tillgänglighet och webbutveckling.
Bild-SEO är optimering av bilder så att de passar sidans innehåll, kan uppfattas av fler användare och levereras effektivt i webbläsaren. Målet är inte att fylla varje bild med sökord. Målet är att varje meningsbärande bild ska bidra med rätt information, utan att göra sidan onödigt tung.
Bilder kan visas i Google Images, vanliga sökresultat och andra visuella sökfunktioner. Google använder bildens innehåll tillsammans med alt-text, HTML, filnamn och sidans omgivande innehåll för att tolka bilden. En relevant bild på en relevant sida ger därför mer värde än en tekniskt väloptimerad men generisk bild.
Bild-SEO är en viktig del av On-page SEO för relevanta och väloptimerade sidor. Här ligger fokus på bilden som medium: dess syfte, tillgänglighet, sökbarhet och påverkan på laddningen.
Meningsbärande bilder bör finnas i vanliga HTML-bildelement, normalt img, med en faktisk bild-URL i src-attributet. Bilder som endast ligger som CSS-bakgrunder hanteras inte på samma sätt och är ett sämre val när bilden behöver vara både tillgänglig och sökbar.
Google bedömer inte en bild isolerat. En produktbild får mer begriplig kontext när den ligger nära produktnamn, egenskaper och relevant brödtext. På samma sätt blir en skärmdump mer användbar när den förklaras i anslutning till instruktionen den illustrerar.
Filnamnet kan ge en lätt ledtråd om motivet. Välj därför korta och beskrivande namn vid nypublicering, exempelvis svart-ladersoffa-med-schäslong.webp i stället för IMG_4839.webp. Att byta filnamn på ett stort befintligt bibliotek kräver däremot en plan, eftersom det skapar nya bild-URL:er och kan påverka cache, hänvisningar och befintlig synlighet.
Alt-attributet är den tekniska HTML-lösningen. Alt-text är texten i attributet. Den ska förmedla den information eller funktion som går förlorad när bilden inte kan ses. En bra alt-text är därför beroende av sammanhanget, inte av en bestämd teckengräns.
Sökord får förekomma när de naturligt beskriver bilden och sidans ämne. Att upprepa sökord i varje alt-text gör däremot sällan bilden mer användbar. Undvik också att inleda med ”bild av”, eftersom hjälpmedel redan meddelar att det är en bild. Nämn medietypen när den är relevant, till exempel om det är en skärmdump eller ett fotografi.
En informativ bild behöver en kort beskrivning av det som är viktigt i just sidans sammanhang. En bild av en blå vinterjacka på en produktsida kan exempelvis beskrivas som ”Blå vadderad vinterjacka med huva och dragkedjefickor”.
En rent dekorativ bild ska normalt ha ett tomt alt-attribut: alt=””. Då kan skärmläsare ignorera bilden. Att utelämna alt-attributet helt är inte samma sak och kan skapa en sämre upplevelse.
När en bild fungerar som länk eller knapp ska textalternativet beskriva vad länken gör eller vart den leder. En förstoringsglasikon kan till exempel ha alt-texten ”Sök”, inte ”Förstoringsglasikon”.
Viktig text bör helst finnas som riktig HTML-text, inte bara inbäddad i en bild. Det gör innehållet mer tillgängligt, anpassningsbart och lättare att tolka.
Diagram, grafer och infografik kräver ofta mer än en kort alt-text. Sammanfatta huvudpoängen i alt-texten och ge en längre förklaring, tabell eller motsvarande data i sidinnehållet. Då kan alla användare ta del av underlaget.
Bildens pixelmått, visade storlek och filstorlek är olika saker. Pixelmått är bildens inneboende bredd och höjd. Den visade storleken styrs av sidans layout. Filstorleken är mängden data som besökaren laddar ned. En bild kan alltså visas liten men ändå vara onödigt tung om originalet är för stort.
Skala bilder till rimliga dimensioner före uppladdning eller i den automatiska bildleveransen. Att ladda en mycket stor originalfil och bara minska den visuellt med CSS slösar data. Komprimera sedan bilden genom att väga filstorlek mot synlig kvalitet. Det finns ingen universell kvalitetsnivå eller viktgräns som passar alla bilder.
En mobil besökare behöver sällan ladda samma bildvariant som en stor stationär skärm. Med srcset och sizes kan webbläsaren välja en passande fil utifrån skärm, pixeltäthet och layout. Med picture kan ni dessutom erbjuda olika format eller olika beskärningar för olika lägen.
En grundimplementation kan innehålla img, src, alt, width, height, srcset och sizes. Bildens width- och height-attribut ska ange rätt proportioner. Då kan webbläsaren reservera utrymme innan bilden laddas och minska risken för layoutförskjutningar, även kallat CLS.
Bilder är ofta bland sidans största resurser. På många landningssidor är huvudbilden i första vyn också sidans största synliga element, vilket kan påverka Largest Contentful Paint, LCP. För den typen av bild spelar rätt dimensioner, filstorlek och tidig upptäckt stor roll.
Lazy loading innebär att bilder laddas först när de närmar sig besökarens vy. Det passar normalt bilder längre ned på sidan, exempelvis i produktgallerier, artikellistor eller innehållssektioner. Bilder som syns direkt när sidan öppnas ska normalt inte lazy-loadas.
I vissa fall kan fetchpriority=”high” hjälpa webbläsaren att prioritera en viktig LCP-bild. Attributet ska användas selektivt. Om många resurser får hög prioritet konkurrerar de i stället med varandra.
En genomtänkt sidstruktur, crawlbar HTML och tydlig bildkontext räcker långt för de flesta webbplatser. Bildtexten kan ge läsaren extra information och skapa relevant kontext, men den behöver inte upprepa alt-texten ord för ord. Bildens title-attribut är inte heller en ersättning för alt-text.
En bildwebbplatskarta kan vara relevant om bilder är svåra att upptäcka, till exempel i vissa JavaScript-baserade gallerier eller i stora externa bildlösningar. Den garanterar inte indexering och behövs sällan som första åtgärd när bilder redan finns i tydlig HTML.
Strukturerad data och metadata kan vara relevanta för vissa innehållstyper eller för licens- och rättighetsinformation. De är inte en universell lösning för bättre bildranking. Om ni använder ett separat bild-CDN bör bilddomänen vara möjlig att följa upp, och samma bild bör behålla en stabil URL när den återanvänds.
När webbplatsen har tusentals bilder räcker det inte med manuella punktinsatser. Då behöver bildoptimeringen byggas in i CMS, produktflöden och publiceringsrutiner. Produktbilder behöver exempelvis konsekventa format, automatiska storleksvarianter och tydliga regler för vad alt-texten ska beskriva.
AI kan hjälpa till att inventera bildbibliotek, klassificera motiv och föreslå metadata. Vi ser det som ett stöd, inte som en färdig publiceringslösning. Automatiskt genererad alt-text kan missa produktvariationer, text i bilden, bildens funktion eller den affärskontext som användaren behöver.
Vid byte av CMS, domän, CDN eller webbplattform behöver bilder finnas med i migrationsplanen. Vi kontrollerar bland annat att bild-URL:er fungerar, att viktiga resurser inte blockeras, att relevanta bilder finns i crawlbar HTML och att den nya leveransen inte försämrar laddningen.
Följ upp bild-SEO på flera nivåer. Google Search Console kan visa utvecklingen för exponeringar och klick från bildsökning. Tekniska verktyg som Lighthouse och PageSpeed Insights visar bland annat överförd bilddata, onödigt stora bilder och möjliga LCP- eller CLS-problem.
Bedöm också landningssidornas organiska prestation och hur bilderna stödjer användarens uppgift. För en e-handel kan rätt produktbilder och snabb leverans vara viktigare än enskilda bildsökningar. För en innehållssajt kan däremot synlighet i visuella sökresultat ha en större roll.
Vi prioriterar normalt efter påverkan, omfattning och genomförbarhet. Det innebär att en tung hero-bild på en central sida ofta går före ett omfattande projekt med filnamnsändringar i ett äldre arkiv.
Börja med åtgärderna som ger störst nytta för användbarhet och prestanda. Bygg sedan vidare med automatisering och mer specialiserade förbättringar där det finns ett verkligt behov.
Hos oss på TribuSoft kombinerar vi innehållsarbete med teknisk implementation. Vi kan inventera ett befintligt bildbibliotek, identifiera vilka sidor och mallar som ska prioriteras och omsätta rekommendationerna i CMS, kod och bildleverans.
För etablerade företag, e-handlare och omnichannel-aktörer är vår roll ofta att få flera delar att fungera tillsammans. Vi arbetar med alt-text och bildkontext, men också med responsiva varianter, komprimering, CDN, spårning, prestandakontroll och kvalitetssäkring vid migreringar.
Bild-SEO är sällan en fristående lösning. När den är rätt genomförd stärker den sidan, användarupplevelsen och det bredare arbetet med organisk synlighet.
Bildkomprimering minskar ofta filstorleken. Bild-SEO är bredare och omfattar även bildens relevans, alt-text, HTML, format, dimensioner, responsiv leverans, laddningsprioritet och uppföljning.
Nej. Informativa bilder ska ha en beskrivande alt-text. Dekorativa bilder ska normalt ha ett tomt alt-attribut, alt=””. Bilder som är länkar eller knappar ska beskriva sin funktion eller destination.
Nej. WebP är ofta ett bra webbformat, men det bästa valet beror på bildtyp, transparens, kvalitet, kompatibilitet och ert arbetsflöde. AVIF, JPEG, PNG och SVG har olika styrkor.
Normalt inte. Bilder som syns direkt när sidan öppnas, särskilt sannolika LCP-bilder, bör laddas direkt. Lazy loading passar främst bilder längre ned på sidan.
Ett beskrivande filnamn ger en mindre ledtråd om bildens innehåll. Det är bra praxis för nya bilder, men sidans innehåll, bildkontext och tillgänglighet är viktigare än att ändra filnamn i ett helt befintligt arkiv.
Inte alltid. Den kan hjälpa när bilder är svåra för Google att upptäcka, exempelvis i vissa gallerier eller JavaScript-lösningar. Bilder i tydlig och crawlbar HTML behöver ofta ingen separat bildwebbplatskarta.
Har ni tunga bilder, bristande alt-texter eller en plattform där bildhanteringen inte skalar? Vi hjälper er att prioritera rätt åtgärder och få innehåll, tillgänglighet, SEO och teknik att fungera tillsammans.
Kontakta oss för en kostnadsfri offert eller för att inleda en dialog om er digitala tillväxt.
