Embedding attached images in HTML emails

Question

If I attach an image to an email, how can I place it in the HTML content? I tried just using the filename as the image source but that doesn't seem to work.

Are you trying to do this programatically, or through an email client? — biggusjimmus
– biggusjimmus, Commented May 28, 2009 at 20:10

MacMartin · Accepted Answer · 2019-04-12 09:03:16Z

13

Option 01:
- attach the file "mySignaturePictue.jpg" as attachment to the mail
- reference this attachment from the body (insert it) whith code like:
<img src="cid:mySignaturePicture.png">

Option 02:
- convert your image to a base64 string: http://www.motobit.com/util/base64-decoder-encoder.asp
- insert it to the mailtext/html-body with code like
<img alt="My Image" src="data:image/jpeg;base64,AWWhcalkjsd/beginning/RXhp/of+/long/base64cod/ZgAATU0/+BlaBlubbZ5u8/61a+Xand/much/more..." />
- Downside: this is blocked by most clients and will increase the mail size, see: https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/ and https://www.paperstreet.com/blog/email-marketing-embeded-images-cid-what-a-mess/

edited Apr 12, 2019 at 9:03

answered Sep 28, 2017 at 11:39

MacMartin

3,0241 gold badge29 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

queeg Oct 10 at 6:45

Why does option 2 have the downside of increasing email size? Does option 1 not also increase the email size?

MacMartin Oct 21 at 16:20

I think it's because the image is converted to text. And that needs more space compared to raw image data. I encoded a 5.8K image to base64 and it resulted in a 7.7K text file.

queeg Oct 21 at 21:17

Agree, base64 is bigger than raw data. But it is common to transfer binary attachements in base64. So you need to compare the email sizes.

Lucero · Accepted Answer · 2009-05-28 20:15:32Z

11

Be more specific on how you build the HTML mail message.

The result will be a multipart-MIME message with a text/html part (if you really do it right with an alternate part of type text/plain) and several images, which are then referenced from within the HTML.

See RFC 1813 and RFC 2378 for more information about content-id in mixed MIME and related data (referred by CID in the HTML source).

edited May 28, 2009 at 20:15

answered May 28, 2009 at 20:09

Lucero

60.4k9 gold badges127 silver badges154 bronze badges

3 Comments

user83358 Over a year ago

It is built as a multipart MIME message with html and image parts. If I'm reading these RFCs correctly, it sounds like I just need to put a content id on the image attachments and then use cid:xxx as the image source.

Lucero Over a year ago

This is correct, if everything else is already in place in the MIME message, embedding them is easy.

Morgan Harris Over a year ago

This is a pretty poor, incomplete aswwer. @deem's answer below actually answers the question; the two RFCs mentioned don't talk about HTML or URI schemes at all.

Flyn Sequeira · Accepted Answer · 2018-09-20 12:26:21Z

9

The image attachment section needs Content-ID

--T4nu9J8b
Content-Type: image/png
Content-ID: <idname>
Content-Transfer-Encoding: base64
Content-Disposition: attachment ;filename="testimage.png"

iVBORw0KGgoAAAANS...
--T4nu9J8b--

Note: Content-ID name should be put in an angular bracket, as given

Embed it into the tag using same Content-ID (without the angular bracket)

<img alt="Embedded Image" src="cid:idname"/>

This should allow the attached image to be displayed into the HTML!

edited Sep 20, 2018 at 12:26

answered Sep 19, 2018 at 12:12

Flyn Sequeira

6922 gold badges10 silver badges28 bronze badges

Comments

Luis Ramos · Accepted Answer · 2012-12-17 11:48:31Z

5

The answer to your question is in the spring docs here.

 mailSender.send(new MimeMessagePreparator() {
   public void prepare(MimeMessage mimeMessage) throws MessagingException {
     MimeMessageHelper message = new MimeMessageHelper(mimeMessage, true, "UTF-8");
     message.setFrom("[email protected]");
     message.setTo("[email protected]");
     message.setSubject("my subject");
     message.setText("my text <img src='cid:myLogo'>", true);
     message.addInline("myLogo", new ClassPathResource("img/mylogo.gif"));
   }
 });

The body of the message is one of the parts of the multipart message (note the second parameter set to true on the constructor of MimeMessageHelper that sets the message to a multipart message).

The line message.addInline("myLogo"... adds the image as another part of the multipart message.

You can use .setText to set the body (HTML content) of the email message.

You can refer to other parts of the multipart email (your image) by using the tag cid. Note how the img src attribute is src='cid:myLogo'. cid is the content id of the image, sent as one of the parts of the multipart message.

answered Dec 17, 2012 at 11:48

Luis Ramos

1211 silver badge3 bronze badges

2 Comments

user3402040 Over a year ago

please post your class MimeMessage MimeMessageHelper , or directly .jar

Tk421 Over a year ago

It looks like message.addInline needs to go after message.setText or the file won't be attached to the email

deem · Accepted Answer · 2016-02-24 13:15:58Z

5

You can use the same way with src="cid:bgBoletin" property of img tag.

edited Feb 24, 2016 at 13:15

deem

1,2701 gold badge21 silver badges39 bronze badges

answered Mar 14, 2012 at 15:19

Developer

2211 gold badge4 silver badges10 bronze badges

Comments

Carlos Muñoz · Accepted Answer · 2016-12-15 19:39:29Z

3

I'm doing it in this way

_mime = new MimeMultipart();
BodyPart messageBodyPart = new MimeBodyPart();
messageBodyPart = new MimeBodyPart();
DataSource fds = new FileDataSource("C:\\bgBoletin.jpg");

messageBodyPart.setDataHandler(new DataHandler(fds));
messageBodyPart.setHeader("Content-ID", "<bgBoletin>");
_mime.addBodyPart(messageBodyPart);

And in HTM file whe reference de Content-ID in this way background: url(cid:bgBoletin).

edited Dec 15, 2016 at 19:39

Carlos Muñoz

17.9k8 gold badges58 silver badges82 bronze badges

answered Mar 14, 2012 at 15:13

Developer

2211 gold badge4 silver badges10 bronze badges

2 Comments

user3402040 Over a year ago

your class is MAIL ?... to use "MimeMultipart" - > class activation ?

mjs Over a year ago

Does not work...............

TheTXI · Accepted Answer · 2009-05-28 20:10:44Z

2

If this has to do with sending emails from a website you are developing, just keep the images on your server and then link to them using the <img src="url"/>.

answered May 28, 2009 at 20:10

TheTXI

38k10 gold badges89 silver badges110 bronze badges

5 Comments

Lucero Over a year ago

...most modern mail applications do't show those images for security reasons unless explicitly confirmed by the user. Embedding (small) images is much better in order to make sure that the message will show up as intended (or, this will be more likely).

Nathan Cox Over a year ago

@Lucero actively circumventing application behavior is taboo, in my opinion. The user has chosen to use a given application because of its features, and may in fact be offended that someone has gone out of their way to bypass this functionality. Most modern mail apps also give you the option of always viewing images from certain senders (or even domains), letting the user decide if they want to see your images in the future.

Lucero Over a year ago

@NathanCox, it's not at all about bypassing the functionality. E-mail clients don't download images for protecting the users from being exposed (when the web address is personalized, the sender could find out when the mail was read and also that the e-mail address is still valid and in use). Not displaying the linked images is a security measure and has nothing to do with the users preference of seeing images (that is a separate setting in some e-mail clients).

Nathan Cox Over a year ago

@Lucero I guess I've never used a client that had the two options separated. My experience has always been that if you want to disable images from downloading (e.g., if you're on a pay-for-bandwidth connection such as an air card or mobile phone) the option ties directly in with the security feature.

Lucero Over a year ago

@NathanCox, on pay-for-bandwidth connections you usually control whether attachments shall be downloaded. The emdedded images are MIME attachments (without filename but with an ID instead) so that e-mail clients should download the text only as well when your settings says not to download attachments.

Collectives™ on Stack Overflow

Embedding attached images in HTML emails

7 Answers 7

3 Comments

3 Comments

Comments

2 Comments

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

3 Comments

Comments

2 Comments

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related