<img class="my-image" data-range="320-640" data-retina="auto" />
This demo compares a non-high-resolution (left) with a high-resolution version (right). The high-resolution image is only loaded when the display is capable.
Note the smaller range of image sizes - because the image is half the screen width, the loaded images can be smaller.
In this demo we disable high resolution images for widths greater than 800:
<img class="my-image retina" data-high-resolution="auto" data-high-resolution-maximum="800" />