← HTML Fundamentals
Modern HTML and projects · 15 MIN

Embedding and responsive images

Embedding and responsive images

The picture element can provide alternate sources for art direction or formats. srcset and sizes let the browser choose an image candidate. Always provide a useful fallback src and descriptive alt text.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

<img src="small.jpg" srcset="small.jpg 480w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px" alt="Mountain landscape">