Resolution-based selection
1
2
3
4
5
6
<img src="https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=240"
alt="A small tree frog"
srcset="https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=1024 1024w,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=960 960w,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=480 480w,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=320 320w">Viewport based selection
1
2
3
4
5
6
7
8
9
10
11
<img src="https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=240"
alt="A small tree frog"
srcset="https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=1024 1024w,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=960 960w,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=480 480w,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=320 320w,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=200&effect=grayscale 200w"
sizes="(max-width: 320px) 200px,
(max-width: 480px) 420px,
(min-width: 2560px) 1024px,
800px">Device-pixel-ratio-based selection
1
2
3
4
5
6
<img src="https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=300"
alt="A dainty tree frog"
srcset="https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=900 3x
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=600 2x,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=450 1.5x,
https://www.contensis.com/image-library/resources-images/image-api-examples/tree-frog.jpg?width=300">