Thursday, November 25, 2010

CodeIgniter and PHP Howto - Embedding images in Email


I recently had an issue in a client's development which required images to be embedded in html email code (<img src='cid:embeddedImage' />), rather than referenced via a public url (i.e. <img src='' />).


I have written a CodeIgniter Library Extension to the basic Email class that facilitates the embedding of images in emails. You can download the code HERE.

To implement it, follow the instructions for Extending Native Libraries on the CodeIgniter website

Finally, in the body of your email, use the following macro - making sure the class_id attribute matches the one used in the img src attribute (i.e. <img src='cid:my_image' />). An exmaple message body would be as follows

<img src="cid:my_image" />

// Macro in Windows
{embedded_image file=C:\\my_image.png class_id=my_image}{/embedded_image}

//Alternative Linux Macro
{embedded_image file=/var/my_image.png class_id=my_image}{/embedded_image}

And thats it - the library encodes the image file as a base64 string and embeds it in your email.



- Images are immediately displayed when opening a message, rather than the client prompting the user to allow remote content... great for newsletters
- Emails are independent, once downloaded, they don't require a live connection to view in all their glory


- A little bit more coding and knowledge of email message format is required to get them to work if your framework does not support embedding images in email
- Some conjecture about spam filtering for bulk messages with embedded images. Some believe spam filtering is more pessimistic for emails with embedded images than not when sending to more than 100 addresses


I'm not going to go too far into the coding of native php code to email with embedded images (unless I get requests) - so Ill give a brief overview and some references.

Like most things on the web, email message content can be defined in a series of envelopes. These envelopes are defined by content type. You can read about all of them here

One of the most useful images to exemplify the content structure of a html email can be found at
Bit of a warning though - the article itself has buggy code and examples.

Grossly speaking - your email message if it supports html with embedded images, and a plain text alternative (for non html email clients) should render the following content in the email body

Content-Type: multipart/alternative; boundary="UNIQUE_ID_1"

Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit

.... plain text alternative content for your html email....

Content-Type: multipart/related;

Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

Content-Type: image/jpeg
Content-Transfer-Encoding: base64
Content-ID: <class_id_referenced_in_img_src>
Content-Disposition: inline;

(Base64 encoded binary for the image)



NOTE on the above.

-- means open content type. Trailing -- means closing content type. When content type is 'multipart', you can define more than one content type under the same section identifier as you are either specifying alternative content, or related content. multipart/alternative content means one of the specified content sections is used. multipart/related content means that one content section references the other. We use the multipart/alternative content type to specify html, and plain text message alternatives. We use the multipart/related for relating html content with embedded image content.


Anonymous said...

Great source Ben !!

It worked very well for me.

Thanks for your researching and sharing it with us.


Sonuku said...

in the actual source, in the comments up the top, you use "{embedded_image filename=..." instead of "{embedded_image file=..."

threw me a little, as you reference $fn = $attributes["file"]; in embed_image()


Works great.
Saved me a pain.

Unknown said...

Thanks for that - the comments have been updated accordingly

Alexandru said...

This works well, thank you. I will like to share a warning though, beware of the size of the attached images.

It uses a preg_replace taking the whole base64-encoded image as an argument so it may hit the limits of the PCRE engine in your PHP.

If you get empty emails, yo should increase the limits of pcre.backtrack_limit and pcre.recursion_limit in your php.ini.

I hit the wall with an image weighting only 37KB. After increasing said limits 10x, it works well.

Fred Black said...

Does this still work with the current version of CI? I've tried it and it never seems to use the lib extension?