Så skriver du bildfilnamn som hjälper SEO och tillgänglighet

Bildfilnamn spelar roll, men inte så mycket som många påstår

Bildfilnamn är en sådan liten webbdetalj som ofta omges av alltför stor säkerhet. Vissa team ignorerar dem helt och publicerar IMG_7421.jpg. Andra gör varje produktbild till en liten nyckelordsessä.

Den användbara medelvägen är enkel: skriv filnamn som tydligt beskriver bilden, hjälper människor att hantera resurser och ger sökmotorer lite extra sammanhang. Förvänta dig inte att filnamn ska rädda svagt innehåll, saknad alt-text, långsamma bilder eller en förvirrande sida.

Google rekommenderar uttryckligen att använda korta, beskrivande filnamn för bilder. Det är ett gott råd. Det är också ett begränsat råd. Ett filnamn är en kontextuell ledtråd bland många: omgivande text, sidtitel, strukturerad data, bildtexter, alt-text, länkar, bildkvalitet och om bilden faktiskt är användbar för sidan.

Tillgänglighet fungerar på liknande sätt. Ett bra filnamn är ingen ersättning för alt-text. Men det kan minska skadan när något går fel, och det gör livet enklare för redaktörer, utvecklare och användare som laddar ned, sparar eller delar filen.

Den korta regeln

Använd ett filnamn som besvarar den här frågan:

Om någon bara såg filnamnet, skulle personen då få en ungefärlig uppfattning om vad bilden innehåller?

Bra:

• red-running-shoes-side-view.jpg
• checkout-error-message-mobile.png
• oak-dining-table-120cm-walnut.jpg
• team-planning-workshop-whiteboard.webp

Dåligt:

• IMG_7421.jpg
• final-final-v3-new.jpg
• best-cheap-running-shoes-buy-online-discount-sale.jpg
• screenshot.png

Målet är inte poesi. Målet är användbar specificitet.

Vad ett bra bildfilnamn gör för SEO

Ett bra filnamn hjälper sökmotorer att förstå bilden, särskilt i sammanhang som bildsökning. Det kan förstärka sidans ämne och motivet i det visuella innehållet.

Men det är en svag signal jämfört med grunderna:

• Bilden visas på en relevant sida.
• Den omgivande texten förklarar eller stöder bilden.
• Bilden har lämplig alt-text när det behövs.
• Bilden kan genomsökas och indexeras.
• Filen är inte onödigt stor.
• Sidan laddar tillförlitligt.

Om du förbättrar bilder för organisk sökning, börja med sidans relevans och nytta. Rensa sedan upp filnamnen. Titta därefter på komprimering, format, dimensioner, lazy loading och strukturerad data där det är relevant. Vår guide till bildformat 2026 är ett användbart komplement om din namnupprensning blir en bredare genomgång av bildprestanda.

Vad ett bra bildfilnamn gör för tillgänglighet

Strängt taget är filnamn inte den huvudsakliga tillgänglighetsmekanismen för bilder. Det är alt-text.

Om en bild förmedlar information bör attributet alt ge textalternativet. Om bilden är dekorativ bör attributet alt vanligtvis vara tomt: alt="". Om bilden är en länk eller en knapp bör den alternativa texten beskriva åtgärden eller målet, inte bara pixlarna.

Vi gick igenom detta i detalj i en pragmatisk guide till alt-text för bilder 2026, och det är värt att behandla alt-text som en separat redaktionell uppgift.

Så varför bry sig om filnamn för tillgänglighet över huvud taget?

Därför att filnamn ofta dyker upp i upplevelsens ytterkanter:

• Vissa kombinationer av hjälpmedel och webbläsare kan visa ett filnamn när alt-text saknas.
• Nedladdade bilder behöver begripliga namn utanför webbsidan.
• CMS-mediebibliotek är lättare att granska när namnen är beskrivande.
• Redaktörer är mindre benägna att bifoga fel bild när filer har tydliga namn.
• Trasiga bilder och felsökningsvyer är lättare att tolka.

Ett filnamn gör inte en otillgänglig bild tillgänglig. Men ett dåligt filnamn kan göra fel mer förvirrande.

En praktisk namnkonvention

Använd detta standardmönster:

subject-detail-context.ext

Exempel:

