Modul 6

Bilddemo - lazy loading och srcset

En separat demosida där det syns vilken bildfil webbläsaren använder och när bilder laddas.

Responsiva bildkällor med srcset

Den här bilden finns i tre versioner. De har olika färg och text: 400w, 800w och 1200w. Webbläsaren väljer en av dem utifrån bildens visade bredd och skärmens pixeltäthet.

720px
Testbild där texten visar vilken srcset-version som laddades.
Vald bildkälla Visad bredd: 720px sizes: 720px currentSrc: laddar... Skärmens pixeltäthet: laddar... 
<img
    src="demo-srcset-800.svg"
    srcset="demo-srcset-400.svg 400w,
            demo-srcset-800.svg 800w,
            demo-srcset-1200.svg 1200w"
    sizes="720px"
    alt="Testbild">

Lazy loading

Bilden direkt här nedanför laddas normalt direkt. Därefter kommer tio stora astronomibilder under varandra med loading="lazy". Bildfilerna är sammanlagt cirka 93 MB och används här medvetet för att göra laddningen synlig. Öppna Network-panelen i utvecklarverktygen, markera Disable cache, ladda om sidan och scrolla långsamt nedåt.

Om bilderna redan har laddats kan du göra en hård omladdning med ⌘ Command + ⇧ Shift + R i Chrome på Mac. Då laddar webbläsaren om sidan utan att använda de sparade filerna i cacheminnet, så den hämtar bilderna igen.

Bild som laddas direkt

Testbild som laddas direkt.
Laddningslogg
  1. Väntar på bildladdningar...

Scrolla vidare. Nu börjar serien med tio lazy-bilder.

1. Hubble Extreme Deep Field

Tusentals avlägsna galaxer i Hubble Extreme Deep Field.

Källa och licens: NASA/ESA via Wikimedia Commons.

Fortsätt scrolla till bild 2.

2. Webb's First Deep Field

Galaxhopen SMACS 0723 fotograferad av James Webb-teleskopet.

Källa och licens: NASA, ESA, CSA och STScI via Wikimedia Commons.

Fortsätt scrolla till bild 3.

3. Hubble Ultra Deep Field

Ett djuprymdsfält fyllt med avlägsna galaxer.

Källa och licens: NASA/ESA via Wikimedia Commons.

Fortsätt scrolla till bild 4.

4. Krabbnebulosan

Krabbnebulosans färgrika gasmoln och filament.

Källa och licens: NASA, ESA och Hubble via Wikimedia Commons.

Fortsätt scrolla till bild 5.

5. Södra ringnebulosan

Södra ringnebulosan fotograferad av James Webb-teleskopet.

Källa och licens: NASA, ESA, CSA och STScI via Wikimedia Commons.

Fortsätt scrolla till bild 6.

6. Tarantelnebulosan – närbild

Närbild av stjärnor och gas i Tarantelnebulosan.

Källa och licens: NASA/ESA via Wikimedia Commons.

Fortsätt scrolla till bild 7.

7. Tarantelnebulosan i flera våglängder

Tarantelnebulosan sammansatt av observationer i flera våglängder.

Källa och licens: NASA/CXC/SAO, ESA och JPL-Caltech via Wikimedia Commons.

Fortsätt scrolla till bild 8.

8. Andromedagalaxen

Andromedagalaxens spiralform och ljusa kärna.

Källa och licens: NASA via Wikimedia Commons.

Fortsätt scrolla till bild 9.

9. Cosmic Cliffs

Cosmic Cliffs i Carinanebulosan med stjärnor och moln av gas och stoft.

Källa och licens: NASA, ESA, CSA och STScI via Wikimedia Commons.

Fortsätt scrolla till bild 10.

10. Skapelsens pelare

Skapelsens pelare fotograferade av James Webb-teleskopet.

Källa och licens: NASA, ESA, CSA och STScI via Wikimedia Commons.

<img src="bild-direkt.svg" alt="...">

<img src="bild-langre-ner.webp" alt="..." loading="lazy">

Tillbaka till kapitel 6.2