Fitting More Above the Fold

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.

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

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.

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.

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:

• 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)

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:

• 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)

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:

• 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

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:

• 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.

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.