CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Responsive hero

HTML course · Advanced · Lesson 12/56

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

What we learned in this group

In this group you learned responsive image techniques:

  • <picture> and <source> for image selection
  • media for per-screen art direction
  • type for progressive AVIF/WebP serving
  • width and height to reserve space and reduce CLS
  • empty alt="" for decorative images

Combine these five and you get an image that is fast, accessible and shows the right crop per screen. Now we will merge them in a responsive hero image.

Exercise Write a responsive hero image

Add a <picture> to body. Put two <source> tags inside: the first with media set to (min-width: 800px), srcset set to hero-wide.avif and type set to image/avif; the second with media set to (max-width: 799px), srcset set to hero-narrow.webp and type set to image/webp. Finish with an <img> whose src is hero-narrow.png, alt is Hero image, width is 800 and height is 450.

Show example solution 
<body>
  <picture>
    <source media="(min-width: 800px)" srcset="hero-wide.avif" type="image/avif">
    <source media="(max-width: 799px)" srcset="hero-narrow.webp" type="image/webp">
    <img src="hero-narrow.png" alt="Hero image" width="800" height="450">
  </picture>
</body>

Test yourself

  1. Match each concept to its role

    <picture>
    Image selection wrapper
    media
    Screen condition
    type
    Format (MIME)
    width/height
    Space reservation
    alt=""
    Decorative image

  2. Open the responsive hero with picture

    <____>
  <source media="(min-width: 800px)" srcset="hero-wide.avif" type="image/avif">
  <img src="hero-narrow.png" alt="Hero image" width="800" height="450">
</picture>
    Show answer 
    <picture>
  <source media="(min-width: 800px)" srcset="hero-wide.avif" type="image/avif">
  <img src="hero-narrow.png" alt="Hero image" width="800" height="450">
</picture>

  3. Which is the best structure for a responsive hero image?

    • A picture with media-based sources and a final img fallback
    • Only an img and a CSS background-image
    • A picture with only one source and no img
    • Several img tags side by side
    Show answer

    A picture with media-based sources and a final img fallback — Correct. media sources with an img fallback is ideal for a responsive hero.

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