I detta kapitel kommer vi gå igenom att icke visuella alternativ måste tillhandahållas för bilder som är menade att förmedla någon information, och några vanliga format att spara bilder i för webben.

I stort sätt använder alla webbplatser sig utav bilder, det är alltså en viktig del av en webbplats och bör också användas för att ge webbplatsen liv och göra den lite roligare att titta på. Detta betyder inte att du ska överanvända bilder, då många bilder betyder längre laddningstid och serverbelastning (när du väl publicerat webbplatsen alltså).

img-elementet

För att inkludera bilder i HTML-dokument så används img-elementet. img är en förkortning av image, som på svenska blir ”bild”. img-elementet kan användas såhär:

<img src="http://example.org/img/far.png" alt="Fåren på Kolmårdens djurpark lever i ett skjul utanför delfinernas pool." title="Fåren på Kolmårdens djurpark">

Som du ser så består img av en rad attribut, oftast är det src och alt som är av intresse. Vi ska nu gå igenom dem, en efter en.

src-attributet

Med src-attributet så talar du om för webbläsaren var bilden ligger, i exemplet ovan så befinner sig bilden på img/far.png på servern example.org. Vi kommer gå in djupare på hur adresser till filer och länkar fungerar i kapitlet som berör länkar. Fast så mycket nytt är det egentligen inte, href-attributet i link-element som används för stilmallar fungerar ju på samma sätt. Så om bilden ligger i samma mapp som webbsidan är räcker det med filnamnet.

alt-attributet

alt-attributet syfte är att specificera en alternativ text då t.ex.:

• Bilden inte kunde nås på platsen som angivits i src-attributet.
• Bilden är sparad i ett sådant bildformat som besökarens webbläsare inte stödjer.
• En besökare som använder en icke-grafisk webbläsare, t.ex. en textbaserade eller så är kanske besökaren en sökrobot från t.ex. Google eller Yahoo.
• En besökare som är blind eller har nedsatt syn och måste använda sig utav en skärmläsare som inte kan förklara bilden.
• En besökare med långsam uppkoppling (kanske inte så vanligt länge, möjligen från t.ex. mobiltelefoner) eller av någon anledning har inaktiverat bilder i sin webbläsare.
• En besökare som skriver ut sidan och inte vill slösa med färg.

alt-attributet specificera som sagt en alternativ text, vilket innebär att den bara visas när bilden inte visas. Den används istället för bilden helt enkelt. Den alternativa texten ska inte beskriva bilden! Det ska beskriva bildens mening på sidan, bildens funktion på sidan i andra ord. Notera att ”på sidan” är med här, samma bild kan ha olika funktion på olika sidor. Det är funktionen den fyller just här och nu. Eller som HTML5-specifikationen säger ”att byta ut alla bilder mot deras alt-text ska inte ändra sidan mening”. En bra tumregel är att alt-texten bör vara det du skulle säga till någon om du skulle läsa upp innehållet på sidan över telefon. Här följer några riktlinjer för specifika fall.

Dekorativa bilder ska inte ha något alternativ text. Ofta ska faktiskt bilder ha en tomt alt-attributvärde (alt="") eftersom att många bilder på webbplatser endast används i dekorativt syfte. Om bilden inte tillför någon annan funktion förutom att vara dekorativ så ska den helt enkelt inte ha något alt-attributvärde.

Bilder som förtydligar textens innehåll ska antagligen inte ha något alternativ text. Även om bilden har en mening på sidan finns det ingen mening att tala om samma sak två gånger. Låt oss säga att vi har en text om hur en traktor är uppbyggd och fungerar, och under denna text en bild på allt detta för att det ska vara lättare att förstå texten och det ser lite roligare ut med ett par bilder utspridda längs med texten. Om bilden inte har någon egen ny information så är det bara onödigt att upprepa sig, om texten inte direkt riktar sig mot bilden. Vi får försöka att tänka ur besökarens perspektiv (utan bilder), om bilden inte visas ersätts den med alt-värdet. Om vi skulle göra detta i vårt traktorexempel skulle det bara verka förvirrande eftersom att vi redan har sagt allt och sedan säger det en gång till.

Använd inte meningslösa alternativa texter. Det låter självklart, men man ser allt för många alt-attribut som tilldelats värden så som ”röd boll”, ”en tv”, ”700 får” o.s.v. Om bilder används i dekorativ syfte ska de som sagt ha ett tomt alt-attributvärde.

Använd knapptexten för knappar som alternativa texter för knappar och liknande för logotyper. Ännu en självklarhet kan tyckas. Om du har en knapp på din sida som t.ex. finns på många forum eller webbaserade mejlsystem så som ”skicka”, ”ändra”, ”svara” o.s.v. Då ska du använda alt-texten ”skicka”, ”ändra”, respektive ”svara” för dessa knappar. Du ska oftast inte heller försöka ersätta knappar med så kallas ASCII-konst. Vilket innebär att du ”ritar” med olika tecken, t.ex. att istället för ”nästa” som alt-text för en nästa-knapp använda alt="-->". Samma för logotyper, använd t.ex. företagets namn som alt-text.

Tänk även på att alt-texten är till för att hjälpa besökaren och ska fungera i den flytande texten. Om det helt plötsligt dyker upp ett ord mitt i texten som inte har med denna att göra eller att det helt plötsligt kommer upp en mening om något helt annat mitt i en text är det antagligen någon som inte tänkt tillräckligt mycket när denna någon tilldelat alt-texten. Så se till att alt-texten passar in i texten när den väl används. Som t.ex:

<p> Min hamster heter Hubert och är 18 år.

<img src="hubertgullet.png" alt="En bild på min hamster Hubert">

Han gillar gräs och luddiga sudd, tyvärr blir han sjuk av det senare.</p>

Såhär visar din webbläsare ovanstående, då vi inte har någon bilder som heter hubertgullet.png kommer alt-texten visas istället:

Min hamster heter Hubert, och är 18 år. Han gillar gräs och luddiga sudd, tyvärr blir han sjuk av det senare.

Förhoppningsvis visade din webbläsare följande, men den kan ju hantera alt-texten på ett egendomligt sätt:

Min hamster heter Hubert, och är 18 år. En bild på min hamster Hubert. Han gillar gräs och luddiga sudd, tyvärr blir han sjuk av det senare.

Om du läser den korta texten får början till slut ser du att, det är något som inte stämmer här! Hur har ”En bild på min hamster Hubert.” kommit dit och vad tillför den till texten? Om vi istället skulle använda alt="Hubert är en ovanligt liten och lurvig filur." skulle vi få:

Min hamster heter Hubert, och är 18 år. Hubert är en ovanligt liten och lurvig filur. Han gillar gräs och luddiga sudd, tyvärr blir han sjuk av det senare.

Så! Perfektion. Nästan i alla fall, om meningen med bilden var att visa hur Hubert ser ut så har vi ju lyckats ganska bra. Nu vet du ju utan att ha sett bilden att Hubert är väldigt liten och lurvig. Om texten istället skulle vara en uppsats om hamstrar skulle vi antagligen behövt en mera ingående alternativ text (eller bara lagt till mera om det i texten kanske skulle vara en alternativ lösning). Förlita dig aldrig helt på bilder i alla fall. Vi säger det ännu en gång: den alternativa texten ska återspegla bildens funktion på sidan.

Som avslutande ord vill vi bara tillägga att: ja, det är ofta mycket svårt att hitta på bra alt-texter. Du är inte ensam om att tycka det.

Några referenser och vidare läsning om alt-texter:

• HTML5-specifikationens långa utlägg om ämnet, mycket läsvärd och grundlig!
• Mini FAQ about the alternate text of images
• Guidelines on alt texts in img elements
• Appropriate Use of Alternative Text
• Use the alt attribute to describe the function of each visual

title-attributet (och ytterligare ett problem med IE)

title-attributet ger en kortare beskrivning som kan tänkas behövas för att förklara t.ex. vad det är på bilden. Den visas i grafiska webbläsare när muspekaren hålls över bilden en kortare stund. Ett exempel på title-text är "Jag och min hamster, 2015-12-20". Texten behöver till skillnad mot alt inte beskriva bildens funktion, det är bara en (frivillig) text med lite mer information. Tänk på att det är enkelt att missa title-texten eftersom att den bara visas när muspekaren hålls över bilden, som är det är viktig information som alla troligen vill läsa ändå är det kanske en bättre idé att placera den i den vanliga texten.

Du är väl vid det här laget ganska trött om på att höra om IE-buggar, men: en sak som man bör tänka på när det gäller alt och title är att Microsoft har valt att alt inte enbart betyder alternativ text i IE7 och tidigare, utan även fyller samma funktion som title. Så alt-texten visas på samma sätt som title gör i andra webbläsare. Detta är IE7 och tidigare ganska ensamma om. Alla standardmedvetna webbläsare hanterar alt-attributet på korrekt sätt. Det är bara att ignorera hur dessa IE-versioner gör och följa reglerna vi just gick igenom. Vi nämner detta bara på grund av att det har lett till en del förvirring hur alt och title ska användas, men från och med IE8 är detta problem borta så ju längre tid det går ju mindre bör du störas av detta.

Bildformat

