base64 encoded images in email signatures

Question

I have to include some images  company logo s etc  in email signatures  I ve had all sorts of issues using the embedded images produced by the email system in question  they get sent as attachments generally  and as linked images  requiring permission to display them in the email received    I have just seen some email from exchange that has a base64 image representation of the logo and uses a  tag to do the displaying  I m looking for some information on how I could do this in an email signature if possible  how do I generate the base64 version of the logo for a start and what code do I need to get it to work    I ve tried simple things such as    lt body gt   lt span gt   lt img src       gt   lt  span gt   lt  body gt    but all I get is the alt text so I m obviously doing something wrong here

User · Accepted Answer

Important

My answer below shows how to embed images using data URIs. This is useful for the web, but will not work reliably for most email clients. For email purposes be sure to read Shadow2531's answer.

Base-64 data is legal in an img tag and I believe your question is how to properly insert such an image tag.

You can use an online tool or a few lines of code to generate the base 64 string.

The syntax to source the image from inline data is:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme

User · Answer

The image should be embedded in the message as an attachment like this   --boundary Content-Type  image png  name  sig png  Content-Disposition  inline  filename  sig png  Content-Transfer-Encoding  base64 Content-ID   lt 0123456789 gt  Content-Location  sig png  base64 data  --boundary   And  the HTML part would reference the image like this    lt img src  cid 0123456789  gt    In some clients  src  sig png  will work too   You d basically have a multipart mixed  multipart alternative  multipart related message where the image attachment is in the related part   Clients shouldn t block this image either as it isn t remote   Or  here s a multipart alternative  multipart related example as an mbox file  save as windows newline format and put a blank line at the end  And  use no extension or the  mbs extension    From  From  from example com To  to example com Subject  HTML Messages with Embedded Pic in Signature MIME-Version  1 0 Content-Type  multipart alternative  boundary  alternative boundary   This is a message with multiple parts in MIME format   --alternative boundary Content-Type  text plain  charset  utf-8  Content-Transfer-Encoding  8bit  test  --   Picture of a Christmas Tree   --alternative boundary Content-Type  multipart related  boundary  related boundary   --related boundary Content-Type  text html  charset  utf-8  Content-Transfer-Encoding  8bit   lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta charset  utf-8  gt           lt title gt  lt  title gt       lt  head gt       lt body gt           lt p gt test lt  p gt           lt p class  sig  gt --  lt br gt  lt img src  cid 0123456789  gt  lt  p gt       lt  body gt   lt  html gt   --related boundary Content-Type  image png  name  sig png  Content-Disposition  inline  filename  sig png  Content-Location  sig png Content-ID   lt 0123456789 gt  Content-Transfer-Encoding  base64  R0lGODlhKAA8AIMLAAD  wAhAABKAABrAACUAAC1AADeAAD AGsAAP8zM   AP      M       ZAMwAACH C05FVFNDQVBFMi4wAwGgDwAh QQJFAALACwAAAAAKAA8 AAME 3DJSWt1Nuu9Mf g5IzK6IXopaxn6orlKy jMc6vQRy4GySABK HAiaIoQdg uUSCBAKAYTBwbgyGA2AgsGqo0wMh7K0YEuj0sUxRoAfqB1vycBN21Ki8vOofBndR c1AKgH8ETE1lBgo7O2JaU2UFAgRoDGoAXV4PD2qYagl7Vp0JDKenfwado0QCAQOQ DIcDBgIFVgYBAlOxswR5r1VIUbCHwH8HlQWFRLYABVOWamACCkiJAAehaX0rPZ1B oQSg3Z04AuFqB2IMd atLwUBtpAHqKdUtbwGM1BTOgA5YhBr374ZAxhAqRVLzA53 OwTEAjhDIZYs09aBASYq 94HfAq3cRt57sWDct2EvEsTpBMVF6sYeEpDQIFDdo62 BHwZApjEhjW94RyQTWK FPx Ahpg09GdOzoJ ESx0JaOQ42e2tsiEYpCEFwAGi04 8g6gSgNOovD0gBeVjCPR2BIAkgOrmSNxPo3rbhgHZiMFPnLkBg2BAuQ2XdmlwK1Z ooZu1sRz6xWlxd4U9GIHwOmdzFgCFKCERYNoeo2BZsPp0KY A OAfZDYWKJZLZBo 1mQXdlojvxNYiXrD8I 2uEvTdFJQksID0XjXiUwjJm6CzBVeBQgwBop1ZPpC8RKt YN5RCpS6XiyMht093o8KcFFf vKE0dCmaLeWYhQMwbeQaHLRfNk9o5Q13lQGklFQ aMLFRLcwcN5qSWmGxS2jKQQFL9nEAgxsDEiwlAHaPPJWIfroo6FVEun0VkL4UABA CAjUiIAFM2YQogzcoLCjC3HNsYB1aSBB5JFrZBABACH5BAkUAAsALAAAAAAoADwA AwT7cMlJa3U2670x 6DkjKQXnleJrqnJruMxvq8xHDQbJEyC5yheAnh6MI5HYkgg YNgGSo7BcGAMBNHNYGA7ELpZiyFBLg DFvLArEBPHoAEgXDYChQP90IAoNYJCoGB aACFhX8HBwoGegYAdHReijZoBXxmPWRYYQ8PZmSZZHmcnqBITp2jSgIBN5BVBFwC BVkGAQJPiVV2rFCrCq1 sXUHAgQFAL45BncFNgSfW8wASoKBB59lhoVAnQqfDNCf AJ05At5msHPiCeSqLwUBzF6nVnXSuIwvTDYGsXPhiMmSRUOWAC436HmZU yGDQYF 81FhV aevzUM3oHoZBD7W7Zs9VaUIhOn4pwE38p0srLCQCqSciBFUuBFGgEryj7E Ojhg2yOG1hQMIMCEy4p8PB8llKmAIReiW040keUvmUygiexcwbWJwxUrzBDW Thn qLEB5UDUe0LxYwJmAhKk pAqVLZE69qWGZpTQwG7ZISuw7uwzDFAXTXYYoJraKym Q HSASDpiiUFljbYitfYRtCF635yMRBUn4UA8aYclCw0shefW7gUgPxBKGPHA5pK MpwsKy5AcmNZSIVHjdjI2eLwVZlK44IHQT8lkq7XTDznrAIEWMTErZwbsT hQj1L noXLV6YwS5eIJqIDf4tyLZB5Av1ZNrLzQSplrXVkOgxItBU1E DCwC2xFZUME5dZ c5AB9aw2jXkSQLhFIrj4xAx9szGWzwABdkGATwuAeEokW4wY24oK8MMViAjxxcc8 E0CUAYETIKAjAifgWGMI2ehBgVtCeleGEkYmeUYGEQAAIfkECRQACwAsAAAAACgA PAADBPtwyUlrdTbrvTH oOSMpBeeV4muqcmu4zG r6EcNBskSoLnJ4VQCAw9ErzE oxgSCBSGwYDJMRgOhIGAupFGsVEG12JAmpHicaU3QDPe6fHjoSAQDlIBY6leDIUD dnp9C04DdXh3eAaEUTeKdwJRagUCBGdnW3JHmJh8XHNmWAeLDwCfRQIBA6MMiQMG AgBcBgGSUgeuWQMAvb1MAgWruXAMrJYAUkU2wVGXDGZeAIxMCgVfaJhOVkB PWeX nXM5AnScSKR2dmZzqCwFUAKjo1l4XpLULNuwWXYHAHgWCYD15AXBgV wEACg7sDA A45oaLFy5ZKvXvYMEPCGYvvOwQOYAHRCQufFuU7 wp2Zo2AKCgPtwN3xR8 LLpcg kg1khaVlQyw8GRAwlC8nvp2HeM5UR8CYxp05L8ay8YcplmLGtmniwCtKLFhJR9oR amnAuBAiH9wK9G1kAgaxBCg5u6HdSUzp1LlNCqJAgZGBaC41Q6DAUAUfajm5ZUdK v7z08ATjmKGWAltecaVTqE5oFisB EIpSiH06IcKpQTa3JSVagPCWm7wZsgOwJkg 3xaTrJFkFgvtFHDywmt1J2iB2pC0C9x0yItnsLx1K8xdoQDYCcQ9I5KwaynaalUS RnpBpYH4YiXoTipgIlIFtLSUFKwSBb NtGCnb2Zl51fHo8hnhRZbSfCEKkgZkkcw TgBgyVdxeQNRMNNMoMBOpBxFUSx ObgYPgS1BBRss jxxzwAqsbLRfwh1VJyF5WI 2AkIAIAAAiiUKMGMICDRXQIn6IiCW4Qs4NYZTByppBkbRAAAIf4ZQm95J3MgSGFw cHkgSG9saWRheXMgUGFnZQA7  --related boundary--  --alternative boundary--   You can import that into Sylpheed or Thunderbird  with the Import Export tools extension  or Opera s built-in mail client  Then  in Opera for example  you can toggle  prefer plain text  to see the difference between the HTML and text version  Anyway  you ll see the HTML version makes use of the embedded pic in the sig

User · Answer

Recently I had the same problem to include QR image png in email  The QR image is a byte array which is generated using ZXing  We do not want to save it to a file because saving reading from a file is too expensive  slow   So both of the answers above do not work for me  Here s what I did to solve this problem   import javax mail util ByteArrayDataSource  import org apache commons mail ImageHtmlEmail      ImageHtmlEmail email   new ImageHtmlEmail    byte   qrImageBytes   createQRCode       get your image byte array ByteArrayDataSource qrImageDataSource   new ByteArrayDataSource qrImageBytes   image png    String contentId   email embed qrImageDataSource   QR Image      Let s say the contentId is  111122223333   then your HTML part should have this    lt img src  cid  111122223333  gt   There s no need to convert the byte array to Base64 because Commons Mail does the conversion for you automatically  Hope this helps

[html] base64 encoded images in email signatures

Important

Examples related to html

Examples related to image

Examples related to email

Examples related to base64