Bilder

Bilder gjør nettsiden mer interessant og visuell. I HTML bruker vi <img>-taggen.

Grunnleggende bilde

<img src="katt.jpg" alt="En søt katt">

src - stien til bildet
alt - beskrivelse av bildet

Attributter

Attributt	Beskrivelse
`src`	Hvor bildet ligger (påkrevd)
`alt`	Alternativ tekst (påkrevd)
`width`	Bredde i piksler
`height`	Høyde i piksler

<img src="hund.jpg" alt="En hund som løper" width="400" height="300">

Alt-tekst

Alt-tekst er viktig fordi:

Skjermlesere leser den for blinde brukere
Vises hvis bildet ikke laster
Hjelper søkemotorer forstå bildet

<!-- Bra - beskriver bildet -->
<img src="hund.jpg" alt="Golden retriever som løper i parken">

<!-- Dårlig - sier ingenting -->
<img src="hund.jpg" alt="bilde">

Aldri glem alt

Alle bilder må ha alt-attributt, selv om den er tom for dekorative bilder.

Bildestier

Samme mappe

<img src="bilde.jpg" alt="...">

I undermappe

<img src="images/bilde.jpg" alt="...">

Fra internett

<img src="https://example.com/bilde.jpg" alt="...">

Mappestruktur

📁 min-nettside/
├── 📄 index.html
└── 📁 images/
    ├── 📄 logo.png
    ├── 📄 katt.jpg
    └── 📄 hund.jpg

<img src="images/katt.jpg" alt="En katt">

Bildeformater

Format	Bruk til
`.jpg`	Fotografier
`.png`	Grafikk, gjennomsiktighet
`.gif`	Enkle animasjoner
`.svg`	Ikoner, logoer

Størrelse

Med attributter

<img src="bilde.jpg" alt="..." width="300" height="200">

Med CSS

<img src="bilde.jpg" alt="..." style="width: 300px;">

Behold proporsjoner

Sett bare width eller height, ikke begge. Da beholder bildet proporsjonene.

Responsive bilder

For at bilder skal tilpasse seg ulike skjermstørrelser, se Responsivt design.

Bilde som lenke

Gjør bildet klikkbart:

<a href="https://nrk.no">
    <img src="nrk-logo.png" alt="NRK logo">
</a>

Eksempel

<!DOCTYPE html>
<html lang="no">
<head>
    <title>Mine bilder</title>
</head>
<body>
    <h1>Bildegalleri</h1>

    <h2>Katter</h2>
    <img src="images/katt1.jpg" alt="Oransje katt som sover" width="300">
    <img src="images/katt2.jpg" alt="Svart katt som leker" width="300">

    <h2>Hunder</h2>
    <img src="images/hund1.jpg" alt="Labrador på stranden" width="300">
</body>
</html>

Oppsummering

<img src="sti/til/bilde.jpg" alt="Beskrivelse" width="400">

Del	Betydning
`src`	Hvor bildet er
`alt`	Hva bildet viser
`width`	Hvor bredt (piksler)