The Picture Element
Write a picture using wide.jpg above 800 pixels and narrow.jpg as the fallback.
Understand the topic
The picture element offers alternative image sources while retaining a required img fallback. A source can depend on media conditions or file type. This supports art direction, such as a tighter crop on a small screen, and alternative formats. The img supplies the alternative text and is the element that actually displays the chosen image.
Worked example
<picture>
<source media="(min-width: 900px)" srcset="/assets/icons/kanbritech_favicon.png">
<img src="/assets/icons/kanbritech_favicon.png" alt="Kanbritech Academy emblem" width="96" height="96">
</picture>Both sources intentionally use the available local asset. In your project, replace the source with a real wide version to see art direction. Sources are considered in order.
Practice
Write a picture using wide.jpg above 800 pixels and narrow.jpg as the fallback.
Show a suggested answer
<picture>
<source media="(min-width: 800px)" srcset="wide.jpg">
<img src="narrow.jpg" alt="Learners working together">
</picture>Common mistake
Do not omit the img fallback or place alt only on source. A source does not replace the image element.