HTML Course 12. Responsive images and multimedia

1. Responsive Images

Responsive images allow the browser to choose the most appropriate image resource based on viewport size, pixel density, and device capabilities. Core HTML features include:

• <img srcset> and sizes attributes
• <picture> element for art-direction and format switching
• Lazy loading via the loading attribute

a) srcset and sizes

The srcset attribute lists multiple image sources with their intrinsic widths (or pixel densities). The sizes attribute informs the browser of the image display size under various viewport conditions.

Example: Responsive image with width-based candidates and lazy loading:

<!-- Responsive image with srcset, sizes, and lazy loading -->
<img 
  src='images/photo-800.jpg'                              <!-- Fallback image -->
  srcset='
    images/photo-400.jpg 400w,
    images/photo-800.jpg 800w,
    images/photo-1200.jpg 1200w
  '                                                      <!-- Candidate images -->
  sizes='
    (max-width: 600px) 100vw,                             <!-- If viewport ≤600px, use full width -->
    (max-width: 1200px) 50vw,                            <!-- If ≤1200px, use half width -->
    400px                                                <!-- Otherwise 400px -->
  '
  alt='A scenic mountain lake at sunset'                <!-- Accessible alt text -->
  loading='lazy'                                         <!-- Enable lazy loading -->
>
    

b) picture element for art direction and format switching

The <picture> element allows you to specify multiple <source> elements with different media conditions or file formats. The browser picks the first matching source.

<!-- Art-directed example: different crops for mobile vs desktop -->
<picture>
  <source 
    media='(max-width: 600px)' 
    srcset='images/hero-mobile.jpg' />       <!-- Mobile crop -->
  <source 
    media='(min-width: 601px)' 
    srcset='images/hero-desktop.jpg' />     <!-- Desktop crop -->
  <img 
    src='images/hero-desktop.jpg'               <!-- Fallback -->
    alt='Hero background showing city skyline at dawn'
    loading='lazy'
  />
</picture>
    

You can also include alternate formats for improved compression:

<picture>
  <source 
    type='image/avif' 
    srcset='images/photo.avif 1x, images/photo@2x.avif 2x' />
  <source 
    type='image/webp' 
    srcset='images/photo.webp 1x, images/photo@2x.webp 2x' />
  <img 
    src='images/photo.jpg' 
    srcset='images/photo@2x.jpg 2x' 
    alt='Portrait of a smiling person'
    loading='lazy'
  />
</picture>
    

2. Responsive Multimedia (Video & Audio)

HTML5 provides the <video> and <audio> elements for embedding media with built-in controls, multiple source fallbacks, and text tracks.

a) <video> element features

• controls: Show playback UI
• autoplay, muted, loop
• preload: auto, metadata, none
• Multiple <source> for format fallback (e.g., MP4, WebM, Ogg)
• Optional <track> for captions/subtitles

<!-- Responsive video with multiple formats and captions -->
<video 
  controls 
  preload='metadata' 
  poster='videos/thumb.jpg'   <!-- Shown before playback -->
  width='800'                 <!-- Intrinsic width (optional) -->
  height='450'                <!-- Intrinsic height (optional) -->
>
  <source 
    src='videos/intro.webm' 
    type='video/webm' />
  <source 
    src='videos/intro.mp4' 
    type='video/mp4' />
  <track 
    kind='captions' 
    srclang='en' 
    src='videos/captions_en.vtt' 
    label='English' 
    default />
  <!-- Fallback message for browsers without video support -->
  Your browser does not support HTML5 video.
</video>
    

To make the video responsive, you typically wrap it in a container and apply aspect ratio styling in CSS. Without CSS, you can omit fixed width/height attributes and let it scale at 100% of its container.

b) <audio> element basics

• Embed audio tracks with <audio>
• Multiple <source> for format support (MP3, Ogg, WAV)
• Optional controls, autoplay, loop

<!-- Audio example with format fallbacks -->
<audio controls preload='none'>
  <source src='audio/podcast.mp3' type='audio/mpeg'>
  <source src='audio/podcast.ogg' type='audio/ogg'>
  Your browser does not support the audio element.
</audio>
    

3. Best Practices

• Provide meaningful alt text for images and <track> for captions to ensure accessibility.
• Use modern formats (AVIF/WebP for images, WebM for video) with fallbacks to maximize compression and browser support.
• Enable lazy loading (loading='lazy') for off-screen images and defer non-critical media.
• Specify intrinsic width and height on images and videos to reserve layout space and avoid content shifts.
• Art-direction (<picture>) improves UX by serving context-appropriate crops or ratios.
• Test on real devices and network throttling to verify media load performance.