5

Is it feasible to send marketing emails entirely as images - apart from a link at the top, giving the option for the recipient to view the email online (in their browser) and one at the footer to unsubscribe from our mailing list?

Anyone who's coded a html email template before knows how much of a pain it is to end up with the final design that displays 'properly' (rarely does it display the same in all clients) and doesn't break.

I understand there's the possibility of people simply ignoring the email altogether should their email clients be set not to automatically download images, but many of our email primarily feature images anyway. Thoughts?

Improve this question

2 Answers 2

Reset to default
12

Don't do it. Using only images in email significantly increases the chance that your messages will be flagged as spam. Not only that, but most email clients disable images by default, so your message will appear blank unless recipients take the time to enable images (and they probably won't).

From MailChimp's 'How Spam Filters Think':

...the most common mistakes we see new email marketers make, which result in accidental spam filtering: [...] Creating an HTML email that's nothing but one big image, with little or no text (since spam filters can't read images, they assume you're a spammer that's trying to trick 'em).

And here's more, from 'Top HTML Email Coding Mistakes':

"We've seen lots of people (especially graphic and web designers who are new to email design) send HTML emails that are nothing but one gigantic graphic. First of all, that's what spammers do. They send a giant graphic, hoping to trick spam filters (see, spam filters need to read text in order to determine if a message is spam). But the spam filters have caught on to this. Try sending an email that's nothing but a graphic, and you're lucky if any of your recipients even open it. Spam filters aside, email programs now turn images off by default. That means your recipients have to click a button to "open images" in order to view that work of art you made. If you think they'll actually take the time, you're deluding yourself."

Instead of using a single image, base your email newsletter designs on freely available email design templates that have been tested by professionals instead. I recommend the following two collections:

Using these templates as starting points helps you set up new designs quickly with relatively little testing and tweaking required.

Improve this answer
2
  • What if the image is sent embedded? That way the image should display unblocked.
    – Andrei Rînea
    Commented Feb 8, 2012 at 6:24
  • @AndreiRinea If you use the technique described here you can probably get away with embedding images. But note that Gmail and Hotmail still block the images, and read the conclusion they make on that blog post; it's probably still better to use text for important messages in your email, and link to remotely hosted images instead of embedding them.
    – Nick
    Commented Feb 8, 2012 at 10:23
2

Yes, it is feasible, and many email marketing companies do that. Whether or not it is a good strategy is another question, which I'm not competent to reply.

Sending image as THE email is typically through an html table: First slice the image into pieces. Then each piece will be referred to in a in the html as a hyperlink which refers to the image piecw which will be get from a remote image server when the client accepts to download image.

One thing that you should take care of to ensure correct rendering of images is that when you make a column on image, the area on the image below that should also have that column. The other is that the width normally should not exceed 700px.

The html table can be generated automatically in Photoshop (and perhaps other software). It is a point and click thing . You just need to use slice tool, and then right click on each slice and assign the appropriate url/mailto/etc. so no pain at all. Sorry have no access to PS to explain the process in details. See an example Photoshop generated html below:

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Image-title-1) -->
<table id="Table_01" width="700" height="1043" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <a href="http://google.com" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_01.jpg" width="700" height="76" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="http://fictitiousimageserver/Image-title-1_02.jpg" width="700" height="25" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="mailto:[email protected]" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_03.jpg" width="149" height="409" border="0" alt=""></a></td>
        <td>
            <a href="http://digg.com" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_04.jpg" width="132" height="409" border="0" alt=""></a></td>
        <td>
            <a href="http://facebook.com" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_05.jpg" width="132" height="409" border="0" alt=""></a></td>
        <td>
            <img src="http://fictitiousimageserver/Image-title-1_06.jpg" width="133" height="409" alt=""></td>
        <td>
            <a href="http://me.com" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_07.jpg" width="154" height="409" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a href="nimport.com" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_08.jpg" width="149" height="453" border="0" alt=""></a></td>
        <td>
            <a href="http://master.com" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_09.jpg" width="132" height="453" border="0" alt=""></a></td>
        <td>
            <a href="http://google.com/" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_10.jpg" width="132" height="453" border="0" alt=""></a></td>
        <td>
            <img src="http://fictitiousimageserver/Image-title-1_11.jpg" width="133" height="453" alt=""></td>
        <td>
            <a href="http://google.com/" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_12.jpg" width="154" height="453" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a href="http://mydomain.com/" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_13.jpg" width="149" height="80" border="0" alt=""></a></td>
        <td>
            <a href="http://mydomain.com/" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_14.jpg" width="132" height="80" border="0" alt=""></a></td>
        <td>
            <a href="http://mydomain.com/" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_15.jpg" width="132" height="80" border="0" alt=""></a></td>
        <td>
            <a href="http://mydomain.com/" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_16.jpg" width="133" height="80" border="0" alt=""></a></td>
        <td>
            <a href="http://mydomain.com/" target="_blank">
                <img src="http://fictitiousimageserver/Image-title-1_17.jpg" width="154" height="80" border="0" alt=""></a></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.