imgset

Imgset.js

Javascript image loading based on element width.

Syntax

Note: alt, and focus are not currently implemented.

// HTML
<span class="Imgset">
  <noscript 
    data-json='{
      "set": {
        "0": "photo-500.jpg",
        "768": "photo-1000.jpg",
        "1024": "photo-1400.jpg"
      },
      "alt": "Alternate text.",
      "focus": ["x", "y"]
    }'
  >
    <img src="photo-1000.jpg" alt="Alternate Text." />
  </noscript>
</span>

In most of my implementations I know the image width and height and inline padding bottom (height / width * 100%) to preserve the image ratio.

<span class="Imgset" style="padding-bottom: 66.66%;">
  ...
</span>

<span class="Imgset">
  // Elements created by Imgset.js:
  <div class="Imgset__background" background-image="{ img_source }" />
  <img class="Imgset__img" src="{ img_source }" />
  <noscript 
    data-json='{...}'
  >
    <img src="photo-1000.jpg" alt="Alternate Text." />
  </noscript>
</span>

Do some scripts

// JS
import Imgset

Imgset()
// or
Imgset('.mySelector')