There’s an old-school ’90s HTML design trick that dates back to the dim and distant past before we had decent layout control in CSS. That’s “slicing” – chopping a large image up into multiple parts, then reassembling them in an HTML table.
If you slice your images in an email and the end user hasn’t loaded images what will they see? They’ll see a rectangular box – either empty or with the image alt text in it. And, if you set the background colour for the table cell, they’ll see that – but only when images are turned off.
If you’re sneaky, you can do clever things with that.
Images off:
The same mail with images on:
Or like this, with images off:
And the same mail with images on:
(There’s more discussion in this reddit thread about it).
Creative HTML Table Abuse
C
RSS - Posts
This is brilliant! I just wrote about using images in emails and I was NOT smart enough to think of this :p
Ha, thanks for posting this. It’s really interesting. When I first saw it in my RSS feed I didn’t realize it was a WTTW post — I thought it was a post from marketing people from some ESP posting to that ESP’s blog. I slog though tons of those posts every week and they all bore me to tears. So I saw this one, thought to myself, oh, nice, an ESP marketing blog post I’m actually interested in. Which ESP was it? Then I laughed when I realized it was a WTTW post, not an ESP post.
Steve always comes with the great technical analysis.
It is a pretty old trick. You can find many sites using google that will take an image file and make an HTML table out of it. Some even “compress” the HTML by using colspan and rowspan to optimize long sections of solid colors.
Note also that there are some mail programs in which this will not work, such as Hotmail, or various webmail in IE7. Google for “email on acid mozify” where they discuss this in great detail.
The resulting tables are *really* huge, which is why your examples show very very low resolution approximations.
I would hardly call this “abuse”.