I recently started experiementing with using high resolution media queries in my campaigns:

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 

 }

This should cover webkit and other devices as a whole, in particular Windows Phone for min-resolution and -webkit-min-device-pixel-ratio for Android/iOS.

The aim is to optimise critical image assets, i.e. branding, icons etc. Problem is the most standard technique, image swapping, conflicts with one of the often overlooked but important areas, accessibility. Here's an quick example, to demonstrate. Imagine this appears in the top region of the email.

Example HTML:

  <table border="0" cellpadding="0" cellspacing="0" class="header">
      <tr>
          <td class="logo" align="left" valign="top" style="line-height:25px;font-size:22px; color:#000000; font-family:Helvetica, Arial, sans-serif;">
              <a href="http://companyname.com" target="_blank">
                  <img src="path/to/normal-image.jpg" alt="Company Name" width="248" height="68px" style="display:block;" border="0" />
              </a>
          </td>
      </tr>
  </table>

Example CSS:

  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
      table[class="header"] td[class="logo"] img { display:none !important; }
      table[class="header"] td[class="logo"] a { display:block !important; width:248px !important; height:68px !important; background-image:url(path/to/2x-image.jpg) !important; background-size:248px auto !important; background-repeat:no-repeat !important; }
  }

The code itself, works fine. In this case as an anchor is being used, the media query targets the anchor element, to maintain the click/tap function, but this could of just targetted the td cell directly if needed e.g. when a table cell isn't an anchor/CTA.

While I believe the media query approach is the best, as it ensures that only clients with high res devices download the 2x image, by removing the img element, the alternative text is completly lost, meaning with images off there is now a blank space with nothing there, but in order for the high res image to appear the original image element has to be removed.

Accessiblity wise, this to me is to a conflict with the whole images off scenario. Essentially, clients with images off AND high res devices now suffer at the expense of higher quality image assets.

My initial thoughts were to maybe use a table cell background to indicate something is there, to at least avoid complete blank white space, but this surely doesn't go far enough, the alternative text is lost and hence so is potentially the message when images are off.

Generally, I'm interested in what others have been doing in terms of high-res images and the best practices. Are there better ways to do this perhaps?

Look forward to hearing from the community on this!

James