Copy environment

Image

Preview 
<div class="image  ">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w, //placehold.it/200x200 200w" data-sizes="auto" alt="image alt text"
        class="image__img lazyload">
</div>
 
{
  "language": "en-US",
  "data": {
    "srcset": "//placehold.it/100x100 100w, //placehold.it/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  }
}

Fluid

Preview 
<div class="image image--fluid ">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w, //placehold.it/200x200 200w" data-sizes="auto" alt="image alt text"
        class="image__img lazyload">
</div>
 
{
  "language": "en-US",
  "data": {
    "srcset": "//placehold.it/100x100 100w, //placehold.it/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  },
  "modifier": "image--fluid"
}

Picture

Preview 
<div class="image  ">
    <picture class="image__picture">
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20175%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x175 100w, //placehold.it/200x350 200w" media="(min-width: 1170px)" />
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20150%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x150 100w, //placehold.it/200x300 200w" media="(min-width: 1024px)" />
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20125%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x125 100w, //placehold.it/200x250 200w" media="(min-width: 768px)" />
        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w, //placehold.it/200x200 200w" data-sizes="auto" alt="image alt text"
            class="image__img lazyload">
    </picture>
</div>
 
{
  "language": "en-US",
  "data": {
    "srcset": "//placehold.it/100x100 100w, //placehold.it/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "sources": [
      {
        "srcset": "//placehold.it/100x175 100w, //placehold.it/200x350 200w",
        "aspectRatio": {
          "width": 100,
          "height": 175
        }
      },
      {
        "srcset": "//placehold.it/100x150 100w, //placehold.it/200x300 200w",
        "aspectRatio": {
          "width": 100,
          "height": 150
        }
      },
      {
        "srcset": "//placehold.it/100x125 100w, //placehold.it/200x250 200w",
        "aspectRatio": {
          "width": 100,
          "height": 125
        }
      }
    ]
  },
  "media": [
    "(min-width: 1170px)",
    "(min-width: 1024px)",
    "(min-width: 768px)"
  ]
}