Riloadr

Markups

<img alt="..." 
    data-src="{breakpoint-name}.jpg">
<noscript>
    <img alt="..." src="small.jpg">
</noscript>
...
<script>
    new Riloadr({
        defer: {
            mode: 'invisible',
            threshold: 100
        },
        breakpoints: [
            {name: 'small',     maxWidth:  480},
            {name: 'small@2x',  maxWidth:  480, minDevicePixelRatio: 2},
            {name: 'medium',    minWidth:  481},
            {name: 'medium@2x', minWidth:  481, minDevicePixelRatio: 2},
            {name: 'large',     minWidth: 1025},
            {name: 'large@2x',  minWidth: 1025, minDevicePixelRatio: 2},
        ]
    });
</script>

Feature