HTML Email - different images for desktop and mobile

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