När det kommer till bildformat är det främst Portable Network Graphics (PNG) och Joint Photographic Experts Group (JPEG) som används idag. Graphics Interchange Format (GIF) var populärt förut, och används även nuförtiden om bilderna ska vara animerade; men har en rad andra begränsningar som gör de två tidigare namnda formaten hellre används. Så vi kommer främst att fokusera på PNG och JPEG.

Vad är det ett s.k. bildformat? Jo, det är inget märkvärdigare än på vilket sätt bilden sparas. En dator hanterar ju allt som ettor och nollor som du säkert hört många gånger. Så den kan inte bara ”spara bilder” på (ex.) hårddisken – de måste sparas i någon fördefinierat format, ett ”bildformat”. Vad skiljer då bildformat från varandra, varför räcker det inte bara med ett format? Jo, förenklat är de bra på olika saker. Vissa format klarar av saker som andra inte gör o.s.v.

Först och främst finns det två grupper som bildformaten delas upp i: är komprimeringen förstörande eller icke-försörande (alt. bevarande)? Eller med andra ord: sparas alla detaljer på bilden eller ”slängs” de bort för att spara plats? JPEG har förstörande komprimering medan PNG har en icke-förstörande variant. Det betyder att JPEG-bilder oftast får mindre filstorlek men har sämre kvalité, medan PNG har en (inte nödvändigtviss mycket) större filstorlek och bättre kvalité. (Tänk på att detta är en grov förenkling.)

Så vid val av bildformat (för webben) är det främst balansen mellan kvalité eller filstorlek som är det avgörande valet. Vissa bilder, som t.ex. fotografier kan innehålla väldigt många detaljer och får därför en väldigt stor filstorlek om de skulle sparas med en icke-förstörande algoritm. Då kan det vara lämpligt att spara bilden som en JPEG-bild, så tillåter vissa detaljer att försvinna och resulterar i att filstorleken blir mindre. Till vissa bilder är det dock inte acceptabelt att detaljer försvinner, t.ex. serier. Då kan ett format som sparar alla detaljer användas istället, som t.ex. det tidigare nämnda PNG.

Så för att sammanfatta: är detaljerna inte viktiga på bilden (t.ex. i många fall foton): använd JPEG. Är detaljerna viktiga (t.ex. om bilden innehåller text): använd PNG. Det handlar ju trots allt om bilder, så några exempel på hur det ser ut när JPEG ”struntar i detaljerna” skulle kanske vara hjälpsamt. Låt säga att du valt att spara en bild som JPEG, när du sparar bilden får du ofta bestämma hur många detaljer som ska bevaras. (Ofta någon skala från 0 till 100 procent.) Ta följande bild som exempel, som är tagen av en av författarna till boken.

Som du ser får varje bild sämre och sämre kvalité, men filstorleken blir bättre och bättre (d.v.s. minskar). Det finns ingen komprimeringsgrad som är rätt och fel här, det är vad du tycker ser lämpligt ut. Det finns inte heller några värde som är bättre än något annat för alla bilder, det som gäller här är att testa sig fram oftast. Låt oss ta en närmare titt på bilden med 75-procentig kvalité:

Det är väldigt tydlig här att många detaljer redan har försvunnit, det är oftast runt skarpa kanter det först visar sig. Vi tycker dock att den icke-inzommade bilden ser helt okej ut. Då den har en ganska mycket mindre filstorlek än den med 100-procentig kvalité så skulle det nog bli vårt val om vi valde mellan dessa.

Okej, då var det avklarat. Nu till PNG och icke-förstörande komprimering. Det är som sagt vikigt att inte använda förstörande komprimering då detaljerna är viktiga, ibland måste filstorleken ofras. Ta följande exempel (denna gång ett urdrag från en inlämninngsuppgift som en av författarna blivit tilldelad):

Det ser helt okej ut. Låt säga att någon försökte spara in på filstorleken genom att spara den som en JPEG-bild med 50-procentig kvalité:

Som du ser lider texten av samma problem som blomman i exemplet ovanför detta, men här är det mycket tydligare. Filstorleken är mindre (85K mot 26K), men bilden är oanvändbar. Vi testade även att köra PNG-bilden genom program som är gjorda för att minimera filstorleken på sådana bilder (bl.a. PNGOUT och pngcrush), men lyckades inte få den mindre än 71K.

För att spara bilderna användes Gimp.

Några andra format

Det är framför allt de tidigare nämnda formaten som de flesta webbläsare har stöd för, men det finns fler. Där bland SVG som är ett vektorgrafikformat. Vi kan inte gå igenom alla bildformat då det finns massor av dem (inte alla är lämpade för webben dock), men på Wikipedia finns det mer information om dem, t.ex: SVG på Wikipedia, PNG på Wikipedia och så vidare.