Hvordan legge til bilde med HTML

Å legge til et bilde med HTML gjøres med én enkelt tagg: <img>. Taggen forteller nettleseren hvilket bilde den skal hente og hvordan det skal vises, og den fungerer likt enten du bygger en helt enkel nettside eller en avansert WordPress-blogg. I denne guiden går vi gjennom hvordan du bruker bilde-taggen fra bunnen av, hvilke attributter som fortsatt gjelder i 2026, hvilke du bør la være, og hvordan du legger til responsive bilder som laster raskt og ser bra ut på både mobil og stor skjerm. Alt forklares på norsk og med konkrete kodeeksempler du kan kopiere rett inn.

Hva er img-taggen i HTML?

Img-taggen er HTML-elementet som setter inn et bilde på en nettside. Den skrives <img> og er et såkalt tomt element (void element): den har ikke noe innhold mellom en start- og sluttagg, og den skal aldri lukkes med </img>. I HTML5 er den avsluttende skråstreken (<img />) helt valgfri, så både <img> og <img /> er korrekt. Skråstreken ignoreres av nettleseren.

Selve bildet ligger ikke inni taggen. I stedet peker du til en bildefil med attributtet src (source, altså kilde), og nettleseren henter bildet og viser det der taggen står. Et bilde du legger inn med HTML er alltid et eget innhold som lastes separat – det er derfor filstørrelse og format har så mye å si for hvor raskt siden laster.

Slik legger du til et bilde steg for steg

Det enkleste eksempelet trenger bare to ting: en kilde og en alternativ tekst. Slik gjør du det:

1. Skaff et bilde. Lagre bildefilen (for eksempel bilde.jpg) et sted nettsiden kan nå den – vanligvis i samme mappe som HTML-filen, eller i en undermappe som images.
2. Skriv inn img-taggen der du vil at bildet skal stå, inni <body>-delen av dokumentet.
3. Legg til src som peker til filen, og alt med en kort beskrivelse av bildet.
4. Angi width og height slik at nettleseren reserverer plass til bildet mens det laster.

<img src="bilde.jpg" alt="Rød seilbåt på blått hav" width="800" height="600">

Ligger bildet i en undermappe, tar du med mappenavnet i stien: src="images/bilde.jpg". Dette er en relativ sti som regnes ut fra hvor HTML-filen ligger. Du kan også peke til et bilde på en annen nettadresse med en full URL, for eksempel src="https://eksempel.no/bilder/bilde.jpg" – dette kalles en absolutt sti.

src: slik peker du til riktig bilde

Src-attributtet er det eneste som er strengt nødvendig for at et bilde skal vises, og det bestemmer nøyaktig hvilken fil nettleseren henter. Du kan bruke tre typer stier:

• Relativ sti i samme mappe: src="bilde.jpg" – bildet ligger ved siden av HTML-filen.
• Relativ sti i undermappe: src="images/bilde.jpg" – bildet ligger i mappen images. Med ../ går du ett nivå opp i mappestrukturen.
• Absolutt URL: src="https://domene.no/bilde.jpg" – peker til et bilde hvor som helst på nett.

Et vanlig problem er at bildet ikke dukker opp fordi stien er feil, eller fordi filnavnet har en annen store/små bokstav enn det du skrev. Mange webservere skiller mellom Bilde.JPG og bilde.jpg, så skriv filnavnet nøyaktig slik det er lagret. Prinsippet er det samme som når du skal lage en HTML-lenke – både lenker og bilder bruker stier som må peke helt presist.

alt-teksten: viktig for tilgjengelighet og SEO

Alt-attributtet gir en tekstbeskrivelse av bildet, og det er noe av det viktigste du kan legge til. En utbredt misforståelse er at alt-teksten vises som et verktøytips når du holder musepekeren over bildet – det stemmer ikke. Verktøytipset styres av et eget attributt, title. Alt-teksten har en helt annen jobb:

• Tilgjengelighet: Skjermlesere leser opp alt-teksten for synshemmede brukere, så de forstår hva bildet viser.
• Reservetekst: Hvis bildet ikke kan lastes (feil sti, treg forbindelse), viser nettleseren alt-teksten i stedet.
• SEO: Søkemotorer kan ikke «se» bilder, men de leser alt-teksten for å forstå innholdet. God alt-tekst hjelper bildene dine å bli funnet i bildesøk.

Skriv alt-teksten kort og beskrivende: alt="Kvinne som sykler i solnedgang" er bedre enn alt="bilde". Er bildet rent dekorativt og uten informasjon, bruker du en tom alt-tekst (alt="") slik at skjermlesere hopper over det. Husk at title ikke erstatter alt – de to har forskjellige oppgaver, og mange brukere på mobil og tastatur ser aldri et verktøytips.

