Embedding images in emails

From All n One's bxp software Wixi

Jump to: navigation, search

1 Overview

  • Request : "I want to put an image in my email. Make it happen."
  • Answer : "I'd love to but it isn't that simple."
  • Request : "Why not?"
  • Answer : "Due to bad people abusing the system, images in emails are very difficult."


Let's work through what can and can't be done.


This article will get a little bit technical please bear with us.


2 The starting point

Email and web pages are very different things. The simplest and best delivered emails are text emails... plain, no font, no images, nothing... just text. Financial institutions opt for these far more than anything else. That's boring however so you need something to spice up emails. HyperText Markup Language (HTML) to the rescue, the language of web pages.


It is possible to put HTML in an email and now you can have fonts, colours, and everything a web page has. This started great but then evil people started to corrupt emails. Specifically "phishing" made you believe you were clicking a link in a legitimate email but instead you were direct to a fake site where you gave them your details and they went and emptied your bank account.


So different companies helped in different ways. The first way was to start blocking emails with pictures in them... this was the start of real trouble for marketeers and people who wanted to use the system for good reasons.


2.1 Method 1 : A simple link

To put an image in you added in

<img src="yourAddressHere.jpg" />


This worked fine until the bad guys put evil spy software in the images and so the email software manufacturers started stopping downloading of images automatically. Link


So using links had to stop as the main stream method. Now they are still used but you need the recipient to trust you beforehand.


emailarticle 001.png

Link


For marketing people who have never met you before, this option is limited. You only get 1 chance to make a first impression and if your images don't show... well the effect is lost.


2.2 Method 2 : Attaching images or documents

As the old expression goes, "if you can't bring the mountain to Mohammed, then Mohammed must go to the mountain." Link


An attachment to an email is a relatively common thing, but attachments can bring bad things into a business so one of the most common filters is, if there's an attachment, block the email.


Once the image is attached to the email you use a CID or Content ID tag in the email to reference the attachment.

<img src="cid:my_image.jpg" alt="Logo" />


Please note that CIDs are extremely case sensitive.  You have been reminded. emoticon


You can create a pretty PDF document and attach that but again PDFs can have malicious code in them... so people are wary and won't open attachments, especially if they may be harmful. Link


Again foiled in our first impression... now our email isn't getting there.... what next?

2.3 Method 3 : Embed an image

So now we revert to another use of the CID. So if the image is going to be blocked as an attachment, how do we get the image into the body of the email... this uses a technique called BASE64. Most images contain binary data which isn't easily read by humans. It looks like random characters when drawn as text. BASE64 converts the binary characters into simple letters which are easily read by humans.


BASE64 is just text. So you can put it in the email like HTML code and hey presto no attachment.


It'll look something like this

<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgA..." />


Unfortunately modern versions of Outlook don't fall for this form of embedding. Link 1 Link 2


2.4 Abandon all hope ye who enter here

So at this stage things are pretty grim and it obvious that compromise is required.


If you want to see will it work there area companies who can take the heavy lifting out of your testing... some will even construct your emails for you.


Remember this email is not about whether it will work on your machine but the person you want to read it's email software. Test it and try to know your audience as best you can. What email software do they use? Ring one or two to find out.


Ultimately you are going for a best guess result if you want your image to appear immediately. There are some alternative options.

2.5 Method 4 : alt text

Now you can just give in and link the images. You know it's not going to display immediately but you work the text that will display using the alt tag to try encourage the user to show the images. Link


Now an email reader is not a browser and doesn't have to conform to web standards so you can "cheat a bit" in your html in your email. Normally you cannot add style to an img in a browser, but in email... it's worth a go. Link This is known as styled alt text and looks something like


<img src="NAME OF IMAGE.PNG" width="500" height="462" style="width: 100%; height: auto; display: block; color: #ffffff; font-size: 36px; font-family: sans-serif; background: #333333;" alt="This is alt text"/>


Not perfect but we're trying here.


2.6 Method 5 : Out of the box thinking

There is a very funky approach which is people thinking laterally. A full explanation of how an image is made pixel by pixel is described here. Background_Image#Screen_Technology_Information


So instead of pixel by pixel, what if you drew a HTML table where each cell is 1 pixel by 1 pixel and colour the cell of the table. That is pure HTML and not blocked!


The following links provide an "image to HTML table" conversion tool


The approach works well with 200x200 ish images but does get around email software restrictions.


2.7 Method 6 : VML and SVG

Going the way of the dodo, VML or Vector Markup Language Link is a set of instructions on how the image should be drawn rather than the picture itself. Older versions of Microsoft Office used it heavily when drawing images.


Just because the world is moving to SVG based images doesn't mean this approach doesn't work Link


Scalable Vector Graphics in browsers are highly supported... not so much in email... but it is a growing area Link


2.8 Method 7 : Using CID and VML

There is also a dark art of tricking Outlook into displaying CIDs. You set the browser to draw a VML and if not possible draw the image using a standard CID in an img tag. Worked on my outlook and I'm quite paranoid about these things.

Code that was used on me that worked was

<!--[if gte vml 1]>
	<v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
		<v:stroke joinstyle="miter"/>
		<v:formulas>
			<v:f eqn="if lineDrawn pixelLineWidth 0"/>
			<v:f eqn="sum @0 1 0"/>
			<v:f eqn="sum 0 0 @1"/>
			<v:f eqn="prod @2 1 2"/>
			<v:f eqn="prod @3 21600 pixelWidth"/>
			<v:f eqn="prod @3 21600 pixelHeight"/>
			<v:f eqn="sum @0 0 1"/>
			<v:f eqn="prod @6 1 2"/>
			<v:f eqn="prod @7 21600 pixelWidth"/>
			<v:f eqn="sum @8 21600 0"/>
			<v:f eqn="prod @7 21600 pixelHeight"/>
			<v:f eqn="sum @10 21600 0"/>
		</v:formulas>
		<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
		<o:lock v:ext="edit" aspectratio="t"/>
	</v:shapetype>
	<v:shape id="_x0000_i1025" type="#_x0000_t75" alt="" style='width:450.75pt;height:41.25pt'>
		<v:imagedata src="image001.jpg" o:href="cid:338562468"/>
	</v:shape>
<![endif]-->
<![if !vml]>
	<img width=601 height=55 src="image001.jpg" border=0 align=baseline v:shapes="_x0000_i1025">
<![endif]>

3 Tracking

One of the best solutions for emails is to include tracking data in the email so that sales team can see an email has landed and that a user has read their email.


You can put tracking into a link the user has to click or if you download an image from a website you can embed the tracking data into the link. User sees an image but it's report that the image has been requested by a specific user.


So there is definitely some thinking to be done on your options.


4 Conclusion

So there it is ... lots of different approaches and challenges but none of them fool proof.


bxp through various engines supports all the approaches and options mentioned above.


The team in bxp software are happy to help get an approach that works for you together but please note this takes a bit of time to do. It's not quite an email sent from your Outlook to another person, as hopefully the above email demonstrates. It'll be targetted to your audience and work for you. We will also include tracking capability into the email to let your teams know, as best we can, who's read your email.


Give us a shout at sales@bxpsoftware.com or call us on +353 1 429 4000 to see how we can help you today.