CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge - Responsive image

HTML course · Advanced · Lesson 52/56

Write a hero with <picture> that changes per screen and format.

Responsive image challenge

This challenge tests the full responsive image topic: the <picture> wrapper, <source> for screen and format selection, the <img> fallback, and performance settings.

You will build a hero image: media for narrow and wide crops, type="image/webp" for a modern format, srcset and sizes for resolution choice, loading="lazy" and decoding="async" for smooth loading, and width with height to reserve space. Wrap it in <figure> with a <figcaption>.

Exercise Write the hero image from scratch

Add a <figure> to body. Put a <picture> inside. Inside picture write two <source> tags: the first with media="(min-width: 800px)" and srcset="/img/hero-wide.jpg", the second with type="image/webp" and srcset="/img/hero.webp". As the last child of picture add an <img> with src="/img/hero-narrow.jpg", alt="Mountain landscape", width="1200", height="600", loading="lazy", decoding="async", srcset="/img/hero-narrow.jpg 600w" and sizes="100vw". After picture add a <figcaption> with a caption.

Show example solution 
<body>
  <figure>
    <picture>
      <source media="(min-width: 800px)" srcset="/img/hero-wide.jpg">
      <source type="image/webp" srcset="/img/hero.webp">
      <img src="/img/hero-narrow.jpg"
           alt="Mountain landscape"
           width="1200" height="600"
           loading="lazy" decoding="async"
           srcset="/img/hero-narrow.jpg 600w"
           sizes="100vw">
    </picture>
    <figcaption>The view above is striking.</figcaption>
  </figure>
</body>

Test yourself

  1. Which attribute selects a source by screen width?

    • srcset
    • sizes
    • media
    • type
    Show answer

    media — Correct. The media attribute defines a screen condition; when it matches, that source is chosen.

  2. Write the WebP source

    <picture>
  <source ____="image/webp"
        srcset="/img/hero.webp">
  <img src="/img/hero-narrow.jpg" alt="Mountain landscape">
</picture>
    Show answer 
    <picture>
  <source type="image/webp"
        srcset="/img/hero.webp">
  <img src="/img/hero-narrow.jpg" alt="Mountain landscape">
</picture>

  3. Match each attribute to its role

    media
    Screen condition
    type
    File format
    srcset
    Image path
    sizes
    Viewport width
    loading
    Load timing

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