CODEWITHSUNDEEP
htmlcssemailhtml-email
MeV
MeV

Reputation: 3958

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:

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

Upvotes: 6

Views: 8476

Answers (4)

Ravindra HV
Ravindra HV

Reputation: 2608

How about just having the image with width 100%? I tried it and it seems to work for different width's. I even tried it with chrome's responsive mode and even there it seems to work for iphone sized device although the image quality was not as sharp.

<html>
<head>
    <title>ResponsiveImage</title>
</head>
<body>
    <img src="Tulips.jpg" width="100%">
</body>
</html>

Upvotes: 0

gyula.nemeth
gyula.nemeth

Reputation: 867

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.

Upvotes: 5

Ted Goas
Ted Goas

Reputation: 7587

This is possible, sort of, and it’s a bit tricky to pull off. Gmail is probably the biggest hurdle since it strips out the <style> tag and thus, doesn't support media queries.

First, one caveat: Google Apps webmail + Mobile Gmail will render the same, but we can get regular Gmail webmail to be different.

Gmail strips class and id attributes from all elements but leaves some other attributes intact: style, title, lang, width, height, alt, href. So we can target regular Gmail webmail using something like [lang~="x-houdini"] {display: none !important;}.

So use Mobile Gmail as the base for what you want to show, then you can overwrite regular Gmail webmail by targeting it to hide the Mobile Gmail image and show the regular Gmail webmail image.

Again, this won’t work on Google Apps webmail, it will display the same as Gmail App.

This article on Fresh Inbox explains how to target specific versions of Gmail. Worth a read if you go down this path and have questions!

Upvotes: 0

Michael Holland
Michael Holland

Reputation: 471

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.

Upvotes: 10

Related Questions