CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Performance gallery

HTML course · Advanced · Lesson 6/56

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

  1. 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

  2. loading and decoding together

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

  3. 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.

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone