embedding image in html email

Question

I m trying to send a multipart related html email with embedded gif images   This email is generated using Oracle PL SQL   My attempts have failed  with the image showing up as a red X  in Outlook 2007 and yahoo mail   I ve been sending html emails for some time  but my requirements are now to use several gif images in the email   I can store these on one of our web servers and just link to them  but many users email clients will not show them automatically and will need to either change settings or manually download them for each email   So  my thoughts are to embed the image   My questions are    What am I doing wrong here  Is the embedding approach the correct one  Any other options if I need to use more and more images   Attachments won t work  as the images are typically logos and icons that won t make sense out of the context of the message   Also  some elements of the email are links into an online system  so generating a static PDF and attaching won t work  to my knowledge anyway     snippet   MIME-Version  1 0 To  me gmail com BCC  me yahoo com From  email yahoo com Subject  Test Reply-To  email yahoo com Content-Type  multipart related  boundary  a1b2c3d4e3f2g1   --a1b2c3d4e3f2g1  content-type  text html        lt html gt       lt head gt  lt title gt My title lt  title gt  lt  head gt       lt body gt       lt div style  font-size 11pt font-family Calibri   gt       lt p gt  lt IMG SRC  cid my logo  alt  Logo  gt  lt  p gt       more html here       lt  div gt  lt  body gt  lt  html gt    --a1b2c3d4e3f2g1  Content-Type  image gif  Content-ID  lt my logo gt  Content-Transfer-Encoding  base64 Content-Disposition  inline   base64 image data here   --a1b2c3d4e3f2g1--   Many thanks   BTW  Yes  I have verified that the base64 data is correct  as I can embed the image in the html itself  using same algo use for creating header data  and see image in Firefox IE   I should also note that this is NOT for spam  the emails are sent to specific clients who are expecting it daily   The content is data-driven  and not adverts

User · Answer

For those who couldnt get one of these solutions working: Send inline image in email Following the steps laid out in the solution offered by @T30 i was able to get my inline image to display without being blocked by outlook (previous methods it was blocked). If you are using exchange like we are then also when doing:

service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("[email protected]");
SmtpClient smtp = new SmtpClient(service.Url.Host);

you will need to pass it your exchange service url host. Other than that following this solution should allow you to easily send embedded imgages.

User · Answer

Try to insert it directly  this way you can insert multiple images at various locations in the email    lt img src  data image jpg base64   base64-data-string here      gt    And to make this post usefully for others to  If you don t have a base64-data string  create one easily at  http   www motobit com util base64-decoder-encoder asp from a image file   Email source code looks something like this  but i really cant tell you what that boundary thing is for    To  email email de  Subject       Content-Type  multipart related   boundary  ------------090303020209010600070908   This is a multi-part message in MIME format  --------------090303020209010600070908 Content-Type  text html  charset ISO-8859-15 Content-Transfer-Encoding  7bit   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN  gt   lt html gt     lt head gt        lt meta http-equiv  content-type  content  text html  charset ISO-8859-15  gt     lt  head gt     lt body bgcolor   ffffff  text   000000  gt       lt img src  cid part1 06090408 01060107  alt    gt     lt  body gt   lt  html gt   --------------090303020209010600070908 Content-Type  image png   name  moz-screenshot png  Content-Transfer-Encoding  base64 Content-ID   lt part1 06090408 01060107 gt  Content-Disposition  inline   filename  moz-screenshot png    base64 image data here   --------------090303020209010600070908--     EDIT  Oh  i just realize if you insert the first code snippet from my post to write an email with thunderbird  thunderbird automatically changes the html code to look pretty much the same as the second code in my post

User · Answer

I don t find any of the answers here useful  so I am providing my solution    The problem is that you are using multipart related as the content type which is not good in this case  I am using multipart mixed and inside it multipart alternative  it works on most clients   The message structure should be as follows     Headers  Content-type multipart mixed  boundary  boundary1  --boundary1 Content-type multipart alternative  boundary  boundary2  --boundary2 Content-Type  text html  charset ISO-8859-15 Content-Transfer-Encoding  7bit  HTML code with a href  cid        --boundary2 Content-Type  image png  name  moz-screenshot png  Content-Transfer-Encoding  base64 Content-ID   lt part1 06090408 01060107 gt  Content-Disposition  inline  filename  moz-screenshot png   base64 image data here   --boundary2-- --boundary1--    Then it will work

User · Answer

Try to resolve that with Context Request   lt img width  quot 150 quot  height  quot 60 quot  src  quot     quot  Context Request Scheme     Context Request Host  Context Request PathBase  images logo png quot   quot    gt   In my situation  when I used Content-ID I had that image as an attachment as well  and that was not the best solution

User · Answer

It may be of interest that both Outlook and Outlook Express can generate these multipart image email formats  if you insert the image files using the Insert   Picture menu function   Obviously the email type must be set to HTML  not plain text    Any other method  e g  drag drop  or any command-line invocation  results in the image s  being sent as an attachment   If you then send such an email to yourself  you can see how it is formatted      FWIW  I am looking for a standalone windows executable which does inline images from the command line mode  but there seem to be none  It s a path which many have gone up    One can do it with say Outlook Express  by passing it an appropriately formatted  eml file

User · Answer

If you are using Outlook to send a static image with hyperlink  an easy way would be to use Word    Open MS Word Copy the image onto a blank page Add hyperlink to the image  Ctrl   K  Copy the image to your email

User · Answer

