MORFR images for email. Most responsive image techniques rely on swapping an <img> tag for a mobile background-image. The problem with this is that the both images will always be loaded on mobile even if you hide the <img>. This technique solves the problem by removing the actual <img> markup, but only on supported clients. It gracefully falls back to the normal image swapping method (ie. both images loading, then swapped) in unsupported clients. On top of that, you get ultra crisp fluid retina images, free!

Put this between your <head>

<style>
  .background {
    /*background: none;*/
    background-size: cover;
  }
  .background img {
    position: absolute;
  }

  @media screen and (min-width: 0) and (max-width: 480px) {
    .background { background-image: none !important; }

    .background img {
      display: none !important;
    }
  }
</style> 
<!--[if lte IE 8]>
<style>
  .background {
    background: none !important;
  }
</style>
<![endif]-->

The banner code.

<style type="text/css">
  @media screen and (min-width: 0) and (max-width: 480px) {
    .padding-bottom-1 {
      padding-bottom: 125% !important;
      background-image: url(banner1-mobile.png) !important;
    }
  }
</style>
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF">
  <tr>
    <td align="center">

    <!-- BANNER START -->
    <table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;">
      <tr>
        <td style="width: 640px;" background="banner1.png" class="background">
          <img src="cleardot.gif" width="1" height="1" alt="Alt text" align="left" style="display: block">
          <!-- <span> is fine too -->
          <a href="http://www.bing.com/" style="display: block; zoom: 1; max-height: 0; padding-bottom: 31.25%; text-align: left;" class="background padding-bottom-1">
            <template>
              <img width="640" src="banner1.png" border="0" style="display: block; max-height: 200px; max-width: 640px; width: 100%;" alt="" />
            </template>
          </a>
        </td>
      </tr>
    </table>
    <!-- BANNER END -->

    </td>
  </tr>
</table>

I'm using inline <style> because I generate this code through a script. Each banner needs its own class to set the padding-bottom style and swap the background-image.

There are two parts to make this work.

The first part is the html5 <template> tag. In modern browsers any code placed between these tags are treated as a document fragment and are not rendered to the view. This is supported in iOS 8 and above, Android 4.4 and above, and all modern browsers except IE. In clients that support the <template> tag, the <img> tag is simply never rendered and background-image is used instead. The background-image is then swapped using media queries. In clients that don't support <template>, the <img> tag is used for the desktop image and background-image is used for mobile if supported, otherwise the desktop image just scales fluidly.

To make it fluid, and retina, we can't rely on the native image dimensions, especially for backgrounds. The way to do fluid background images is to use a percentage-based padding-bottom property. The percentage is calculated based on the width of the container. Setting the height of the container this way works across all mail clients including Outlook and IE5.5. Setting max-height and position: absolute around the <img> is needed to prevent double spacing.

A few values are needed to get the correct image dimensions in all clients.

The Desktop Image Ratio.
The Mobile Image Ratio.
The Desktop Display Width and Height.

Example
You have the following retina images, each with a native resolution (the actual image size) and a target resolution (the display size):

Desktop: 1280x400 (Native) 640x200 (Target)
Mobile: 640x800 (Native) 320x400 (Target)

The values are calculated as follows:

Desktop Image Ratio: (200 / 640) * 100 = 31.25%
Mobile Image Ratio: (400 / 320) * 100 = 125%

This gives you the padding-bottom values for desktop and mobile as illustrated in the code above.

For the <img> tag however, you need to use the desktop target display dimensions to set width="640", max-width: 640px and max-height: 200px.

That's it. Mobile optimised responsive fluid retina images without breaking the data bank.

NB: About that cleardot.gif, it's only there to provide alt="" text for screen readers. Feel free to use it, replace it or remove it.

You can also swap <template> with <noframes>, but beware of side effects.

Also, there's a bug in Yahoo when setting max-height which will cause the image to collapse, you might want to look here for a fix.