Optimalisering av webytelse og Lighthouse · leksjon

Responsive bilder og lazy loading

Implementer responsive bildeteknikker ved hjelp av `srcset` og `sizes`, og bruk lazy loading for medier utenfor skjermen.

Leksjon 2 av 411 trinn

Responsive bilder og lazy loading er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Optimalisering av webytelse og Lighthouse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.

Hvorfor responsive bilder?

Se for Dem at De besøker et nettsted på en liten telefonskjerm, men at nettstedet laster inn et bilde som er beregnet på en stor stasjonær skjerm. Det sløser med data og gjør siden treg!

Responsive bilder sørger for at brukerne får bilder som er optimalisert for den aktuelle enheten og skjermstørrelsen, noe som forbedrer ytelsen og brukeropplevelsen.

`srcset` for oppløsning

Attributtet srcset lar Dem oppgi en liste over ulike bildefiler som nettleseren kan velge mellom. Én måte å bruke det på er til oppløsningsbytte.

Det innebærer å levere bilder med høyere oppløsning til enheter med skjermer med høy DPI (Retina), og bilder med standardoppløsning til andre enheter.

1x: Standardoppløsning
2x, 3x: Høyere oppløsninger

<img src="cat-1x.jpg" srcset="cat-1x.jpg 1x, cat-2x.jpg 2x" alt="A cute cat" />

`srcset` for visningsbredde

I tillegg til oppløsning kan srcset også brukes til bytte basert på visningsområdet. Dette lar Dem tilby ulike bildefiler basert på bredden på nettleserens visningsområde.

Deskriptoren w angir bildefilens naturlige bredde. Nettleseren velger deretter den mest passende kilden.

<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="A landscape" />

Attributtet `sizes`

Når De bruker srcset med w-deskriptorer, må nettleseren vite hvor bredt bildet faktisk vil bli vist på siden ved ulike størrelser på visningsområdet. Det er her attributtet sizes kommer inn.

sizes tar en liste over mediebetingelser og bredder på bildeområder. Det forteller nettleseren: «Ved denne skjermstørrelsen vil bildet oppta X % av visningsområdet.»

Arbeide med `sizes`

Nettleseren bruker sizes til å velge det beste bildet fra srcset. Det endrer ikke størrelsen på bildet, men hjelper bare med å velge riktig kildefil.

(max-width: 600px) 100vw: Hvis visningsområdet er 600px eller mindre, er bildet 100 % av visningsområdets bredde.
(max-width: 1200px) 50vw: Hvis visningsområdet er 1200px eller mindre, er bildet 50 % av visningsområdets bredde.
800px: Ellers er bildet 800px bredt.

Kombinere `srcset` og `sizes`

Slik fungerer srcset og sizes sammen. Prøv å endre størrelsen på nettleservinduet for å se hvordan nettleseren kan velge ulike bilder.

Nettleseren bruker sizes til å beregne den ideelle bildebredden og finner deretter den nærmeste matchen blant breddene som oppgis i srcset.

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Image</title>
</head>
<body>
  <img
    srcset="
      image-400w.jpg 400w,
      image-800w.jpg 800w,
      image-1200w.jpg 1200w"
    sizes="
      (max-width: 600px) 100vw,
      (max-width: 1200px) 50vw,
      800px"
    src="image-800w.jpg"
    alt="A beautiful landscape"
    style="max-width: 100%; height: auto;"
  >
  <p>Imagine image-400w.jpg, image-800w.jpg, image-1200w.jpg exist.</p>
</body>
</html>

Art direction med `<picture>`

Noen ganger er det ikke nok å skalere et bilde. De vil kanskje vise et helt annet bilde eller et annet utsnitt, avhengig av skjermstørrelsen eller enhetstypen. Dette kalles art direction.

Elementet <picture> lar Dem oppgi flere <source>-elementer med ulike mediespørringer og bildekilder, samt et reserveelement med <img>.

<picture>
  <source media="(max-width: 600px)" srcset="narrow-crop.jpg">
  <source media="(min-width: 601px)" srcset="wide-crop.jpg">
  <img src="default-crop.jpg" alt="A scenic view">
</picture>

Hva er lazy loading?

Selv med responsive bilder kan en side fortsatt være treg hvis den inneholder mange bilder. Lazy loading bidrar ved å utsette innlastingen av ikke-kritiske ressurser (som bilder eller iframer) til de trengs.

Vanligvis betyr dette at de bare lastes inn når de er i ferd med å komme inn i brukerens visningsområde.

Reduserer sidens innlastingstid i starten.
Sparer båndbredde for brukerne.
Forbedrer Core Web Vitals, som LCP.

Innebygd lazy loading

Moderne nettlesere tilbyr innebygd lazy loading, noe som betyr at De ikke trenger JavaScript-biblioteker for grunnleggende lazy loading. De legger bare til attributtet loading="lazy" i <img>- eller <iframe>-taggene.

eager: Lastes inn umiddelbart.
lazy: Utsetter innlastingen til elementet nærmer seg visningsområdet.
auto: Nettleseren avgjør.

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Product image" />

<p>Note: <code>data-src</code> is often used with JS-based lazy loading. For native, just <code>src</code> + <code>loading='lazy'</code> is usually enough if the browser supports it.</p>

Hurtigsjekk

Hvilke attributter og elementer brukes hovedsakelig til å implementere responsive bilder og lazy loading?

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

Vi har sett på effektive teknikker for å optimalisere bilder og medier for bedre nettytelse:

Responsive bilder: Bruk srcset (med x for oppløsning og w for visningsbredde) og sizes for å levere passende bildestørrelser.
Art direction: Bruk elementet <picture> for bedre kontroll over bildevisningen basert på mediebetingelser.
Lazy loading: Bruk loading="lazy" på <img> og <iframe> for å utsette innlasting av innhold utenfor skjermen og dermed øke hastigheten på den første sideinnlastingen.

Ved å bruke disse metodene kan De forbedre nettstedets ytelse og brukeropplevelse betydelig!

Gratis å komme i gang

Lær deg Optimalisering av webytelse og Lighthouse med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Responsive bilder og lazy loading» gratis?

Ja – hele teksten i «Responsive bilder og lazy loading» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Optimalisering av webytelse og Lighthouse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.

Hva lærer jeg i «Responsive bilder og lazy loading»?

Implementer responsive bildeteknikker ved hjelp av `srcset` og `sizes`, og bruk lazy loading for medier utenfor skjermen. Du øver på Optimalisering av webytelse og Lighthouse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Optimalisering av webytelse og Lighthouse?

Ingen tidligere erfaring er nødvendig. Optimalisering av webytelse og Lighthouse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Responsive bilder og lazy loading»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Optimalisering av webytelse og Lighthouse-leksjonen?

Ja. Alle Optimalisering av webytelse og Lighthouse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Effektive bildeformater
Responsive bilder og lazy loading
Ytelse for video og animasjoner
Bilde-CDN-er og optimalisering av levering

← Tilbake til Optimalisering av webytelse og Lighthouse