If it does not work  you may try one of these tools that convert the image to an HTML table  beware the size of your image though     http   stylecampaign com blog 2009 12 bypass-image-blocking-by-converting-images-to-html  http   neil fraser name software img2html

User · Answer

You need 3 boundaries for inline images to be fully compliant  Everything goes inside the multipart mixed  Then use the multipart related to contain your multipart alternative and your image attachment headers  Lastly  include your downloadable attachments inside the last boundary of multipart mixed

User · Answer

There s actually a very good blog post that lists pro s and cons of three different approaches to this problem by Martyn Davies  You can read it at https   sendgrid com blog embedding-images-emails-facts    I d like to add a fourth approach using CSS background images   Add   lt div id  myImage  gt  lt  div gt    to your e-mail body and a css class like    myImage       background-image   url  data image png base64 iVBOR    some more encoding    rkggg          width   the-actual-image-width       height   the-actual-image-height

User · Answer

The other solution is attaching the image as attachment and then referencing it html code using cid   HTML Code    lt html gt       lt head gt       lt  head gt       lt body gt           lt img width 100 height 100 id  1  src  cid Logo jpg  gt       lt  body gt   lt  html gt    C  Code   EmailMessage email   new EmailMessage service   email Subject    Email with Image   email Body   new MessageBody BodyType HTML  html   email ToRecipients Add  abc xyz com    string file     C  Users acv Pictures Logo jpg   email Attachments AddFileAttachment  Logo jpg   file   email Attachments 0  IsInline   true  email Attachments 0  ContentId    Logo jpg   email SendAndSaveCopy

User · Answer

Using Base64 to embed images in html is awesome  Nonetheless  please notice that base64 strings can make your email size big    Therefore    1  If you have many images  uploading your images to a server and loading those images from the server can make your email size smaller   You can get a lot of free services via Google   2  If there are just a few images in your mail  using base64 strings is definitely an awesome option   Besides the choices provided by existing answers  you can also use a command to generate a base64 string on linux   base64 test jpg

User · Answer

The following is working code with two ways of achieving this   using System  using Outlook   Microsoft Office Interop Outlook   namespace ConsoleApp2       class Program               static void Main string   args                         Method1                Method2                       public static void Method1                         Outlook Application outlookApp   new Outlook Application                Outlook MailItem mailItem   outlookApp CreateItem Outlook OlItemType olMailItem               mailItem Subject    This is the subject               mailItem To    john example com               string imageSrc    D   Temp  test jpg      Change path as needed              var attachments   mailItem Attachments              var attachment   attachments Add imageSrc               attachment PropertyAccessor SetProperty  http   schemas microsoft com mapi proptag 0x370E001F    image jpeg                attachment PropertyAccessor SetProperty  http   schemas microsoft com mapi proptag 0x3712001F    myident       Image identifier found in the HTML code right after cid  Can be anything              mailItem PropertyAccessor SetProperty  http   schemas microsoft com mapi id  00062008-0000-0000-C000-000000000046  8514000B   true                   Set body format to HTML              mailItem BodyFormat   Outlook OlBodyFormat olFormatHTML              string msgHTMLBody     lt html gt  lt head gt  lt  head gt  lt body gt Hello  lt br gt  lt br gt This is a working example of embedding an image unsing C   lt br gt  lt br gt  lt img align   baseline   border   1   hspace   0   src   cid myident   width      600      hold      gt     gt  lt  img gt  lt br gt  lt br gt Regards  lt br gt Tarik Hoshan lt  body gt  lt  html gt                mailItem HTMLBody   msgHTMLBody              mailItem Send                       public static void Method2                             Create the Outlook application              Outlook Application outlookApp   new Outlook Application                 Outlook MailItem mailItem    Outlook MailItem outlookApp CreateItem Outlook OlItemType olMailItem                  Add an attachment              String attachmentDisplayName    MyAttachment                   Attach the file to be embedded             string imageSrc    D   Temp  test jpg      Change path as needed              Outlook Attachment oAttach   mailItem Attachments Add imageSrc  Outlook OlAttachmentType olByValue  null  attachmentDisplayName                mailItem Subject    Sending an embedded image                string imageContentid    someimage jpg      Content ID can be anything  It is referenced in the HTML body              oAttach PropertyAccessor SetProperty  http   schemas microsoft com mapi proptag 0x3712001E   imageContentid                mailItem HTMLBody   String Format                    lt body gt Hello  lt br gt  lt br gt This is an example of an embedded image  lt br gt  lt br gt  lt img src   cid  0    gt  lt br gt  lt br gt Regards  lt br gt Tarik lt  body gt                    imageContentid                   Add recipient             Outlook Recipient recipient   mailItem Recipients Add  john example com                recipient Resolve                    Send              mailItem Send

User · Answer

One additional hint to Pavel Perna s post which helped me very much  cannot comment with my reputation  that s why I post this as answer   In some versions of Microsoft Exchange  the inline contents disposition is removed  see this post by Microsoft   The image is simply not part in the mail the user sees in Outlook  As a workaround  use  Content-Disposition  attachement  instead  Outlook 2016 won t show images as attachement that are used in the mail message  although they use the  Content-Disposition  attachement

User · Answer

I know this is an old post  but the current answers dont address the fact that outlook and many other email providers dont support inline images or CID images  The most effective way to place images in emails is to host it online and place a link to it in the email  For small email lists a public dropbox works fine  This also keeps the email size down

[html] embedding image in html email

Examples related to html

Examples related to image

Examples related to oracle

Examples related to email

Examples related to mime