HuntExams Academy
HTML/CSSIntermediate#html#media#responsive

What is the <picture> element used for?

<picture> allows serving different images based on media queries or format support (art direction and responsive images), letting the browser pick the best matching <source> before falling back to the default <img>.

Example
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Product photo">
</picture>

Related Questions

1
HTML/CSSAdvanced#html#media

What is srcset and sizes used for on <img>?

Open
2
HTML/CSSBeginner#html#semantics

What is the difference between <b>/<i> and <strong>/<em>?

Open
3
HTML/CSSIntermediate#accessibility#aria

What is ARIA and when should you use it?

Open