Eksempel 1
Dette bildet mangler attributtene width og height. Legg merke til at layouten hopper når bildet lastes. Åpne utviklerinnstillingene til nettleseren, og aktiver simulering av en lav nettverkshastighet for å se effekten bedre.
Dette er et dokument med supplerende eksempler til artikkelen Veien til detaljrike og responsive bilder som laster raskt.
Dette bildet mangler attributtene width og height. Legg merke til at layouten hopper når bildet lastes. Åpne utviklerinnstillingene til nettleseren, og aktiver simulering av en lav nettverkshastighet for å se effekten bedre.
I motsetning til eksempel 1, har dette bildet både width og height satt. Layouten vil derfor ikke hoppe.
Juster nettleserbredden, og legg merke til at dette bildet er responsivt.
Om du har en høyoppløselig skjerm, vil du legge merke til at dette bildet er skarpere sammenlignet med bildene i de forrige eksemplene.
Når du reduserer justerer nettleserbredden til å bli mindre enn en bestemt verdi, vil det vises et alternativt bilde.
I dette eksempelet tilbys bildet på AVIF-formatet i tillegg til JPEG, i tillegg til lazy loading.
Åpne nettleserens utviklerinnstillinger, og gå til nettverksfanen. Gå til toppen av denne siden, og last siden på nytt. Scroll så sakte nedover. Da vil du legge merke til at at dette bildet først lastes like før du får øye på det.