Media Elements
Embed and optimize images, video, and audio with modern HTML features
What you'll learn
Use <picture> with multiple <source> elements for responsive images
Configure <img> attributes: loading, decoding, fetchpriority, sizes
Embed <video> with <track> for captions and subtitles
Use <audio> with multiple source formats
Write srcset and sizes attributes for resolution switching
Understand native lazy loading behavior
The <img> Element — Modern Attributes
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="Mountain landscape at sunset"
loading="lazy"
decoding="async"
fetchpriority="low"
width="800"
height="600"
/>
| Attribute | Purpose |
|---|---|
loading="lazy" | Defer loading until near viewport |
loading="eager" | Load immediately (use on above-fold images) |
decoding="async" | Decode off main thread |
fetchpriority="high" | Hint to prioritize (LCP image) |
sizes | Tell browser how wide the image displays |
Responsive Images with srcset & sizes
Two patterns:
Resolution switching — same crop, different sizes:
<img srcset="icon-2x.png 2x, icon-3x.png 3x" src="icon-1x.png" alt="Icon" />
Art direction — different crops for different viewports:
<picture>
<source media="(min-width: 1200px)" srcset="wide-hero.jpg" />
<source media="(min-width: 768px)" srcset="tablet-hero.jpg" />
<img src="mobile-hero.jpg" alt="Hero image" />
</picture>
Always Include alt
Missing alt text is an accessibility failure. Decorative images use
alt="". Informative images need a descriptive alt. Screen readers announce
the alt, so keep it meaningful.
The <picture> Element
Art direction and format selection in one element.
<picture>
<!-- WebP for browsers that support it -->
<source type="image/webp" srcset="photo.webp" />
<!-- AVIF for next-gen compression -->
<source type="image/avif" srcset="photo.avif" />
<!-- Fallback JPEG -->
<img src="photo.jpg" alt="Photo" loading="lazy" />
</picture>
Video with Captions
<video controls width="100%" poster="thumbnail.jpg" preload="metadata">
<source src="tutorial.mp4" type="video/mp4" />
<source src="tutorial.webm" type="video/webm" />
<track
kind="captions"
src="captions.vtt"
srclang="en"
label="English"
default
/>
<p>
Your browser doesn't support video. <a href="tutorial.mp4">Download</a>.
</p>
</video>
Audio Element
<audio controls preload="metadata">
<source src="podcast.mp3" type="audio/mpeg" />
<source src="podcast.ogg" type="audio/ogg" />
<p>Your browser doesn't support audio. <a href="podcast.mp3">Download</a>.</p>
</audio>
Lazy Loading Behavior
Native loading="lazy" defers off-screen images. Browser fetches them when the user scrolls near.
<!-- Lazy load off-screen images — saves bandwidth -->
<img src="gallery-1.jpg" alt="Gallery" loading="lazy" />
<img src="gallery-2.jpg" alt="Gallery" loading="lazy" />
<!-- Eager load the hero / LCP image — must be above the fold -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" loading="eager" />
Build Responsive Image Gallery
Code
html
1<div class="gallery-grid">2<div class="gallery-card">3 <h3>Gallery Item 1</h3>4 <p>Use a <picture> element here</p>5</div>6</div>A responsive image gallery using `<picture>` and `<source>` elements for art direction and format fallbacks. The browser picks the optimal image for each viewport.
Key Takeaways
Use srcset and sizes for resolution switching on <img>
Use <picture> for art direction and format fallbacks
loading="lazy" defers off-screen images, fetchpriority="high" prioritizes LCP images
<video> supports multiple <source> formats and <track> for captions
<audio> follows the same pattern as video for multiple sources
Always include alt text and a fallback message inside media elements