Billeder i HTML — img-tag, alt-tekst og billedoptimering

img-tagget

Billeder indsættes i HTML med <img>-tagget — et selvlukkende element (void element) der ikke har nogen sluttag:

<img src="løbesko.jpg" alt="Hvide løbesko fra Model X" width="800" height="600">

De fire vigtigste attributter er src, alt, width og height. Alle fire bør bruges konsekvent.

src — billedkilden

src-attributten angiver stien til billedfilen:

<!-- Relativ sti -->
<img src="/billeder/produkt.jpg" alt="...">

<!-- Absolut URL -->
<img src="https://cdn.ditsite.dk/billeder/produkt.jpg" alt="...">

Brug absolutte URL’er til CDN-serverede billeder. Relativ src er fint til lokale billeder.

alt-tekst — det vigtigste for SEO og tilgængelighed

Alt-tekst er alternativ tekst der:

1. Vises hvis billedet ikke kan indlæses
2. Læses op af skærmlæsere til blinde og svagsynede brugere
3. Bruges af Google til at forstå billedets indhold

God alt-tekst er beskrivende og specifik:

<!-- God -->
<img src="kage.jpg" alt="Chokoladekage med flødeskum og hindbær på hvid baggrund">

<!-- For vag -->
<img src="kage.jpg" alt="Kage">

<!-- Keyword-stuffing — undgå -->
<img src="kage.jpg" alt="chokoladekage køb billig kage opskrift kage">

Hvornår bruges tom alt-tekst (alt=""): Dekorative billeder der ikke tilføjer informationsindhold bør have tom alt-tekst — ikke manglende alt-attribut. Tom alt fortæller skærmlæsere at billedet er dekorativt og skal springes over:

<!-- Dekorativt billede — tom alt er korrekt -->
<img src="divider-line.png" alt="">

Manglende alt-attribut er en tilgængeligheds- og SEO-fejl — Google rapporterer billeder uden alt-tekst som mangler.

width og height — CLS-forebyggelse

Angiv altid billedets naturlige dimensions:

<img src="produkt.jpg" alt="..." width="800" height="600">

Browseren reserverer plads til billedet inden det er loadet, og undgår layout shift (CLS) når billedet loader ind. Dette er direkte koblet til Googles Core Web Vitals — CLS er en rankingfaktor.

Dimensions angives i CSS-pixels, ikke nødvendigvis billedets faktiske pixelstørrelse. Billedet skaleres via CSS.

loading — lazy eller eager

<!-- Above-the-fold billeder -->
<img src="hero.jpg" alt="..." loading="eager" fetchpriority="high">

<!-- Below-the-fold billeder -->
<img src="produkt-5.jpg" alt="..." loading="lazy">

loading="lazy" udskyder download til billedet nærmer sig viewport. Forbedrer initial pageload.

Kritisk: hero-billedet og LCP-billedet bør ikke lazy loades — det forsinker LCP direkte. Se lazy loading.

fetchpriority="high" på LCP-billedet fortæller browseren at prioritere dette billedes download.

srcset og sizes — responsivt billede

Browseren kan vælge det rigtige billede til den aktuelle viewport og skærm-opløsning:

<img src="billede-800.jpg"
     srcset="billede-400.jpg 400w, billede-800.jpg 800w, billede-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="Produktbillede"
     width="800"
     height="600">

srcset lister tilgængelige billedfiler og deres bredde. sizes fortæller browseren hvor stor billedet vil blive ved different viewport-størrelser. Browseren vælger den bedste fil.

Billedformater — WebP og AVIF

Moderne billedformater reducerer filstørrelser markant:

• WebP: 25-34% mindre end JPEG, bred browserunderstøttelse (alle moderne browsere)
• AVIF: 50% mindre end JPEG, fremragende kvalitet, stigende support
• JPEG: Standard fotografi — brug WebP i stedet
• PNG: Til billeder med gennemsigtighed — overvej WebP
• SVG: Vektorgrafikk, ikoner og logoer — altid foretrukket til disse

picture-elementet

<picture> lader browseren vælge mellem alternative billedkilder med fuld kontrol:

<picture>
  <source srcset="billede.avif" type="image/avif">
  <source srcset="billede.webp" type="image/webp">
  <img src="billede.jpg" alt="Beskrivelse" width="800" height="600">
</picture>

Browseren bruger den første source den understøtter og falder tilbage til <img> som standard.

---

Er alt-tekst det samme som billedtitel? Nej. Alt-tekst (alt-attributten) er alternativ tekst for tilgængelighed og SEO. Billedtitel (title-attributten) vises som tooltip ved hover. Alt-tekst er langt vigtigere for SEO.

Hvad sker der hvis jeg glemmer width og height? Browseren kender ikke billedets størrelse før det er downloadet og reserverer ingen plads. Når billedet loader, skubber det indholdet nedad — det er CLS (Cumulative Layout Shift) og en rankingfaktor.

Skal jeg bruge WebP i 2026? Ja — WebP har 97%+ browserunderstøttelse og reducerer billedstørrelser med 25-34% sammenlignet med JPEG. De fleste moderne CMS og bildoptimerings-services genererer automatisk WebP.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.