picture image srcset

by Sreeraj Saseendran

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>The picture element</h1>

<p>Resize the browser window to load different images.</p>

<picture>
 <source media="(max-width:360px)" srcset="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=211&width=163&canvas=163:211">
  <source media="(max-width:430px)" srcset="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=257&width=198&canvas=198:257">
  <source media="(max-width:767px)" srcset="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=476&width=366&canvas=366:476">
   <source media="(max-width:1023px)" srcset="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=396&width=304&canvas=304:396">
  <source media="(max-width:1339px)" srcset="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=272&width=209&canvas=209:272">
  <source media="(max-width:1799px)" srcset="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=334&width=257&canvas=257:334">
  <source media="(min-width:1800px)" srcset="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=448&width=345&canvas=345:448">
  <img src="https://staging3.zimmermann.com/media/catalog/product/1/_/1.9853dss242.blf.black-floral.jpg?quality=100&bg-color=255,255,255&fit=bounds&height=211&width=163&canvas=163:211" alt="Flowers">
</picture>

</body>
</html>