Images and Media
Learn modern image markup, responsive images, audio, video, captions, lazy loading, and performance-friendly media delivery.
Learn modern image markup, responsive images, audio, video, captions, lazy loading, and performance-friendly media delivery. This hands-on tutorial focuses on practical implementation of images and media concepts.
Images and Media
Modern websites are rich with visual content. HTML provides powerful tools to embed images, video, and audio while maintaining high performance and accessibility.
Lesson Path
- Previous lesson: Links and Navigation
- In this lesson: You learn to handle media like a pro, focusing on performance and accessibility.
- Next lesson: Lists and Tables
The Image Element (<img>)
The <img> tag is an empty element (it has no closing tag). It requires two essential attributes:
src: The path to the image file.alt: A text description for screen readers and when the image fails to load.
<img
src="/assets/coding-setup.jpg"
alt="A clean developer workspace with a mechanical keyboard and two monitors"
width="800"
height="600"
/>
Rule of Thumb: If an image is purely decorative (like a background pattern), use
alt="". If it conveys information, describe it clearly.
Performance: Lazy Loading
Modern browsers support native lazy loading. This prevents the browser from downloading images until they are about to enter the viewport, saving data and speeding up the initial page load.
<img src="heavy-image.jpg" alt="..." loading="lazy" />
Figure and Figcaption
To group an image with a visible caption, use the <figure> and <figcaption> elements. This creates a semantic relationship between the media and its description.
<figure>
<img src="diagram.png" alt="Architecture diagram of a Next.js app" />
<figcaption>Fig 1.1: Standard Vercel Deployment Pipeline.</figcaption>
</figure>
Responsive Images with <picture>
Sometimes you need to serve different images based on the user's screen size (e.g., a small cropped version for mobile and a wide version for desktop).
<picture>
<source media="(max-width: 799px)" srcset="hero-mobile.jpg" />
<source media="(min-width: 800px)" srcset="hero-desktop.jpg" />
<img src="hero-fallback.jpg" alt="Company team photo" />
</picture>
Native Video and Audio
Before HTML5, we needed plugins like Flash. Now, it's native and easy.
<video controls width="100%" poster="preview.jpg">
<source src="tutorial.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Media & Captions Lab
Build a professional image card with a caption and experiment with video controls. Use the style block to make it look like a modern UI component.