Repurpose Your Images for Mobile Email


As open rates for mobile devices continue to skyrocket, we’ve seen an increased level of interest from people who are developing emails that render flawlessly on desktop and mobile email clients.

Replacing and/or re-using graphics is a great place to start for a few different reasons:

iPhone The iPhone scales your email down by default so that the widest element in the email fits within its viewport. From there, the user must scale it back up (outward pinch) in order to read it.  After scaling up your email, they will be forced to scroll left and right to read each line. By resizing your widest graphic and/or HTML container, you can control the size of your text at first glance.

Default versus using media queries

Android The Android handles text readability much differently. In this device, your text (usually) wraps within the center viewport and the rest of the graphics and/or HTML containers can be scrolled from left to right. Therefore, important messages often get cut off to the right of the viewport window. Check out our Android demo to see what I mean.

Code Examples

Using media queries, you can control the way various page elements render in the iPhone and Android. Here are a few examples for handling images:

1.) Re-size and re-use the same image (better for overall file size):

<style type="text/css">
    @media only screen and (max-device-width:480px;) {
         body[yahoo] .header { width:300px}
    }
</style> 

<body yahoo="fix">
     <img src="https://d1cr57qij2cwzh.cloudfront.net/wp-content/uploads/2018/04/CodeAnalysisImage.jpg" class="header" width="600" height="100" />
</body>

 

2.) Completely replace your image(s):

<style type="text/css">
     @media only screen and (max-device-width:480px;) {
          body[yahoo] .mobile_only {
                width:600px !important;
               overflow:visible !important;
           float: none !important;
           display: block !important;
                }
           body[yahoo] .desktop_header { display:none}
         }
</style> 

<body yahoo="fix">
     <div class="mobile_only" style="width:0px; overflow:hidden;float:left;display:none">
       Image for mobile - width="300px":
      <img src="https://www.url.com/image1.jpg" width="300" height="100" />
     </div>
     <div class="desktop_header">
         Image for desktop  - width="600px":
        <img src="https://d1cr57qij2cwzh.cloudfront.net/wp-content/uploads/2018/05/WebPreviewImage2.jpg" width="600" height="100" />
     </div>
</body>

Important: We used overflow, width and float above because Gmail does not support the “display” property if the value is set to “none.”  We left the display:none in there for all other clients.

We also incorporated this Yahoo fix in both examples.

Author: Alex Ilhan

18 thoughts on “Repurpose Your Images for Mobile Email”

  1. Depending on how you’ve build your email, you may also need to set a height of 0 for the hidden content, otherwise it still renders and breaks your layout in gmail.

  2. Actually upon further testing, the technique works fine for inline elements like images, but completely breaks for stuff like paragraph tags.

    You also can’t use the technique to selectively show or hide cells, unfortunately.

  3. And it looks like hidden images show up in Outlook 2007.

    Technique 2 doesn’t appear to be a great choice, unless you’re emailing people that don’t use Outlook.

  4. Jacques, thanks for your feedback! Option 2 is not for the faint of heart that’s for sure!

    In response to your comments:

    1.) In my testing, I learned that Gmail converts the “height” property to “min-height” which has an adverse affect cross browser. That’s why I used the “width” property only.

    2.) Regarding the inline elements, I just tested the following:

    (was forced to add spaces in order to get p tags to show up in these comments)

    The only thing that rendered in Outlook 2007 was table 1. So it looks like if you want to nest tables in this option, you must include an inline style with display:none and overwrite that in your media query as well. Not sure about nested elements within that table so this is one I would “handle with care.”

    3.) You are correct, adding an inline style of display:none to an image does not work in Outlook 07/10, the workaround is to place it in a hidden div as shown in my example for Option 2.

    Since there are so many nuances when using this technique it’s really important to test in all clients before sending the final email blast 🙂

  5. Thanks Michelle,

    You’re right, adding the div completely hides the image in Outlook 2007, though the hidden text will still cause issues in Gmail.

    I need to make a few more tests for hidden tables and cells, but initial testing isn’t proving great.

    At best we’ll be able to hide certain content for mobile and show optimized images.

  6. Great article, thanks!

    Its working great so far except for one issue, I cannot seem to make it work in Android 2.2 Gmail. It does work for Android 2.2 Native.

    Any ideas?

  7. Jon,

    Yeah unfortunately this fix only works for the native email clients on the Android and iPhone. Since desktop and mobile versions of Gmail do not support embedded styles, I don’t know of any other way to detect the device via inline CSS.

  8. Is there a way to embed an image if using a mobile mail client?

    Using Apple’s iPad or iPhone mail client, I can easily copy/past an image into an email and it displays assuming recipient doesn’t have img turned off of course.

    But copy/pasting is cumbersome especially when this is just for a logo lag as part of a signature.

    I tried simple which points to my logo stored on my server but when I get the test email all I see is the code with the link live so if clicked it then launches Mobile Safari and displays the logo. Ugh.

    So why does a simple copy/paste work? Mobile Mail doesn’t allow u to see or write underlying code, and if I have a bunch of emails to send and am on my iPad, the copy/pasting gets very old very quick.

    I’d love to know the code that is being auto written when u paste an img to the mobile email page.

    Or just how to embed an img that is stored on a server into a mobile email?

  9. I haven’t tried option 2 because I don’t want to deliver hidden images, but option 1 does not work for me in Android native email app. I’m in version Android version 2.3.6 on the original Nexus phone, and I copied the exact code above. No dice. Works fine on iPhone.

  10. Hi,
    I have troubles make it work:
    2.) Completely replace your image(s):

    on Android 2.3,
    the trick works for text but not for images.

    Any idea why?

    Thanks and have a nice day 🙂

  11. What are the current best practices for email design for a Blackberry? I’m testing on a Bold, and from a previous post of yours it looks like Media Queries don’t work. What options does that leave me then?

  12. I am not sure why it’s not working for some of you on the Android. I know that the Android does not support the ID selector. It only supports CLASS selectors.

    If you are using a class sector and it still isn’t working, maybe your device has a larger max. dimension?

    Maybe try tinkering with the max-device conditional statement to see if you can get it to work or remove that condition entirely just to confirm your device is supporting the media query.

  13. Steve,
    While I can’t give you a full Blackberry style guide here in the comments, I can recommend that you check out http://www.emailology.org/ and the tips we have there. We’ll keep a style guide in mind for a future blog post. Hope that helps!

  14. Update to my previous post. It appears I was given a Blackberry running OS 5 which doesn’t support Media Queries; so I was testing on outdated hardware.

    I’ll be back Michelle once I get the proper equipment. Email On Acid is the best!

  15. Lotus Notes 6.5
    Lotus Notes 7
    Outlook 2013
    Outlook 2010
    Outlook 2007
    Yahoomail Explorer

    having issues with option 2.

  16. I haven’t written much code at all in several years, so when I do need to, I depend on info from sites like this…thanks so much, you made my marketing email problems go away!

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies