Jag bloggar numera på http://blog.dileno.com ».

Att använda bilder som rubriker

en CSS-artikel av Martin S., publicerad den 14 juni 2005
Man har ofta hört att man inte bör använda bilder som rubriker, inte helt sällan i samband med att det är dåligt för placeringen av ens sajt hos sökmotorer. Så kallad Image Replacement, där man använder text tillsammans med bild som rubrik, är numera standard när man ska ha en tillgänglig sida. Det finns några intressanta metoder för detta – några metoder som knappt påverkar sökmotorerna jämfört med om man enbart använt text i sina rubriker.

Bildrubriker i grunden inte lika bra som vanliga rubriker


Tyvärr blir bilder som rubriker aldrig så bra som rena rubriker med enbart text. Det ena som fungerar bekostas av något annat som då inte fungerar. Men det finns metoder som kombinerar bilder med text och dessa används redan på många sajter idag - men det är viktigt att känna till både fördelar och nackdelar med dessa metoder.

Varför är då bilder i grunden inte bra som rubriker? Ta en titt på exemplet nedan:

<h1><img src="gfx/huvudrubrik.gif" alt="Att använda bilder som rubriker" title="Hur man använder bilder som rubriker på ett bra sätt" /></h1>
Till att börja med kan sökrobotar inte se vad som står i bilder. Däremot kan de läsa alt- och title-attributen, men rubriken ovan är inte alls lika effektiv som denna:

<h1>Att använda bilder som rubriker</h1>
<h1>-taggen är ett av de viktigare elementen på en sida när en sökrobot går igenom den. <h1>-taggen har mycket större betydelse än texten som står i alt- och title-attributet i första exemplet, vilket gör att sökroboten inte bryr sig lika mycket om rubriken i exempel 1 som den i exempel 2. Dessutom är det mer kod att gå igenom för sökrobotar i exempel 1.

Förutom sökrobotar får skärmläsare som används av t.ex. dem med synsvårigheter enklare att tolka koden och läsa upp en sida. "Ren" kod är alltid bättre.

För att råda bot på detta så finns det alltså flera metoder man kan använda sig av för att öka betydelsen på rubriker med bilder i, varav FIR (Fahrner Image Replacement), LIR (Leahy/Landgridge Image Replacement) och Phark-metoden är tre av dem.

FIR (Fahrner Image Replacement)


Todd Fahrner har utvecklat en metod för att ersätta text med en bild och använda background-egenskapen (eller background-image) i CSS tillsammans med en extra tagg - <span>-taggen:

<h1><span>Fahrner Image Replacement</span></h1>
CSS-koden ska då se ut så här:

h1 { width: 200px; height: 70px; background: url(fir.gif) no-repeat;
h1 span { display: none; }

Nackdelarna med att använda FIR är nyttjandet av den extra <span>-taggen (som rent semantiskt sett inte betyder någonting) och att varken bild eller text kommer att visas om en användare har stängt av bildvisningen på en sida, men fortfarande har CSS aktiverat i sin webbläsare. FIR används redan på ett gäng olika sajter, varav css Zen Garden är en av dem.

Läs mer om Fahrner Image Replacement här:

LIR (Leahy/Langridge Image Replacement)


Ytterliggare en metod för att använda bilder som rubriker är LIR – Leahy/Langridge Image Replacement döpt efter de två skaparna Seamus Leahy och Stuart Langridge.

Skillnaden med LIR-metoden jämfört med FIR-metoden är att med LIR behövs ingen extra <span>-tagg. I stället sätter man egenskaperna height till 0, overflow till hidden och padding-top till bildens höjd. Så här ser själva uppmärkningen ut:

<h1>Leahy/Langridge Image Replacement</h1>
CSS-koden som används ser ut så här:

h1 { width: 200px; height: 0;
background: url(lir.gif) no-repeat;
overflow: hidden;
padding-top: 70px; /* höjden på bilden */ }

Nackdelarna med att använda LIR är att i IE5 så syns ingenting. Ska man använda LIR-metoden så måste man använda sig av Tanteks Box Model Hack. Precis som med FIR-metoden syns ingenting om användaren har stäng av bildvisningen i sin webbläsare men har CSS på. Den stora fördelen med LIR är dock att man har en ren rubrik utan onödiga element.

Läs mer om Leahy/Langridge Image Replacement här:

Phark-metoden (Accessible Image Replacement)


Phark-metoden, utvecklad av Mike Rundle använder sig i stället av egenskaperna text-indent, background och height:

<h1>Phark-metoden (Accessible Image Replacement)</h1>
CSS:
h1 { height: 70px; text-indent: -9000px; background: url(phark.gif) no-repeat; }
Genom att ange en negativ text-indent försvinner texten utanför skärmen och syns inte– fast den egentligen finns där. I läget där en användare slår av bildvisningen men har CSS aktiverat visas inte texten, precis som med FIR och LIR. Liksom LIR-metoden kräver denna metod inga extra taggar.

En metod inte helt olik Phark-metoden är MIR-metoden som Andy Clarke på And all that malarkey utvecklat.

Exempel på FIR, LIR och Phark-metoden


Jag har gjort en exempelsida där du ser hur de olika metoderna fungerar: Exempel: att använda bilder som rubriker

Läsa mer


Det har skrivits mycket om detta ämne, främst på engelska. Här är fler artiklar jag rekommenderar:

Kom ihåg att rena rubriker är bäst av allt – men att om du använder bilder som rubriker – använd någon av ovanstående metoder (eller någon annan du finner passar bättre). Det gör det lättare för både dig och andra.