HTML Email - different images for desktop and mobile

Question

I think I have tried all possible existing solutions so I am here to ask if anyone know what is the best way to display a:

• simple (clickable or not clickable) image
• using a different image for desktop and mobile
• compatible with most popular email clients

The solution posted here: A Slick, New Image Swapping Technique for Responsive Emails seems to be the best so far but it has one little big issue, the 2 images are always downloaded (I don't mean displayed), either you are on mobile or desktop.

<a href="http://www.emailonacid.com">
  <span id="switcher">
    <img id="houdini" src="http://www.sample.com/desktop.jpg" alt="">
  </span>
</a>

 <style>
  @media only screen and (max-device-width: 489px) {
    span[id=switcher] {
      display:block;
      background-image: url(http://www.sample.com/mobile.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 250px !important;
    }
    img[id=houdini] {display: none !important;}1
  }
</style>

The "img" tag always download the image even if it is not displayed (display:none).

I have tried many other ways, using background-images on tables but this seems to require VML code for microsoft and the solution looks really messy and sometimes not even working on android.

Is anyone able to help?

JSFiddle

Thank you

Answer 1

There is no way to have different images for desktop and mobile and not have them both downloaded, for email. Getting around that requires Javascript, which isn't supported in any major email client.

I should also like to point out that image swapping, no matter which method you use, isn't supported on some major mail apps, especially Gmail. From design standpoint, the best practice is to use the same image for desktop and mobile.

Answer 2

As others mentioned, hiding image will never be stable. My solution is to create a small server-side script which will serve different images for different devices. I think that is the most stable and robust solution.

You can identify the os, device and screen width from the header of the request, although any browser/email client could send fake info.

We use this package to parse user agent info: https://www.npmjs.com/package/ua-parser and we can fetch these info with it: https://github.com/EDMdesigner/supertracker/blob/master/models/session.js

Based on the device field, you can serve different images.