Fitting More Above the Fold

0

The Case of the Collapsible Images

We recently came across this clever email from One King’s Lane. The email looks great with images downloaded, but that wasn’t what caught our eye. Email clients will show a variety of things (we’ll get into exactly what in just a moment) when they encounter an image that doesn’t have specified height or width. One King’s Lane took advantage of the fact that no matter what they do, it doesn’t take up much space. That means you can get more of your text above the fold, and just maybe make a better impression on your readers. Check out their email below, before and after downloading images.

As you can see, only one row of text (under the product pictures) is visible.
One Kings Lane website

With no images to display, the email shrinks in size to allow much more to be visible.
One Kings Lane without images

This email could benefit from some images-off styling of their logo to compliment the increased text exposure, but the idea is a sound one.

Rendering the Unknown

When not given a width or height value, you can depend on all clients to render image placeholders as about the size of a line of text or smaller. Check out the specifics below. I put a 1px black border around the image to make it easier to see the size of the box.

Size Based on Alt Text

With no height or width specified, these clients will display a box large enough to hold the alt text associated with the image. Not all of them will actually display that alt text.

Examples:
Alt text bar
No alt text displayed

  • Gmail (Chrome 18)
  • Gmail (Firefox 12)
  • Gmail (Firefox 3.6)
  • Live Mail
  • Lotus Notes 8
  • Lotus Notes 8.5
  • Outlook 2003
  • Outlook Express
  • Thunderbird 13
  • Windows Mail
  • Yahoo! (Chrome 18)
  • Yahoo! (Firefox 12)
  • Yahoo! (Firefox 3.6)

Size Based on Alt Text, Image Icon

With no height or width specified, these clients will display a box large enough to show a image icon (varies between clients) and the alt text associated with the image. Again, not all clients will actually display the alt text, they just make room for it.

Examples:
Alt text green bar
Alt text bar
Alt text bar

  • Android 2.3
  • Android 4
  • Apple Mail 4
  • Apple Mail 5
  • Apple Mail 6
  • Gmail (Internet Explorer 8)
  • Gmail (Internet Explorer 9)
  • Gmail (Safari 5)
  • iPad 5.0 (iOS 5)
  • iPad Gmail (iOS 3)
  • iPhone 4S (iOS 5)
  • iPhone 4S (iOS 6)
  • iPhone 5 (iOS 6.1)
  • Kindle Fire 2.3
  • Yahoo! (Internet Explorer 8)
  • Yahoo! (Internet Explorer 9)
  • Yahoo! (Safari 5)

Displays Image Icon Only

With no height or width specified, these clients will show all images as a small box with an image icon. They never display alt text on images with no width or height.

Example:
Display image icon only on alt text bar

  • AOL (Chrome 18)
  • AOL (Firefox 12)
  • AOL (Firefox 3.6)
  • AOL (Internet Explorer 8)
  • AOL (Internet Explorer 9)
  • Entourage 2004 *
  • Entourage 2008 *
  • Outlook 2007
  • Outlook 2010
  • Outlook 2013

Displays a 1px Square

With no height or width specified, these clients will display images as a 1px square, using any background color listed. They never display alt text on images with no width or height.

Example:
1 px square displayed

  • Android Gmail 2.2 *
  • Outlook.com (Chrome 18)
  • Outlook.com (Firefox 12)
  • Outlook.com (Firefox 3.6)
  • Outlook.com (Internet Explorer 8)
  • Outlook.com (Internet Explorer 9)
  • Outlook.com (Safari 5)

Be careful using long alt text, because some clients will display all of the text you use. Check out these examples, below. This kind of rendering is a danger with any of the clients listed above that display the image box based on alt text.

Examples:
Really long alt text
Really long alt text example two

Who Actually Displays Alt Text?

Despite basing the size of the image box on the alt text, not all clients actually display the alt text. Consult the chart below to see which ones do. You’ll notice that some of these have size based on the alt text, or based on the alt text and an image icon, but are listed as not displaying the alt text. You read that right, they base the size of the image box on the alt text, but the text isn’t visible. This means that if you have a paragraph of alt text, the image placeholder will take up a lot of space, even though the text doesn’t show.

How Clients Handle Images with Undefined Size
Client Size Based On… Alt Text Displays?
Gmail (Chrome 18) Alt text no
Gmail (Firefox 12) Alt text yes
Gmail (Firefox 3.6) Alt text yes
Live Mail Alt text yes
Lotus Notes 8 Alt text no
Lotus Notes 8.5 Alt text yes
Outlook 2003 Alt text yes
Outlook Express Alt text yes
Thunderbird 13 Alt text yes
Windows Mail Alt text yes
Yahoo! (Chrome 18) Alt text no
Yahoo! (Firefox 12) Alt text yes
Yahoo! (Firefox 3.6) Alt text yes
Android 2.3 Alt text+image icon no
Android 4 Alt text+image icon no
Apple Mail 4 Alt text+image icon no
Apple Mail 5 Alt text+image icon no
Apple Mail 6 Alt text+image icon no
Gmail (Internet Explorer 8) Alt text+image icon yes
Gmail (Internet Explorer 9) Alt text+image icon yes
Gmail (Safari 5) Alt text+image icon no
iPad 5.0 (iOS 5) Alt text+image icon no
iPad Gmail (iOS 3) Alt text+image icon no
iPhone 4S (iOS 5) Alt text+image icon no
iPhone 4S (iOS 6) Alt text+image icon no
iPhone 5 (iOS 6.1) Alt text+image icon no
Kindle Fire 2.3 Alt text+image icon no
Yahoo! (Internet Explorer 8) Alt text+image icon yes
Yahoo! (Internet Explorer 9) Alt text+image icon yes
Yahoo! (Safari 5) Alt text+image icon no
AOL (Chrome 18) Image icon only no
AOL (Firefox 12) Image icon only no
AOL (Firefox 3.6) Image icon only no
AOL (Internet Explorer 8) Image icon only no
AOL (Internet Explorer 9) Image icon only no
Entourage 2004 * Image icon only no
Entourage 2008 * Image icon only no
Outlook 2007 Image icon only no
Outlook 2010 Image icon only no
Outlook 2013 Image icon only no
Android Gmail 2.2 * 1px Square no
Outlook.com (Chrome 18) 1px Square no
Outlook.com (Firefox 12) 1px Square no
Outlook.com (Firefox 3.6) 1px Square no
Outlook.com (Internet Explorer 8) 1px Square no
Outlook.com (Internet Explorer 9) 1px Square no
Outlook.com (Safari 5) 1px Square no
Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

Free Email Goodies