Blog


Repurpose your Images for Mobile Email

10.19.2011

Read More Design Emails for Mobile Devices

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

By Michelle Klann
November 24, 2010
 
 
 

The iPad Gmail Application does not Support Images

You heard correctly, the Gmail app for the iPad does NOT support images within HTML emails. Instead it displays them as if they are blocked and as far as we can see, there is no option for turning off the image blocking.

With an ever growing population of iPad users, this creates an interesting challenge for designers - especially when it comes to image heavy emails where the primary message is embedded within a table of sliced images.

So what happens when your images are blocked? The app will only display the ALT or TITLE text in place of your images if you include a width and height attribute or CSS property. If you don't include the image dimensions, it will render as a small, grey outlined box. If you do include them, your ALT or TITLE text will display within a gray outlined box set to the original dimensions of your image. If you have included both ALT and TITLE attributes, it will display the ALT text.

For example:

<img src="http://www.test.com/image.jpg" title="This is the image description" alt="This is the image description" width="400" height="250">

or

<img src="http://www.test.com/image.jpg" title="This is the image description" alt="This is the image description" style="width:400px; height: 250px">

Here is an example of our recent November email campaign:

Most of our messaging is in text but you can see that we did not include a width and height in the image associated with the Android article. Therefore it did not display the TITLE or ALT text description.

In Conclusion

We recommend that you always include an exact width and height for each of your images as well as ALT and TITLE text.

Image dimensions are also important for Outlook 2003 and Outlook Express because by default, images that do not have them are automatically set 689 X 40 while images are blocked. This can have a drastic effect on your layout, especially if you are using tables. We recommend using ALT and TITLE text because many variations of email clients only support one or the other.

Comments

Hey Michelle,

Are you just visiting gmail in Safari on your iPad? I just confirmed myself that doing the same I was given the option to download images and they displayed fine.

Perhaps you have told Gmail in the past not to download images for that sender? Or some other setting change?
By Mathew Patterson on 11/28/2010

I had never checked our HTML emails in Gmail on an iPad and was concerned by your post. The first HTML email I looked at showed all images. I realized that might have been because I had already viewed that particular email on the desktop version of Gmail and had chosen to view its images.

I then viewed an HTML email that I had not previously opened and did indeed see a “Show Images” link in a yellow box at the top of the page. See a screenshot here: http://tinypic.com/r/vwqw3l/7

After some googling, it seemed that this is a very new feature. But it does seem to be working now.
By Jeff Miller on 11/30/2010

Thanks Mathew and Jeff! You are indeed correct, the Gmail App for the iPad now supports images! We are putting together a follow-up blog article and our devs are fast at work updating our Acid Test results.

Thanks so much for bringing this update to our attention.

Cheers and happy testing wink
By Michelle Klann on 11/30/2010

We have updated our Test to reflect the recent iPad Gmail "Show Images" update.
By John Thies on 11/30/2010

We launched 'show images' functionality on iPad & iPhone around the 17th of November. Hope that helps!
By Scott on 12/01/2010

Share Your Comment

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:



Share/Save/Bookmark

If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Follow us on Twitter Become a Friend on Facebook Subscribe to our Blog Digg Us! Recommend on StumbleUpon