Bilder är en naturlig del av webbsidor och utan dem så skulle upplevelsen av Internet inte vara densamma. Det finns två kategorier som bilder på Internet kan klassificeras inom: bilder som inlineelement och som bakgrundsbilder. I detta avsnitt tar vi upp hur du infogar bilder i löpande text med hjälp av img elementet. Utöver detta ger vi tips på hur du förbereder bilder för publicering på webbsidor. Innan vi tittar närmare på hur du inkluderar bilder på webbsidor så är det viktigt att känna till olika bildformat och hur du optimerar bilder för webben.
Det är inte endast kod som du behöver optimera utan även det statiska innehållet som bland annat inkluderar bilder. Det finns flera anledningar till att optimera bilder innan publicering på webben:
- Upplevelse. När du optimerar en bild för webben genom exempelvis justering av ljusstyrka, kontrast, etc. så ökar sannolikheten att ge besökare en bättre upplevelse med anledning av att bilden ser bättre ut än originalbilden.
- Hastighet. En optimerad bild har mindre filstorlek och laddar snabbare på webben än originalbilden.
- Anpassning. Idag använder många smartphones och för att bilden ska se bra ut på dessa så blir det en nödvändighet att optimera bilder inte endast för skrivbordsdatorer utan även för smartphones.
Det finns flera olika typer av bilder som du kan publicera på webben. Fotografier är en typ av bilder som reflekterar verkligheten och används ofta som komplement till en text. Se följande exempel som visar Golden Palace Jewelry Wholesale Market i Shanghai:
Sedan har du illustrationer som används för att att visuellt kommunicera information på ett specifikt sätt, exempelvis används dessa i samband med rättegångar när fotografering inte är tillåten. Se följande exempel:
Utöver dessa har du infografik som kombinerar både textbaserad och visuell information för att förklara utveckling, samband och skeenden. Se följande exempel som förklarar processen när en besökare anropar en HTML-fil:
Avslutningsvis har du rörlig bild som är en sekvens av flera bilder i en enda och benämns ofta som gif-animationer. Se flera exempel på följande länk: http://www.gifgifs.com. Var och en av dessa bildtyper måste sparas i ett lämpligt format för publicering på webben. I nästa del ska vi gå igenom olika bildformat och vad som kännetecknar respektive.
När du arbetar med img elementet så måste du alltid tillämpa två obligatoriska attribut: src och alt. Attributet src är en förkortning för source, eller källa, och anger sökväg till den bild du vill visa. Medan alt är en förkortning för alternate, eller alternativ, och anger en alternativ text för exempelvis individer med synnedsättning. Fel i sökvägen till bilden är oftast orsaken till att den inte syns i webbläsaren. Var noga och kontrollera sökvägen så att den inte hänvisar till ett speciellt ställe på din egen dator som exempelvis börjar med C: vilket är hårddisken. Se följande kodexempel:
<img src="logotyp.png" alt="">
Föregående kodexempel kommer att generera följande vid utskrift i webbläsaren:
Figur 1. Logotyp för Högskolan Kristianstad.
Vad gäller alt attributet så är det viktigt att du skriver relevanta alt-texter är en bra början för en mer tillgänglig webb. Eftersom Google och andra sökmotorer har svårt att tolka innehållet i dina bilder så är det viktigt att du hjälper till genom att beskriva bilden på ett bra sätt i alt attributet. Låt oss titta på några exempel av alt attributet:
- Dålig: alt=””
- Bättre: alt=”Högskolan Kristianstad”
- Bäst: alt=”Logotyp för Högskolan Kristianstad”
- Undvik: alt=”högskolan Kristianstad logotyp grönt fyrkantig hkr”
Se följande kodexempel:
<img src="logotyp.png" alt="Logotyp för Högskolan Kristianstad">
Om en bild av någon anledning inte visas i webbläsaren så kommer texten i alt attributet att skrivas ut istället. Det är ett vanligt förekommande missförstånd bland många som arbetar med webbdesign att använda title attributet i syfte att beskriva en bild. Attributet används för att visa en ruta med förklarande text till bilden när du för musmarkören över bilden. Detta är felaktigt och om texten för bilden utgör viktig information så bör den finnas tillgänglig för alla användare som standard och ska presenteras som text bredvid bilden. En uttömmande diskussion kring användningen av title attributet och när den bör användas finns här: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/.
Utöver src och alt så finns det även height och width attributen där den förstnämnda attributet anger höjden på bilden och den sistnämnda bredden. Attributen indikerar dimensionen för bilden mätt i antal pixlar. Du rekommenderas att definiera höjd och bredd för respektive bild. Om du inte definierar dessa mått så resulterar det i en relativt långsammare tolkning av respektive bild eftersom webbläsaren måste gissa vilken storlek bilden är. Se följande kodexempel:
<img src="logotyp.png" alt="Logotyp för Högskolan Kristianstad" height="84" width="96">
Slutligen, för att du ska hålla dina filer organiserade så är det en god idé att spara dina bilder i en särskild mapp, exempelvis images. Om en bild inte finns i samma mapp som HTML-filen så behöver du ange korrekt sökväg till den. Du har även möjlighet att inkludera bilder från andra webbplatser på dina webbsidor. I dessa fall bör du vara noga med att be om tillåtelse från upphovsmakaren för att undvika rättsliga tvister.
Figurer
I böcker och nyhetstidningar brukar bilder, diagram och andra illustrationer anges med en bildtext. Innan HTML5 fanns inte möjligheten att semantiskt göra detta men i samband med introduktionen av elementen <figure> och <figcaption> så kan vi det. Dessa element används inte enbart för uppmärkning av visuella objekt utan också för textbaserade som exempelvis programmeringskod. Se följande kodexempel som illusterar uppmärkning av en bild:
<figure> <img src="blomma.jpg" alt="Fjärill på körsbärsblommor"> </figure>
Föregående kodexempel kommer att generera följande vid utskrift i webbläsaren:
Figur 2. Uppmärkning av en bild.
Innebär det att alla bilder ska märkas upp på detta vis? Svaret är nej och det beror på.
W3C menar att innehåll som är uppmärkt med <figure> elementet kan flyttas från huvudinnehållet utan att påverka webbsidans mening och struktur. Om bilder tillhör huvudinnehållet på en webbsida så ska du inte använda dig av <figure> elementet. I stället kan <figure> elementet exempelvis användas om en webbläsare i mobilen behöver ersätta dina <figure> element med “Se figur 1” länkar utan att sidan påverkas rent innehållsmässigt. Detta görs i syfte att spara datatrafik på långsamma uppkopplingar. Vidare, om du vill ange en kompletterande text till en figur så ska du använda dig av elementet <figcaption> enligt följande kodexempel:
<figure> <img src="apple.jpg" alt="Apple Store"> <figcaption>Apple's butik på Fifth Avenue i New York, USA. <br> Bild av: <a href="http://www.flickr.com/martinsaunierplumaz/"> Martin Saunier-Plumaz</a></figcaption> </figure>
Föregående kodexempel kommer att generera följande vid utskrift i webbläsaren:
Figur 3. Uppmärkning av en bild med kompletterande text.
Utöver detta så kan du exempelvis använda <figure> elementet för uppmärkning av programmeringskod. Se följande kodexempel:
<p>I kodexempel 4 ser vi stilsättning av länkar.</p>
<figure>
<figcaption>Kodexempel 4. Stilsättning av länkar.</figcaption>
<pre><code>a { color: #EE9046; }</code></pre>
</figure>
<p>Denna stilsättning ger alla länkar en orange färg.</p>
Föregående kodexempel kommer att generera följande vid utskrift i webbläsaren:
Figur 4. Uppmärkning av programmeringskod med kompletterande text.
Observera att elementen <pre> och <code> används i detta exempel. Den förstnämnde används nämligen till förformaterad text medan den sistnämnde används för att representera datorgenererad kod, exempelvis programmeringskod, filnamn, datorprogram, och så vidare.
/Montathar Faraon