Before I start I want to list where this trick doesn't work. (The minor quirks are essentially personal preference. I don't think they're a reason to not use this trick but others may disagree.)

  • Breaks: Lotus Notes 7
  • Minor Quirks: Outlook 07 10 13, Lotus Notes 8, People using Internet Explorer in webmail.
  • Testing: Unfortunately I only have iOS devices to test on. If you test it on an android device let me know your results.

Here's a quick demo showing the magic!

desktopmobile

How it Works

There are essentially three things that makes this trick work: Overflow:hidden, min-height, and max-height.

First we create a <div> which will contain our image and our new alternative text.

We then add our img and our table which holds the alternative text we want to appear when images are turned off.


You don't have to use &nbsp; you can put something like 'Images are disabled' if you wish. There has to be some kind of text to prevent IE from pushing your Alternative text out of the min-height area.

That's it, you're done! This will now work in desktop clients.


Adding Mobile Support

Getting this trick to work on mobile clients is pretty straight forward, we just need to adjust and add some css properties to the classes we added in the HTML markup.

Let's start by clearing the css properties on .overflow-div

Next we position the Alternative text on top of the hero image.

The top value is based on the distance from the top of the email to the top of the hero image + 10px for some extra padding.

The previous styling will display our Alternative text above our hero image. We need to set it to position:relative and set it's z-index.

Tada! We now have this working in mobile devices.


Gmail App Support

To get this to work in gmail I used an image guide to control the scaling of gmail app.
<img src="guide.gif" height="1" class="hide-mobile" style="display:block;min-width:600px;">


Outlook.com Support

To stop Outlook.com from blocking images at their full width and height apply the following:

Wrap your images with <a class="image-link">

Then add the following to your CSS:

a [class="image-link"] {
min-width:0%!important;display:inline-block!important;
}


Quirks

There are a few quirks that may turn you off from this trick, Below are screenshots.

For Outlook you can wrap your alternative text with a conditional statement to hide it but nothing will display when the email is loaded without images.
<!--[if !mso 9]><!--><table class="alt-text">...</table><!--[endif]-->


Code Sample and Litmus Results

Grab the code from CodePen.

Check out the Litmus Test

Let me know what you think!