Embedding images in emails - Revision history

Philip Lacey: /* Method 6 : VML and SVG */

2018-05-04T21:49:10Z

‎Method 6 : VML and SVG

Philip Lacey: /* Method 6 : VML and SVG */

2018-05-04T21:27:27Z

‎Method 6 : VML and SVG

Philip Lacey: /* Method 2 : Attaching images or documents */

2018-05-04T21:25:43Z

‎Method 2 : Attaching images or documents

Philip Lacey: /* Method 6 : VML from Outlook */

2018-05-04T20:35:23Z

‎Method 6 : VML from Outlook

Philip Lacey: /* Abandon all hope ye who enter here */

2018-05-04T20:31:34Z

‎Abandon all hope ye who enter here

Philip Lacey: /* Abandon all hope ye who enter here */

2018-05-04T20:31:14Z

‎Abandon all hope ye who enter here

Philip Lacey at 20:28, 4 May 2018

2018-05-04T20:28:09Z

Philip Lacey at 20:06, 4 May 2018

2018-05-04T20:06:01Z

Philip Lacey at 20:02, 4 May 2018

2018-05-04T20:02:31Z

Philip Lacey: Created page with "= 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..."

2018-05-04T19:59:31Z

Created page with "= 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..."

New page

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

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

== Method 1 : A simple link ==

To put an image in you added in

