1-retina_head_js.html

<!--somewhere in the headers or in a site-wide JS file or right before you need a retina snippet -->
<script>var SR=SR||{};SR.RETINA=((window.devicePixelRatio !== undefined)&&(window.devicePixelRatio >= 2));</script>

2-img.html

{% comment %}an image where we use "mogrify" to set an explicit width/height{% endcomment %}

{% spaceless %}<a class="nohlt" href="{{ item.url }}">
<script type="text/javascript">
    if (SR.RETINA) {
        document.write('<img id="lead-art-top" class="lead-art" src="{% mogrify item.photo.url resize "760x420" %}" style="width:380px;height:210px" />');
    } else {
        document.write('<img id="lead-art-top" class="lead-art" src="{% mogrify item.photo.url resize "380x210" %}" style="width:380px;height:210px" />');
    }
</script><noscript>
    <img id="lead-art-top" class="lead-art" src="{% mogrify item.photo.url resize "380x210" %}" style="width:380px;height:210px" />
</noscript></a>{% endspaceless %}

3-img.html

{% comment %}an image where we use "mogrify" to set only explicit width{% endcomment %}

{% spaceless %}<script type="text/javascript">
    if (SR.RETINA) {
        document.write('<img style="width:460px" src="{% mogrify item.image.url thumbnail "940" %}" oncontextmenu="return false;" onmousedown="return false;" onmousemove="return false;" />');
    } else {
        document.write('<img style="width:460px" src="{% mogrify item.image.url thumbnail "460" %}" oncontextmenu="return false;" onmousedown="return false;" onmousemove="return false;" />');
    }
</script><noscript><img style="width:460px" src="{% mogrify item.image.url thumbnail "460" %}" oncontextmenu="return false;" onmousedown="return false;" onmousemove="return false;" /></noscript>{% endspaceless %}