Summary - Performance gallery

Write an image gallery with all performance techniques.

What we learned in this group

In this group you met five techniques that speed up images:

loading="lazy": lazy load
decoding="async": decode in background
srcset and sizes: responsive image
width/height: prevent layout shift
preload and prefetch: fetch early

Now we will combine them in a performance gallery.

Exercise Write a performance gallery

Add two <figure> blocks inside body. Each figure holds an <img> and a <figcaption>. Each img should hold src, a non-empty alt, numeric width and height, loading="lazy" and decoding="async". The figcaption texts should be Street cat and Park dog.

Show example solution

<body>
  <figure>
    <img src="/images/cat.jpg" alt="Street cat"
         width="800" height="600"
         loading="lazy" decoding="async">
    <figcaption>Street cat</figcaption>
  </figure>
  <figure>
    <img src="/images/dog.jpg" alt="Park dog"
         width="800" height="600"
         loading="lazy" decoding="async">
    <figcaption>Park dog</figcaption>
  </figure>
</body>

Test yourself

Match each technique to its goal

loading="lazy"

Lazy load
decoding="async"

Decode in background
srcset

Resolution candidates
width/height

Prevent layout shift
preload

Fetch critical early

loading and decoding together

<img src="/images/forest.jpg" alt="Forest" ____>

Show answer

<img src="/images/forest.jpg" alt="Forest" loading="lazy" decoding="async">

For a blog cover image at the top of the page, which approach is most performant?
- Lazy-load with loading="lazy"
- Decode at once with decoding="sync"
- Cache with rel="prefetch"
- Fetch early with rel="preload"
Show answer

Fetch early with rel="preload" — Correct. The cover image on top is critical, so preload fetches it early; not lazy.

Next lesson: Picture and source

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies