Fitting More Above the Fold


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 textno
Gmail (Firefox 12)Alt textyes
Gmail (Firefox 3.6)Alt textyes
Live MailAlt textyes
Lotus Notes 8Alt textno
Lotus Notes 8.5Alt textyes
Outlook 2003Alt textyes
Outlook ExpressAlt textyes
Thunderbird 13Alt textyes
Windows MailAlt textyes
Yahoo! (Chrome 18)Alt textno
Yahoo! (Firefox 12)Alt textyes
Yahoo! (Firefox 3.6)Alt textyes
Android 2.3Alt text+image iconno
Android 4Alt text+image iconno
Apple Mail 4Alt text+image iconno
Apple Mail 5Alt text+image iconno
Apple Mail 6Alt text+image iconno
Gmail (Internet Explorer 8)Alt text+image iconyes
Gmail (Internet Explorer 9)Alt text+image iconyes
Gmail (Safari 5)Alt text+image iconno
iPad 5.0 (iOS 5)Alt text+image iconno
iPad Gmail (iOS 3)Alt text+image iconno
iPhone 4S (iOS 5)Alt text+image iconno
iPhone 4S (iOS 6)Alt text+image iconno
iPhone 5 (iOS 6.1)Alt text+image iconno
Kindle Fire 2.3Alt text+image iconno
Yahoo! (Internet Explorer 8)Alt text+image iconyes
Yahoo! (Internet Explorer 9)Alt text+image iconyes
Yahoo! (Safari 5)Alt text+image iconno
AOL (Chrome 18)Image icon onlyno
AOL (Firefox 12)Image icon onlyno
AOL (Firefox 3.6)Image icon onlyno
AOL (Internet Explorer 8)Image icon onlyno
AOL (Internet Explorer 9)Image icon onlyno
Entourage 2004 *Image icon onlyno
Entourage 2008 *Image icon onlyno
Outlook 2007Image icon onlyno
Outlook 2010Image icon onlyno
Outlook 2013Image icon onlyno
Android Gmail 2.2 *1px Squareno
Outlook.com (Chrome 18)1px Squareno
Outlook.com (Firefox 12)1px Squareno
Outlook.com (Firefox 3.6)1px Squareno
Outlook.com (Internet Explorer 8)1px Squareno
Outlook.com (Internet Explorer 9)1px Squareno
Outlook.com (Safari 5)1px Squareno

Leave a Reply

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

Free Email Goodies