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')