Bilder på webben

Bilder är separata filer

En HTML-fil är ren text. Den kan inte innehålla en bildfil. Istället pekar du ut var bilden finns, och webbläsaren hämtar den separat.

Det betyder att om bildfilen saknas, har fel namn eller fel sökväg, visas en bruten bildsymbol och alt-texten bredvid. Webbläsaren kraschar inte, men bilden syns inte.

Exempel på en trasig bildlänk

`<img>`-taggen

<img src="katt.jpg" alt="En orange katt som solar på ett fönsterbräde." />

Två saker att notera:

<img> har ingen sluttagg, snedstrecket / precis innan > markerar att taggen stänger sig själv (samma mönster som <br /> och <input />)
src pekar ut bildens plats relativt HTML-filen (mer om sökvägar i nästa del)

Alt-text: Beskriv vad bilden gör

Alt-texten är obligatorisk, och den har tre läsare: skärmläsare läser upp den, sökmotorer indexerar den, och alla ser den om bilden inte laddas.

Situation	Rätt alt-text
En profilbild	`alt="Isac, grottutforskare"`
Ett diagram	`alt="Diagram som visar CSS-specificitet: ID > klass > element"`
En dekorativ linje	`alt=""` (tom sträng, skärmläsaren hoppar tyst över den)

Pröva i DevTools: Hur laddas bilden?

Öppna sidan med en bild inlagd. Tryck F12, fliken Network.
Gör en Hard Refresh (Ctrl+Shift+R / Cmd+Shift+R).
I listan ser du alla nätverksanrop, en rad för index.html, en för style.css och en för din bild.
Klicka på bildraden. Du ser exakt var webbläsaren hämtade den ifrån.

Om bilden inte laddas syns raden i rött med status 404 Not Found vilket betyder att sökvägen är fel.

Uppgift: Lägg till en bild

Hämta en fri bild och lägg till den i ditt repo.

Gå till Unsplash och spara ned en bild som passar din sida (CC0, fri att använda utan krav).
Döp om filen till ett enkelt namn med enbart gemener och inga mellanslag: profil.jpg eller cover.jpg.
Flytta bildfilen till samma mapp som din index.html.

Lägg till en <img>-tagg i <main>:

<img src="filnamn.jpg" alt="beskriv vad bilden visar" />

Gör en git commit: add profile image. Pusha.
Öppna din live-länk. Syns bilden? Om inte, öppna DevTools -> Network och leta efter en röd rad.

Ta bort alt-attributet från din <img>-tagg helt och hållet, inte tom sträng, utan ta bort hela alt="..."-delen. Kör WAVE-tillägget, det du installerade i Tema 1. Vilket fel dyker upp? Jämför sedan med vad som händer om du sätter alt="" (tom sträng). Lägg tillbaka en beskrivande alt-text.

Motivera & reflektera

I ditt repos README, skriv ner alt-texten du valde och motivera den i en mening: vad tillför bilden, och varför räcker inte filnamnet? Om bilden vore rent dekorativ, hur hade du skrivit i stället?

Nästa nivå

WAVE hittar att alt saknas, men inte om din alt-text är bra. Det kan bara en människa avgöra. Slå på en riktig skärmläsare (VoiceOver på Mac med Cmd+F5, NVDA på Windows) och navigera till din bild. Lyssna på hur den låter uppläst. Är det något en person som inte ser bilden faktiskt har nytta av, eller bara en teknisk beskrivning av pixlar? Skriv om alt-texten tills den läser bra högt. Att kunna testa med riktiga hjälpmedel, inte bara automatiska verktyg, är det som skiljer en junior från någon som kan leverera tillgängligt på riktigt.