• espresso-machine-steam-wand-closeup.jpg
• pricing-table-enterprise-plan-desktop.png
• garden-chair-green-metal-front-view.webp
• password-reset-email-example.png

För produkter fungerar en något mer strukturerad version ofta bättre:

brand-product-model-color-view.ext

Exempel:

• acme-trail-jacket-blue-front.jpg
• northline-desk-lamp-brass-side.webp
• terra-ceramic-mug-white-top-view.jpg

För redaktionella bilder:

topic-specific-scene.ext

Exempel:

• remote-team-video-call-laptop.jpg
• city-bike-lane-rain-evening.jpg
• developer-debugging-http-headers-terminal.png

För UI-skärmdumpar:

feature-state-device.ext

Exempel:

• checkout-validation-error-mobile.png
• account-settings-two-factor-enabled-desktop.png
• analytics-dashboard-empty-state-tablet.png

Det här handlar inte om rigid taxonomi. Det handlar om att ta bort tvetydighet.

Använd bindestreck, gemener och vanliga ord

För publika webbresurser bör du föredra:

• Gemena bokstäver
• Bindestreck mellan ord
• Inga mellanslag
• Inga understreck
• Ingen interpunktion utöver bindestreck
• Inga specialtecken om inte ditt system kräver dem

Bra:

blue-cotton-shirt-front.jpg

Undvik:

Blue Cotton Shirt (Front).jpg

blue_cotton_shirt_front.jpg

bluecottonshirtfront.jpg

Bindestreck är lättare att läsa, lättare att kopiera och allmänt förstådda som ordavskiljare i URL:er. Gemener undviker också irriterande problem med skiftlägeskänslighet mellan lokal utveckling, Linux-servrar, CDN:er och objektlagring.

Håll filnamn korta, men inte vaga

Ett filnamn bör vara tillräckligt långt för att beskriva bilden och tillräckligt kort för att förbli läsbart.

Ett användbart intervall är vanligtvis 3 till 8 ord före filändelsen.

För vagt:

shoes.jpg

Bättre:

red-running-shoes-side-view.jpg

För mycket:

best-lightweight-red-running-shoes-for-marathon-training-side-view-discount.jpg

Bättre:

red-marathon-running-shoes-side-view.jpg

Om frasen låter som en sökfråga skriven av en desperat marknadsförare är den förmodligen för lång.

Fyll inte bildfilnamn med nyckelord

Nyckelordsstoppning i filnamn är vanligtvis ett tecken på att sidan inte gör sitt jobb.

Dåligt:

best-seo-agency-seo-services-seo-consultant-seo-company.jpg

Detta är inte användbart för användare. Det är inte användbart för redaktörer. Det är inte en seriös tillgänglighetspraxis. Det får också din webbplats att verka av lägre kvalitet.

Använd det naturliga namnet på det som visas i bilden. Om ett nyckelord passar eftersom det korrekt beskriver bilden, använd det. Om det inte gör det, utelämna det.

Om bilden till exempel är ett foto av en svart skinnsoffa är black-leather-sofa-three-seat.jpg bra. best-modern-luxury-living-room-furniture-online.jpg är inte ett filnamn; det är ett rop på hjälp.

Matcha filnamnet med den faktiska bilden

Det låter självklart, men bildbibliotek glider isär över tid. En fil som heter homepage-hero-new.jpg kan till slut visa en annan produkt, en annan person eller en helt annan kampanj.

Det skapar två problem.

För det första får sökmotorer och användare inkonsekventa signaler. För det andra slutar team lita på mediebiblioteket.

Om bildens betydelse ändras, byt namn på den före publicering. Om ditt CMS eller CDN gör namnbyte svårt, överväg att använda stabila resurs-ID:n internt samtidigt som du fortfarande genererar beskrivande publika filnamn där det är möjligt.

Ett bra internt arbetsflöde kan vara:

1. Ladda upp originalresursen.
2. Ta bort onödig metadata om integritet spelar roll.
3. Byt namn på den variant som används på webbplatsen.
4. Exportera i rätt dimensioner och format.
5. Lägg till alt-text och bildtexter i CMS:et.

Om foton kommer från användare, personal eller fältteam, kom ihåg att filnamn bara är en integritetsyta. EXIF-data kan innehålla tidsstämplar, kameradetaljer och platsinformation. Se vår guide om hur du tar bort EXIF-metadata innan du delar foton online innan du publicerar känsliga bilder.

