Bilder är en viktig del av webbdesign. De gör en webbsida attraktiv för en besökare. Det kan enkelt inkluderas i ett HTML-dokument med hjälp av <img>-taggen.

• src: obligatoriskt attribut. Dess värde är sökvägen till bildens plats. Sökvägen kan vara absolut och relativ;

• alt: obligatoriskt attribut. Ger alternativ text som kan visas när bilden inte kan återges;

• width och height: specificerar bildstorlek i pixlar. Utan dessa attribut kommer en bild att återges i sin ursprungliga storlek.

alt-attribut

Bildbeskrivningen bör vara informativ och meningsfull. Det hjälper till att beskriva bilden för personer som är synskadade eller inte kan se den. På så sätt kommer webbläsaren att läsa alt-attributet, och en användare kan förstå varför en webbplats har denna bild.

Låt oss föreställa oss följande exempel. Du har en källa om hästkapplöpning. Du vill visa hur tävlande förbereder sig för kapplöpningen.

Dåligt värde för alt-attributet kommer att vara:

Bra värde för alt-attributet kommer att vara:

Den alternativa texten "En man på en häst" är för generell och saknar sammanhang. Den ger en grundläggande beskrivning, men den förmedlar inte användbara detaljer om scenen eller syftet med bilden.

src-attributet

src-attributet kan använda både absoluta och relativa sökvägar för att ange platsen för bildfilen.

Absolut sökväg

Det anger den fullständiga URL:en för bildfilen på webbservern. Till exempel:

Det betyder att bildfilen finns på länken https://example.com/images/image.jpg på internet. Vem som helst kan komma åt bilden med denna länk.

Vänligen, inspektera följande verkliga exempel i kod-sandboxen nedan:

Notera

För att undersöka filmappstrukturen, dra reglaget på kod-sandboxens vänstra sida. I det övre vänstra hörnet hittar du en hamburgarknapp representerad av tre ränder. Genom att klicka på denna knapp navigerar du till filmappens organisation.

Relativ Sökväg

Det specificerar platsen för bildfilen i förhållande till det aktuella dokumentet. Till exempel:

Det betyder att filen image.jpg ligger i katalogen images.

Vänligen inspektera det verkliga exemplet som tillhandahålls i kod-sandboxen nedan. Du kommer att hitta mappen images, som innehåller filen sun.png.

Notera

För att sammanfatta skillnaden mellan relativa och absoluta sökvägar, representerar en absolut sökväg den faktiska länken som vem som helst kan använda för att komma åt en bild. Å andra sidan är en relativ sökväg en länk inom kontexten av ditt eget projekt. Den hänvisar till en lokal bild och sökväg som vem som helst inom projektet kan komma åt.