Picture element
Log in to add to favouritesPage last updated 07 October 2026
Art direction
Use a picture element when the shape of the image should change with the layout, rather than just its size. Each source asks the Image API for a different crop of the same uploaded image.
<picture>
<!-- Narrow viewports get a tall crop -->
<source media="(max-width: 480px)"
srcset="https://www.contensis.com/image-library/resources-images/image-api-examples/coastal-landscape-with-rocky-shoreline.jpg?w=480&h=640&fit=crop&fp=0.64,0.56"
width="480" height="640">
<!-- Tablets get a 4:3 crop -->
<source media="(max-width: 1024px)"
srcset="https://www.contensis.com/image-library/resources-images/image-api-examples/coastal-landscape-with-rocky-shoreline.jpg?w=1024&h=768&fit=crop&fp=0.64,0.56"
width="1024" height="768">
<!-- Anything wider gets a letterbox banner -->
<img src="https://www.contensis.com/image-library/resources-images/image-api-examples/coastal-landscape-with-rocky-shoreline.jpg?w=1600&h=600&fit=crop&fp=0.64,0.56"
width="1600" height="600"
alt="A lighthouse above a rocky shoreline at sunset">
</picture>- Sources are tried in order and the first one whose
mediacondition matches is used, so list them narrowest first when usingmax-width. - The
imgis required. It provides the alt text and the image used when no source matches, and a picture element without one displays nothing. - Give every source and the
imgawidthandheightmatching the rendition it asks for, so the browser reserves the right shape and the page does not jump as the image loads. - Each source carries a single URL and no width descriptor, because there is one candidate to choose from. To offer the same crop at several sizes as well, add a
srcsetof candidates and asizesattribute to that source, exactly as on animg.
Each source above carries the same focal point, so every crop keeps the lighthouse in frame whatever shape the layout asks for. See focal point.