<syntaxhighlight lang="html4strict">
<img src="yourAddressHere.jpg" />
</syntaxhighlight>

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.
[https://security.stackexchange.com/questions/81677/how-is-it-possible-to-embed-executable-code-in-an-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa|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.

[[File:emailarticle_001.png|800px]]

[https://www.howtogeek.com/howto/27045/beginner-make-outlook-always-display-images-in-email-from-specific-senders/|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.

== 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." [https://en.wiktionary.org/wiki/if_the_mountain_won%27t_come_to_Muhammad|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.

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

[https://sendgrid.com/blog/embedding-images-emails-facts/|Link 1][https://www.paperstreet.com/blog/email-marketing-embeded-images-cid-what-a-mess/|Link 2]

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. [https://www.drchaos.com/distributing-malware-inside-adobe-pdf-documents/|Link]

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

== 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
<syntaxhighlight lang="html4strict">
<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgA..." />
</syntaxhighlight>

Unfortunately modern versions of Outlook don't fall for this form of embedding. [https://stackoverflow.com/questions/16242489/send-a-base64-image-in-html-email|Link 1] [https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/|Link 2]

== 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 programs like Litmus can be extremely handy [https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking|Link]

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.

== 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. [https://www.campaignmonitor.com/resources/guides/alt-text-in-email/|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. [https://litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email|Link] This is known as styled alt text and looks something like

<syntaxhighlight lang="html4strict">
<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"/>
</syntaxhighlight>

Not perfect but we're trying here.

== 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
* http://stylecampaign.com/blog/2009/12/bypass-image-blocking-by-converting-images-to-html/
* https://codepen.io/johndjameson/details/qcaAm
* https://pgl.yoyo.org/img2html/

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

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

* Method 1 : works
* Method 2 : doesn't work
* Method 3 : doesn't work
* Method 4 : works
* Method 5 : doesn't work

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

= 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 shot at sales@bxpsoftware.com or call us on +353 1 429 4000 to see how we can help you today.

[[Category:Topic:About bxp]]

@@ Line 165: / Line 165: @@
 Scalable Vector Graphics in browsers are highly supported... not so much in email... but it is a growing area [https://css-tricks.com/a-guide-on-svg-support-in-email/ Link]
 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.
 * https://litmus.com/community/discussions/4478-vml-background-in-outlook-2007
 = Tracking =

← Older revision		Revision as of 21:27, 4 May 2018
Line 164:		Line 164:

	Scalable Vector Graphics in browsers are highly supported... not so much in email... but it is a growing area [https://css-tricks.com/a-guide-on-svg-support-in-email/ Link]		Scalable Vector Graphics in browsers are highly supported... not so much in email... but it is a growing area [https://css-tricks.com/a-guide-on-svg-support-in-email/ Link]
		+
		+
		+	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.
		+	* https://litmus.com/community/discussions/4478-vml-background-in-outlook-2007

	= Tracking =		= Tracking =

@@ Line 69: / Line 69: @@
 </syntaxhighlight>
-[https://sendgrid.com/blog/embedding-images-emails-facts/ Link 1][https://www.paperstreet.com/blog/email-marketing-embeded-images-cid-what-a-mess/ Link 2]
+* https://sendgrid.com/blog/embedding-images-emails-facts/
@@ Line 79: / Line 81: @@
 Again foiled in our first impression... now our email isn't getting there.... what next?
 == Method 3 : Embed an image ==

← Older revision		Revision as of 20:35, 4 May 2018
Line 154:		Line 154:


−	== Method 6 : VML ~~from Outlook~~ ==	+	== Method 6 : VML and SVG ==


Line 163:		Line 163:


		+	Scalable Vector Graphics in browsers are highly supported... not so much in email... but it is a growing area [https://css-tricks.com/a-guide-on-svg-support-in-email/ Link]

	= Tracking =		= Tracking =

@@ Line 107: / Line 107: @@
-If you want to see will it work there area companies who can take the heavy lifting out of your teseting... some will even construct your emails for you.
+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.
-* https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking Link]
+* https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking
 * https://www.emailonacid.com/

@@ Line 107: / Line 107: @@
-If you want to see will it work programs like Litmus can be extremely handy [https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking Link]
+If you want to see will it work there area companies who can take the heavy lifting out of your teseting... some will even construct your emails for you.
@@ Line 114: / Line 116: @@
 Ultimately you are going for a best guess result if you want your image to appear immediately.  There are some alternative options.
 == Method 4 : alt text ==

@@ Line 151: / Line 151: @@
 The approach works well with 200x200 ish images but does get around email software restrictions.
@@ Line 158: / Line 169: @@
 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.
-* Method 1 : works
-* Method 2 : doesn't work
+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.
-* Method 3 : doesn't work
 So there is definitely some thinking to be done on your options.

@@ Line 45: / Line 45: @@
-[[File:emailarticle_001.png|800px]]
+[[File:emailarticle_001.png]]
 [https://www.howtogeek.com/howto/27045/beginner-make-outlook-always-display-images-in-email-from-specific-senders/ Link]
@@ Line 71: / Line 71: @@
 [https://sendgrid.com/blog/embedding-images-emails-facts/ Link 1][https://www.paperstreet.com/blog/email-marketing-embeded-images-cid-what-a-mess/ Link 2]

@@ Line 39: / Line 39: @@
 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.
-[https://security.stackexchange.com/questions/81677/how-is-it-possible-to-embed-executable-code-in-an-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa|Link]
+[https://security.stackexchange.com/questions/81677/how-is-it-possible-to-embed-executable-code-in-an-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa Link]
@@ Line 47: / Line 47: @@
 [[File:emailarticle_001.png|800px]]
-[https://www.howtogeek.com/howto/27045/beginner-make-outlook-always-display-images-in-email-from-specific-senders/|Link]
+[https://www.howtogeek.com/howto/27045/beginner-make-outlook-always-display-images-in-email-from-specific-senders/ Link]
@@ Line 57: / Line 57: @@
-As the old expression goes, "if you can't bring the mountain to Mohammed, then Mohammed must go to the mountain." [https://en.wiktionary.org/wiki/if_the_mountain_won%27t_come_to_Muhammad|Link]
+As the old expression goes, "if you can't bring the mountain to Mohammed, then Mohammed must go to the mountain." [https://en.wiktionary.org/wiki/if_the_mountain_won%27t_come_to_Muhammad Link]
@@ Line 69: / Line 69: @@
 </syntaxhighlight>
-[https://sendgrid.com/blog/embedding-images-emails-facts/|Link 1][https://www.paperstreet.com/blog/email-marketing-embeded-images-cid-what-a-mess/|Link 2]
+[https://sendgrid.com/blog/embedding-images-emails-facts/ Link 1][https://www.paperstreet.com/blog/email-marketing-embeded-images-cid-what-a-mess/ Link 2]
-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. [https://www.drchaos.com/distributing-malware-inside-adobe-pdf-documents/|Link]
+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. [https://www.drchaos.com/distributing-malware-inside-adobe-pdf-documents/ Link]
@@ Line 95: / Line 95: @@
-Unfortunately modern versions of Outlook don't fall for this form of embedding. [https://stackoverflow.com/questions/16242489/send-a-base64-image-in-html-email|Link 1] [https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/|Link 2]
+Unfortunately modern versions of Outlook don't fall for this form of embedding. [https://stackoverflow.com/questions/16242489/send-a-base64-image-in-html-email Link 1] [https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/ Link 2]
@@ Line 105: / Line 105: @@
-If you want to see will it work programs like Litmus can be extremely handy [https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking|Link]
+If you want to see will it work programs like Litmus can be extremely handy [https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking Link]
@@ Line 118: / Line 118: @@
-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. [https://www.campaignmonitor.com/resources/guides/alt-text-in-email/|Link]
+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. [https://www.campaignmonitor.com/resources/guides/alt-text-in-email/ 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.  [https://litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email|Link]  This is known as styled alt text and looks something like
+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.  [https://litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email Link]  This is known as styled alt text and looks something like
@@ Line 178: / Line 178: @@
-Give us a shot at sales@bxpsoftware.com or call us on +353 1 429 4000 to see how we can help you today.
+Give us a shout at sales@bxpsoftware.com or call us on +353 1 429 4000 to see how we can help you today.
 [[Category:Topic:About bxp]]