Separera filnamn från alt-text

Ett vanligt misstag är att använda samma fras för filnamnet och alt-texten.

Ibland är det acceptabelt. Ofta är det bara lathet.

Filnamn:

red-running-shoes-side-view.jpg

Bra alt-text på en produktsida:

Red running shoe shown from the side, with a white foam sole and black laces.

Bra alt-text på en miniatyrbild för färgväljare:

Red

Bra alt-text om bilden är dekorativ:

alt=""

Filnamnet identifierar resursen. Alt-texten hjälper användaren i sitt sammanhang. Det är närliggande uppgifter, inte identiska uppgifter.

Namnge bilder för olika typer av webbplatser

E-handel

Inkludera produkttyp, viktig variant och vy.

Exempel:

• linen-shirt-white-front.jpg
• linen-shirt-white-back.jpg
• linen-shirt-white-collar-detail.jpg

Undvik att lägga till priser, kampanjer eller tillfälligt kampanjspråk. Sådant ändras för ofta.

Bloggar och redaktionella webbplatser

Beskriv scenen eller konceptet, inte artikelrubriken.

Bra:

designer-reviewing-mobile-layout.jpg

Mindre användbart:

ultimate-guide-to-mobile-ux.jpg

Bilden kan återanvändas, beskäras eller syndikeras. Ett scenbaserat namn åldras bättre.

SaaS och dokumentation

Namnge skärmdumpar efter funktion, tillstånd och plattform.

Exempel:

• billing-settings-payment-method-empty-state.png
• project-dashboard-filter-menu-open.png
• api-token-created-confirmation-modal.png

Det gör dokumentationsuppdateringar mycket mindre smärtsamma.

Lokala företag

Använd tjänst, objekt eller plats när det verkligen är synligt och relevant.

Exempel:

• bakery-window-display-sourdough-loaves.jpg
• dental-clinic-reception-area-berlin.jpg
• plumber-repairing-kitchen-sink.jpg

Lägg inte till stadsnamn i varje fil om bilden inte stöder det. Ett foto av en skiftnyckel är inte meningsfullt wrench-london.jpg.

Hur är det med bilddimensioner och versioner?

Undvik att lägga dimensioner i det huvudsakliga beskrivande namnet om inte ditt system behöver det.

Bättre resursfamilj:

• red-running-shoes-side-view.jpg
• red-running-shoes-side-view-800w.jpg
• red-running-shoes-side-view-1600w.jpg

Om ditt byggsystem genererar responsiva varianter automatiskt, låt det lägga till bredder eller hashar. Underhåll inte dussintals filnamn manuellt om du inte tycker om framtida arkeologi.

Innehållshashar fungerar bra för cachelagring:

red-running-shoes-side-view.a8f31c.webp

Den beskrivande delen finns fortfarande kvar. Hashen tjänar maskinen.

En snabb checklista före publicering

Innan du publicerar en bild, fråga:

• Beskriver filnamnet bilden på ett enkelt språk?
• Är det skrivet med gemener och separerat med bindestreck?
• Är det fritt från nyckelordsstoppning?
• Undviker det tillfälliga ord som new, final eller v2?
• Är alt-texten begriplig i sidans sammanhang?
• Är filformatet och filstorleken lämpliga?
• Har känslig metadata tagits bort där det behövs?

Om du kan svara ja på detta är filnamnet förmodligen tillräckligt bra. Lägg inte 20 minuter på att namnge en dekorativ avdelare. Lägg däremot 20 sekunder på att hindra DSC0038.jpg från att bli en permanent publik URL.

<!-- tool-cta:start -->

💡 Prova detta: Normalisera filnamn till lowercase-kebab-case i bulk med Case Converter, så att dina bildnamn förblir konsekventa genom hela projektet.

<!-- tool-cta:end -->

Den stillsamma fördelen: bättre team

SEO-värdet av bildfilnamn är måttligt. Det operativa värdet är större.

Bra filnamn gör mediebibliotek sökbara. De minskar dubblettuppladdningar. De hjälper designers, utvecklare, marknadsförare och supportteam att prata om samma resurs utan att öppna sex förhandsvisningar. De gör granskningar snabbare.

Det är den verkliga anledningen att standardisera bildnamn. Sökmotorer gynnas av tydlighet, men det gör människor också. Och människor är oftast där arbetet brister först.