← Back to Curriculum

Images and Media

📚 Lesson 5 of 20 ⏱️ 25 min

Images and Media

25 min

Images and media content are essential for creating engaging, informative web pages. HTML5 provides native support for images, videos, and audio, enabling rich multimedia experiences without requiring plugins. Understanding how to properly embed and optimize media content is crucial for performance, accessibility, and user experience.

The <img> tag embeds images in web pages. The `src` attribute specifies the image source (URL or path), while the `alt` attribute provides alternative text for users who cannot view the image. Alt text is not optional—it's required for accessibility and should describe the image's content or function. Decorative images can use empty alt text (`alt=""`), but informative images must have descriptive alt text that conveys the same information the image provides.

Responsive images are crucial for modern web development, as users access websites on devices with vastly different screen sizes and resolutions. The `srcset` attribute allows you to specify multiple image sources with different resolutions, and the `sizes` attribute tells the browser which image size to use based on viewport width. The `picture` element provides even more control, allowing you to serve completely different images based on media queries, art direction, and format support.

The <video> tag embeds video content with support for multiple source formats. You can specify multiple <source> elements with different formats (MP4, WebM, OGG) for browser compatibility. Important attributes include `controls` (shows playback controls), `autoplay` (starts automatically—use sparingly), `loop` (repeats video), `muted` (required for autoplay in many browsers), and `poster` (thumbnail image). Always provide captions or transcripts for video content for accessibility.

The <audio> tag embeds audio content similarly to video, with support for multiple source formats. Like video, you can specify multiple <source> elements for format compatibility. Audio elements support `controls`, `autoplay`, `loop`, and `preload` attributes. Consider user experience when using autoplay—many users find unexpected audio playback annoying, and browsers often block autoplay with sound.

Best practices include always providing alt text for images, using responsive images for performance, optimizing media file sizes, providing captions for video and transcripts for audio, considering bandwidth and data usage, and ensuring media content enhances rather than distracts from the main content. Proper media implementation improves accessibility, performance, and user experience across all devices.

Key Concepts

  • The <img> tag embeds images with required alt text for accessibility.
  • Responsive images use srcset and sizes for different screen sizes.
  • The <video> tag embeds video with multiple source format support.
  • The <audio> tag embeds audio content with playback controls.
  • Alt text is required for images and should describe content or function.

Learning Objectives

Master

  • Embedding images with proper alt text for accessibility
  • Creating responsive images with srcset and sizes
  • Embedding video and audio content with proper attributes
  • Understanding media optimization and format compatibility

Develop

  • Accessibility thinking for media content
  • Understanding responsive design for media
  • Performance optimization for multimedia content

Tips

  • Always provide descriptive alt text for informative images.
  • Use srcset and sizes for responsive images to improve performance.
  • Provide multiple video/audio source formats for browser compatibility.
  • Optimize media file sizes to improve page load times.

Common Pitfalls

  • Forgetting alt text, making images inaccessible to screen readers.
  • Using large, unoptimized images that slow down page loading.
  • Autoplaying media with sound, disrupting user experience.
  • Not providing captions or transcripts for video/audio content.

Summary

  • Images require alt text for accessibility.
  • Responsive images improve performance across devices.
  • Video and audio elements support multiple formats for compatibility.
  • Media content should be optimized and accessible.
  • Proper media implementation enhances user experience.

Exercise

Embed an image with an alt text. (Note: Image URL might not work in this editor).

<img alt="A placeholder image" src="https://images.unsplash.com/photo-1700908558030-5f008cb21f05" />

Exercise Tips

  • Try adding srcset with multiple image sizes for responsive images.
  • Experiment with the <picture> element for art direction.
  • Create a video element with multiple source formats.
  • Test your images with a screen reader to verify alt text quality.

Code Editor

Output