width og height: angi størrelse riktig

Width og height forteller nettleseren hvor stort bildet er, slik at den kan reservere plass før bildet er ferdig lastet. Dette hindrer at innholdet «hopper» på skjermen mens siden laster, noe Google måler som layout-forskyvning (Cumulative Layout Shift) og vektlegger i rangeringen.

En viktig endring fra eldre HTML: i dag oppgir du width og height som rene tall uten enhet, ikke med «px». Riktig er width="800" height="600", ikke width="800px". Tallene angir bildets egentlige størrelse i piksler og brukes til å regne ut størrelsesforholdet (aspect ratio).

Den faktiske visningsstørrelsen bør du styre med CSS, ikke med HTML-attributtene. En nesten uunnværlig regel for responsive nettsider er:

img {
  max-width: 100%;
  height: auto;
}

Dette gjør at bildet aldri blir bredere enn beholderen sin, og at høyden justeres automatisk slik at bildet beholder riktige proporsjoner på mobil, nettbrett og PC.

Plassering og styling: bruk CSS, ikke foreldede attributter

Hvis du har lest eldre guider, har du kanskje sett attributter som border, align, hspace og vspace inni img-taggen. Disse er foreldet (deprecated) og bør ikke lenger brukes – de er fjernet fra HTML-standarden og kan slutte å virke. I stedet styrer du utseende og plassering med CSS. Slik erstatter du dem:

• border (ramme) → CSS-egenskapen border, for eksempel border: 1px solid #ccc;
• align=»left/right» (flyt teksten rundt bildet) → CSS float: left; eller float: right;
• hspace / vspace (luft rundt bildet) → CSS margin, for eksempel margin: 10px;
• align=»top/bottom» (vertikal justering) → CSS vertical-align

<img src="bilde.jpg" alt="Produktbilde" class="produkt">

.produkt {
  border: 1px solid #ccc;
  float: right;
  margin: 0 0 10px 15px;
}

Vil du i stedet midtstille et bilde på siden, bruker du CSS – det samme prinsippet som når du skal sentrere skrift og innhold med CSS. For et blokk-bilde holder det ofte med display: block; margin: 0 auto;.

Responsive bilder med srcset og sizes

Srcset lar deg tilby flere versjoner av samme bilde i ulik størrelse, slik at nettleseren laster den som passer best for skjermen. En mobil trenger ikke samme store bildefil som en 4K-skjerm, og med srcset slipper mobilbrukere å laste unødvendig tunge filer – siden blir raskere og sparer data.

<img
  src="bilde-800.jpg"
  srcset="bilde-400.jpg 400w, bilde-800.jpg 800w, bilde-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Fjell i solnedgang"
  width="1600"
  height="900">

Her betyr tallene med w hvor bred hver bildefil er i piksler. sizes forteller hvor stor plass bildet tar på skjermen under ulike forhold: på skjermer opptil 600 piksler fyller bildet hele bredden (100vw), ellers halve bredden (50vw). Nettleseren kombinerer dette med skjermens pikseltetthet og velger den beste filen – helt automatisk før bildet lastes. src fungerer som reserve for eldre nettlesere som ikke støtter srcset.

picture-elementet og moderne bildeformater

<picture>-elementet gir deg enda mer kontroll og brukes særlig til to ting: å tilby moderne, lettere bildeformater med en trygg reserve, og til såkalt art direction, der du viser et annet utsnitt på mobil enn på PC. Picture inneholder én eller flere <source>-linjer og alltid ett <img> til slutt som fallback.

De nyere formatene WebP og AVIF gir langt mindre filstørrelse enn JPEG og PNG ved samme kvalitet. WebP støttes i praksis av alle moderne nettlesere, mens AVIF har bredest støtte de siste årene og gir aller best komprimering. Fordi ikke alle gamle nettlesere forstår AVIF, lister du formatene i rekkefølge fra best til mest kompatibelt:

<picture>
  <source srcset="bilde.avif" type="image/avif">
  <source srcset="bilde.webp" type="image/webp">
  <img src="bilde.jpg" alt="Bykart over Oslo" width="1200" height="800">
</picture>

Nettleseren velger den første kilden den forstår. Støtter den AVIF, brukes det; ellers prøver den WebP, og til slutt faller den tilbake på JPEG-filen i img-taggen. Legg merke til at alt, width og height fortsatt hører hjemme på img-elementet, ikke på picture.

Lazy loading og ytelse

Lazy loading utsetter nedlastingen av bilder til brukeren er i ferd med å scrolle dem inn i synsfeltet, og det kan gjøre at siden føles mye raskere. Du slår det på med attributtet loading="lazy", som i dag støttes av alle store nettlesere:

