HTML5 Media: Images, Responsive Picture & Video

Master high-performance image loading, responsive picture art direction, resolution switching (srcset & sizes), and audio/video streaming tags.

1. The Modern <img> Element & Core Web Vitals

The <img> tag is a replaced void element that embeds raster or vector graphic assets into the document. In modern frontend development, proper image attributes directly dictate Core Web Vitals scores (LCP and CLS):

💡 Real-World Analogy: Custom Framing in an Art Gallery

Think of web browser image rendering like hanging paintings in an art gallery:
• Width & Height Attributes are pre-reserved wall frames. The browser reserves the space before the canvas arrives, preventing the entire gallery wall from jumping when loaded (prevents Cumulative Layout Shift)!
• loading="lazy" is on-demand delivery: only bring the painting from the warehouse when the visitor walks into that specific showroom!
• alt text is the museum audio tour guide describing the masterpiece for visually impaired guests.

01

The alt Attribute

Screen Readers & SEO

  • Informative: Describe meaning and context (e.g. alt="Quarterly engineering growth graph 2026").
  • Decorative: Use alt="" so screen readers skip background patterns.
  • Never omit alt entirely!
02

Intrinsic Ratio (CLS)

Zero Layout Shifts

  • Always supply raw width="800" height="600" attributes.
  • Browser calculates aspect-ratio: 800/600 automatically.
  • Prevents janky content jumps as images download.
03

Fetch Optimization

Speed & Battery Saver

  • loading="lazy": Defers offscreen image loading until near viewport.
  • decoding="async": Decodes image on background thread without blocking main thread.
  • fetchpriority="high": Prioritizes above-the-fold hero images.
HTML Source Code image-figure.html 
<figure>
  <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600"
       alt="Modern programming workstation"
       loading="lazy"
       decoding="async">
  <figcaption>
    Figure 1: High performance developer workspace.
  </figcaption>
</figure>
Rendered Browser Output ● Live Preview
Modern programming workstation
Figure 1: High performance developer workspace.

2. Resolution Switching with srcset & sizes

Delivering a 4K 4000px image to a 375px mobile phone wastes bandwidth, slows downloads, and degrades battery life. srcset lets you provide a portfolio of image widths so the browser automatically downloads the perfect size:

Resolution Switching with Width Descriptors (w)
<!-- Browser reads viewport width + screen pixel density to pick smallest optimal file -->
<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w,
             photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1024px) 50vw,
            800px"
     alt="Software development team collaboration workshop"
     loading="lazy">

📐 How sizes & srcset Math Works

• 400w, 800w, 1200w informs the browser of the exact pixel width of each image file on the server.
• sizes="(max-width: 600px) 100vw, 800px" tells the browser what CSS display slot width the image will occupy before CSS loads.
• On a 375px mobile device with 2x Retina screen, required pixels = 375px * 2 = 750px. The browser smartly downloads photo-800.jpg!

3. Art Direction & Next-Gen Formats with <picture>

While srcset on <img> handles resolution switching, the <picture> element is required when you need to crop the image differently on mobile (Art Direction) or serve cutting-edge formats (AVIF / WebP) with legacy fallbacks:

Art Direction + AVIF / WebP Format Fallbacks
<picture>
  <!-- 1. Mobile Portrait Crop in Ultra-Compressed AVIF format -->
  <source media="(max-width: 640px)" srcset="hero-square.avif" type="image/avif">
  
  <!-- 2. Mobile Crop fallback in WebP -->
  <source media="(max-width: 640px)" srcset="hero-square.webp" type="image/webp">

  <!-- 3. Desktop Widescreen in AVIF -->
  <source srcset="hero-wide.avif" type="image/avif">

  <!-- 4. Desktop Widescreen in WebP -->
  <source srcset="hero-wide.webp" type="image/webp">

  <!-- 5. Mandatory Fallback <img> (receives the rendered attributes) -->
  <img src="hero-wide.jpg" 
       alt="Modern corporate campus" 
       width="1600" 
       height="900" 
       loading="lazy">
