1. Detect devicePixelRatio 2. Set Cookie 3. Render correct image for dPR - adjust jpeg quality based on dPR.

_Media.xslt

<!-- Fetch devicePixelRatio -->
  <xsl:variable name="devicePixelRatio" select="normalize-space(umb:RequestCookies('dPR'))" />

<!-- Template for a Media Image -->
  <xsl:template match="Image" name="GenericImage">
    <xsl:param name="class"/>
    <xsl:param name="crop"/>
    <xsl:param name="id"/>
    <xsl:param name="size"/>
    <xsl:param name="retinafy"/>
    <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{@nodeName}">
      <!-- In retina mode use half dimensions -->
      <!-- REMOVED -->
      
      <!-- Let's adjust our dimensions based on FACT ;) -->
      <xsl:if test="$devicePixelRatio &gt; 1">
        <xsl:attribute name="src">
          <xsl:value-of select="umbracoFile"/>
          <xsl:text>?mode=crop-up&amp;width=</xsl:text>
          <xsl:value-of select="floor(substring-before($size, 'x') * $devicePixelRatio)"/>
          <xsl:text>&amp;height=</xsl:text>
          <xsl:value-of select="floor(substring-after($size, 'x') * $devicePixelRatio)"/>
          <xsl:text>&amp;quality=</xsl:text>
          <!-- When dPR set Quality to 70, reduce quality as dPR increases -->
          <xsl:value-of select="70 - (20 * (get:log($devicePixelRatio) div get:log(2)))"/>
        </xsl:attribute>
      </xsl:if>

      <!-- $size can override original + cropped sizes -->
      <xsl:if test="$size">
        <xsl:attribute name="width">
          <xsl:value-of select="substring-before($size, 'x')"/>
        </xsl:attribute>
        <xsl:attribute name="height">
          <xsl:value-of select="substring-after($size, 'x')"/>
        </xsl:attribute>
      </xsl:if>
      <xsl:if test="$class">
        <xsl:attribute name="class">
          <xsl:value-of select="$class"/>
        </xsl:attribute>
      </xsl:if>
      <xsl:if test="$id">
        <xsl:attribute name="id">
          <xsl:value-of select="$id"/>
        </xsl:attribute>
      </xsl:if>
    </img>
  </xsl:template>

onload.js

// drop session cookie containing dPR.
document.cookie='dPR=' + window.devicePixelRatio + ';path=/'

// ORGINAL VERSION BELOW ;)

// var pixelRatio = window.devicePixelRatio;
// var retina = pixelRatio > 1;
 
// if (retina) {
  // the user has a retina display
  // document.cookie='dPR=' + '1.5' + ';path=/'
// }
// else {
  // the user has a non-retina display
// }

output.html

<h1>devicePixelRatio Tests</h1>

<h2>dPR = 1</h2>
<img width="1280" height="792" src="/media/5507/studio2_shot1.jpg">

<h2>dPR = 1.5</h2>
<img width="1280" height="792" src="/media/5507/studio2_shot1.jpg?mode=crop-up&amp;width=1920&amp;height=1188&amp;quality=58.30074998557688">

<h2>dPR = 2</h2>
<img width="1280" height="792" src="/media/5507/studio2_shot1.jpg?mode=crop-up&amp;width=2560&amp;height=1584&amp;quality=50">

<h2>dPR = 4</h2>
<img width="1280" height="792" src="/media/5507/studio2_shot1.jpg?mode=crop-up&amp;width=5120&amp;height=3168&amp;quality=30">