<img src="bilde.jpg" alt="Produktfoto" width="800" height="600" loading="lazy">

Noen tips om ytelse:

• Ikke lazy-load det øverste bildet. Hovedbildet som er synlig med én gang (for eksempel et toppbilde) bør lastes med vanlig prioritet, ellers kan det gjøre at siden oppleves tregere å få opp.
• Sett alltid width og height på bilder du lazy-laster, slik at plassen reserveres riktig.
• decoding=»async» lar nettleseren dekode bildet uten å blokkere resten av siden.
• Komprimer bildene før du laster dem opp. Et bilde på flere megabyte bremser siden selv med alle triksene over.

Driver du en WordPress-side, legger WordPress ofte til lazy loading og flere bildestørrelser automatisk når du setter inn bilder via mediebiblioteket – da får du mye av dette gratis.

Bildetekst med figure og figcaption

Trenger bildet en synlig bildetekst, bør du bruke <figure> og <figcaption> i stedet for å plassere teksten løst ved siden av. Det knytter teksten tydelig til bildet, både visuelt og for skjermlesere:

<figure>
  <img src="utsikt.jpg" alt="Utsikt fra Preikestolen" width="1000" height="667">
  <figcaption>Utsikten fra Preikestolen en tidlig sommermorgen.</figcaption>
</figure>

Bruk gjerne figcaption til bildetekst og alt til beskrivelse – de utfyller hverandre og bør ikke være helt like.

Vanlige feil når du legger til bilder med HTML

• Glemmer alt-teksten. Uten alt mister du både tilgjengelighet og SEO-verdi. Dekorative bilder skal ha alt="", ikke ingenting.
• Feil sti i src. Dobbeltsjekk mappenavn og store/små bokstaver hvis bildet ikke vises.
• Bruker foreldede attributter. border, align, hspace og vspace hører fortiden til – bruk CSS.
• Skriver «px» i width/height. Disse skal være rene tall, ikke 500px.
• Laster opp enorme filer. Et ukomprimert kamerabilde kan være 5–10 MB og ødelegge lastetiden. Skaler ned og komprimer først.
• Hotlinking til andres bilder. Å peke src mot et bilde på en annen nettside uten tillatelse kan være både ulovlig og upålitelig – bildet kan forsvinne når som helst.

Hvor finner du bilder du kan bruke?

Du må ha rett til å bruke bildene du legger ut. Den tryggeste veien er å bruke egne bilder eller bilder med fri lisens. Vi har en egen oversikt over lisensfrie og gratis bilder du kan bruke i bloggen, som peker til kildene du trygt kan laste ned fra.

For å tilpasse, beskjære og komprimere bildene trenger du et bilderedigeringsprogram. Du trenger ikke betale for Photoshop – det finnes flere gode gratis alternativer til Adobe Photoshop. Og skal du skrive HTML-koden selv, gjør du det enklest i en ordentlig editor; her er gratis HTML- og CSS-editorer et godt sted å begynne.

Vanlige spørsmål (FAQ)

Må img-taggen lukkes med en skråstrek?

Nei. I HTML5 er img et tomt element som verken skal eller kan ha en sluttagg. Den avsluttende skråstreken i <img /> er valgfri og ignoreres av nettleseren, så <img> uten skråstrek er like korrekt.

Hva er forskjellen på alt og title på et bilde?

Alt er en tekstbeskrivelse som leses av skjermlesere og søkemotorer, og som vises hvis bildet ikke laster. Title vises som et verktøytips når du holder musepekeren over bildet. Alt er viktigst og bør alltid være med; title er valgfritt og ses ikke av mobil- og tastaturbrukere.

Hvorfor vises ikke bildet mitt?

Den vanligste årsaken er feil sti i src. Sjekk at filnavnet stemmer nøyaktig, inkludert store og små bokstaver, og at bildet faktisk ligger i mappen du peker til. Test gjerne med en absolutt URL for å utelukke mappefeil.

Bør jeg bruke JPEG, PNG, WebP eller AVIF?

Bruk JPEG til fotografier, PNG når du trenger gjennomsiktighet eller skarpe grafikkelementer, og SVG til logoer og ikoner. WebP og AVIF gir mindre filer ved samme kvalitet og er gode valg i dag – legg dem gjerne inn med picture-elementet og JPEG som reserve.

Hvordan gjør jeg bildene responsive?

Legg til CSS-regelen img { max-width: 100%; height: auto; } så bildene aldri blir bredere enn beholderen. For enda bedre ytelse bruker du srcset og sizes, slik at nettleseren laster en passe stor bildefil for hver skjermstørrelse.