</picture>

4. HTML5 Video & Audio Streaming Elements

Native HTML5 audio and video elements completely replace legacy Flash plugins with hardware-accelerated media players:

Attribute Target Element Functional Behavior
controls <video> / <audio> Renders native browser playback UI (play/pause button, scrubber, volume, fullscreen).
poster="thumb.jpg" <video> Displays placeholder cover art image before video playback initiates.
muted + autoplay <video> Mandatory pair for autoplay. Modern browsers block all audio-enabled autoplay to prevent startling users.
playsinline <video> Forces video to play inline within the webpage on iOS Safari instead of taking over fullscreen.
<track kind="subtitles"> <video> Provides WebVTT captions, subtitles, and descriptions for accessibility compliance.
HTML Source Code media-player.html 
<div class="media-card">
  <h4>Frontend Mock Interview Prep</h4>
  <audio controls style="width: 100%;">
    <source src="interview-prep.mp3" type="audio/mpeg">
    Your browser does not support audio element.
  </audio>
</div>
Rendered Browser Output ● Live Preview

🎙️ Frontend Mock Interview Prep

5. HTML5 Media Placement Interview Quiz Deck

Test your knowledge on image optimization, responsive design, and video playback rules:

🎯 HTML5 Media Interview Deck
Question 1 of 5
⭐ Core Web Vitals • CLS Intrinsic Dimensions
Why is it best practice to always include width and height attributes on <img> elements even when styling with CSS?
A) It automatically resizes the image file on the server.
B) The browser pre-reserves aspect ratio layout space, preventing Cumulative Layout Shift (CLS).
C) HTML validators reject image tags without dimension integers.
D) It converts PNG images to WebP format in memory.
⭐ Accessibility • a11y Decorative Images
How should purely decorative images (like background swirls or decorative dividers) be marked for accessibility?
A) Remove the alt attribute entirely.
B) Set alt="decorative image".
C) Set alt="" (empty string alt attribute).
D) Set alt="null".
⭐ Architecture • Responsive <picture> vs <img srcset>
When is the <picture> element preferred over <img srcset>?
A) When art direction (different image crops per breakpoint) or next-gen format fallbacks (AVIF/WebP) are required.
B) Whenever using SVG vector icons.
C) Picture elements are strictly mandatory for all images above 1000px.
D) Picture tags eliminate the need for an <img> fallback.
⭐ Media Rules • UX Autoplay Policy
What attribute combination is required for a video to reliably autoplay across all modern web browsers?
A) autoplay loop
B) autoplay muted
C) autoplay controls
D) autoplay playsinline
⭐ Accessibility • Subtitles <track> Element
Which HTML tag is used inside <video> to provide closed captions or subtitles formatted in WebVTT?
A) <subtitle>
B) <track>
C) <caption>
D) <vtt>
Score: 0 / 5

🎯 Placement Interview Takeaways

  • Q: Should lazy loading (loading="lazy") be added to the Hero image?
    Ans: NO! Adding loading="lazy" to the primary above-the-fold hero image delays Largest Contentful Paint (LCP) because the browser defers loading until layout recalculation. Use loading="eager" and fetchpriority="high" for hero images.
  • Q: What is the difference between WebP and AVIF image formats?
    Ans: Both are modern compressed image codecs. WebP offers ~30% smaller sizes than JPEG. AVIF (based on the AV1 video codec) achieves up to ~50% smaller sizes with superior HDR and color fidelity, but requires slightly more CPU decoding time.
  • Q: Why is an <img> element still required inside a <picture> tag?
    Ans: The <picture> element itself is an invisible wrapper providing candidate rules. The internal <img> tag is what is actually rendered in the DOM tree, displaying the chosen source. Without an <img>, nothing renders!