Bootstrap Data Src

Github page: http://monkeymonk.github.io/bootstrap-data-src/

Regular usage:

HTML

<img class="fade" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""
    data-xs="image-xs.png"
    data-sm="image-sm.png"
    data-md="image-md.png"
    data-lg="image-lg.png"
/>

Javascript

<script>
$(document).ready(function () {
    $('img').dataSrc({
        resize: true
    });
});
</script>

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Lazy load usage:

HTML

<img class="fade" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""
    data-xs="image-xs.png"
    data-sm="image-sm.png"
    data-md="image-md.png"
    data-lg="image-lg.png"
/>

Javascript

<script>
$(document).ready(function () {
    $('img').dataSrc({
        offset: -200,
        inview: true
    });
});
</script>

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City

Phone - XS - Food

Tablet - SM - People

Desktop - MD - Sports

LG Desktop - LG - City