Copy environment

Image

<div class="image  ">
    <div class="image__inner">
        <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">
        <noscript>
                <img src="//placehold.it/100x100" srcset="//placehold.it/100x100 100w, //placehold.it/200x200 200w" sizes="100vw" alt="image alt text" class="image__img">
            </noscript>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "src": "//placehold.it/100x100",
    "srcset": "//placehold.it/100x100 100w, //placehold.it/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  }
}

Fluid

<div class="image image--fluid ">
    <div class="image__inner">
        <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">
        <noscript>
                <img src="//placehold.it/100x100" srcset="//placehold.it/100x100 100w, //placehold.it/200x200 200w" sizes="100vw" alt="image alt text" class="image__img">
            </noscript>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "src": "//placehold.it/100x100",
    "srcset": "//placehold.it/100x100 100w, //placehold.it/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  },
  "modifier": "image--fluid"
}

Picture

<div class="image  ">
    <div class="image__inner">
        <picture class="image__picture">
            <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/100x175 100w, //placehold.it/200x350 200w" media="(min-width: 1170px)" />
            <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/100x150 100w, //placehold.it/200x300 200w" media="(min-width: 1024px)" />
            <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 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>
</div>
{
  "language": "en-US",
  "data": {
    "src": "//placehold.it/100x100",
    "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"
      },
      {
        "srcset": "//placehold.it/100x150 100w, //placehold.it/200x300 200w"
      },
      {
        "srcset": "//placehold.it/100x125 100w, //placehold.it/200x250 200w"
      }
    ]
  },
  "media": [
    "(min-width: 1170px)",
    "(min-width: 1024px)",
    "(min-width: 768px)"
  ]
}

Square

<div class="image image--square ">
    <div class="image__inner">
        <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">
        <noscript>
                <img src="//placehold.it/100x100" srcset="//placehold.it/100x100 100w, //placehold.it/200x200 200w" sizes="100vw" alt="image alt text" class="image__img">
            </noscript>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "src": "//placehold.it/100x100",
    "srcset": "//placehold.it/100x100 100w, //placehold.it/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  },
  "modifier": "image--square"
}

Background

<div class="image image--background ">
    <div class="image__inner">
        <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">
        <noscript>
                <img src="//placehold.it/100x100" srcset="//placehold.it/100x100 100w, //placehold.it/200x200 200w" sizes="100vw" alt="image alt text" class="image__img">
            </noscript>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "src": "//placehold.it/100x100",
    "srcset": "//placehold.it/100x100 100w, //placehold.it/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  },
  "modifier": "image--background"
}