Adaptive Images

Markup

<style>
#gallery img {
    opacity: 0;
    transition: opacity .3s ease-in;
}
</style>
...
<ul class="clearfix" id="gallery">
    <li><img data-src="sample1.jpg" alt="..."></li>
    <li><img data-src="sample2.jpg" alt="..."></li>
    <li><img data-src="sample3.jpg" alt="..."></li>
    ...
</ul>
...
<script>
    /* make cookie valid only for this page */
    document.cookie = 'resolution=' +
        $("#gallery li:first-child").width() * (window.devicePixelRatio || 1);

    /* lazy loding */
    $(window).on('load', function () {
        $('#gallery img').unveil(200, function () {
            $(this).load(function () {
                this.style.opacity = 1;
            });
        });
    });
</script>

Feature