Guided Notes

Media Elements

Responsive images, audio, video, captions, and embedding content with iframes.

Responsive images

Slide 1 / 5

Phones don't need 4K images. srcset lets the browser pick the right file for the screen:

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 600px" alt="Mountain lake at sunrise">

<picture> goes further, offering different formats or crops:

<picture> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Mountain lake at sunrise"> </picture>

← Tables