Frontend Academy · Lektion

Billedoptimering: lazy loading og formater som WebP

Tilføj loading=lazy til billeder, lever moderne WebP- og AVIF-formater, brug responsive billeder med srcset og sizes, og angiv eksplicit width og height for at forhindre layout shift.

Lektion 3 af 413 trin

Billedoptimering: lazy loading og formater som WebP er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Billeder udgør størstedelen af sidens størrelse

Den typiske webside er omkring 2 MB — og billeder udgør cirka halvdelen. Optimering af billeder er den enkeltstående ydelsesopgave, der har størst effekt.

Moderne formater: WebP og AVIF

WebP fylder 25-35 % mindre end JPEG ved tilsvarende kvalitet og understøttes af alle moderne browsere. AVIF fylder endnu mindre (50 % reduktion), men er langsommere at kode. Brug begge med et reserveformat.

picture-elementet

Brug <picture> til at levere AVIF, hvis det understøttes, derefter WebP og til sidst JPEG som sidste reserveformat.

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

Indbygget lazy loading

Tilføj loading="lazy" til billeder under folden. Browseren udskyder indlæsningen, indtil billedet nærmer sig viewporten — du behøver ingen JavaScript.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

Responsive billeder med srcset og sizes

Lever mindre billeder til mindre skærme. srcset angiver kandidatbilleder med deres bredder, mens sizes fortæller browseren, hvor bredt billedet vises ved hvert breakpoint.

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

Hvorfor du skal angive width og height eksplicit

Browseren reserverer plads baseret på attributterne width og height, hvilket forhindrer layoutskift, når billedet ankommer. Moderne browsere beregner automatisk aspect-ratio ud fra disse attributter.

decoding="async"

Tilføj decoding="async", så browseren kan afkode billedet uden for hovedtråden og dermed frigøre den til at rendere andet indhold.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

Billed-CDN'er

Billed-CDN'er (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) transformerer billeder undervejs: ændrer størrelse, konverterer til WebP/AVIF, komprimerer og leverer fra edge-caches.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Next.js Image-komponenten

Next.js' <Image> håndterer responsive srcset, WebP-konvertering, lazy loading og sløret pladsholder direkte.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

Komprimering af JPEG'er og PNG'er

Hvis du ikke kan skifte til WebP, skal du som minimum komprimere: Brug Squoosh (squoosh.app) til enkeltstående billeder, ImageOptim til batchbehandling eller sharp i et build-script.

SVG'er til ikoner og logoer

Brug SVG til ikoner, logoer og al vektorgrafik. SVG'er skalerer perfekt, fylder meget lidt og kan styles med CSS. Indsæt små SVG'er direkte for at undgå en ekstra HTTP-forespørgsel.

Hurtigt tjek

Hvilken HTML-attribut fortæller browseren, at den skal udskyde indlæsningen af et billede, indtil det nærmer sig viewporten?

Besvar den i den interaktive lektion

Opsummering: Billedoptimering

Brug moderne formater (AVIF, WebP) via picture-elementet. Tilføj loading="lazy" under folden og fetchpriority="high" på hero-billedet. Angiv width og height eksplicit for at forhindre CLS. Brug srcset/sizes til responsive billeder. Billed-CDN'er automatiserer transformation. Next.js Image håndterer det hele. Brug SVG til ikoner.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Billedoptimering: lazy loading og formater som WebP” gratis?

Ja — hele teksten til “Billedoptimering: lazy loading og formater som WebP” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Billedoptimering: lazy loading og formater som WebP”?

Tilføj loading=lazy til billeder, lever moderne WebP- og AVIF-formater, brug responsive billeder med srcset og sizes, og angiv eksplicit width og height for at forhindre layout shift. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Billedoptimering: lazy loading og formater som WebP”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Core Web Vitals: LCP FID CLS
Lighthouse-audits og scoring
Billedoptimering: lazy loading og formater som WebP
Code splitting og lazy routes

← Tilbage til Frontend Academy