Responsive Images and Video

Code

<!-- Responsive image with srcset -->
<img
  src="default.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A scenic landscape"
  loading="lazy"
/>

<!-- Video with multiple sources -->
<video controls width="640" poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Your browser does not support video.
</video>

<!-- Audio -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
</audio>

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Sales chart" />
  <figcaption>Q4 sales growth</figcaption>
</figure>

Explanation

Uses srcset and sizes to serve appropriately sized images based on viewport width, improving load performance. The video and audio elements support multiple source formats for cross-browser compatibility. figure with figcaption associates media with descriptive captions.

More HTML Snippets