What is the correct way to create a HTML-Email with inline attachments and non-inline attachments?
In addition please tell me what Content-Type to use with only inline attachments and with only non-inline attachments.
Until now i did it like this:
MIME-Version: 1.0 [some more headers] Content-type: multipart/mixed; boundary="myboundary" --myboundary Content-Type: text/html; charset=ISO-8859-15 Content-Transfer-Encoding: 7bit [html with img cid:my_image] --myboundary Content-Type: image/png; name="my_image.png" Content-Transfer-Encoding: base64 Content-ID: <my_image> Content-Disposition: inline; filename="my_image.png" [base64 image data] --myboundary Content-type: application/pdf; name="my_pdf.pdf" Content-length: 1150 Content-Transfer-Encoding: base64 Content-ID: <my_pdf.pdf> Content-Disposition: attachment; filename="my_pdf.pdf" [base64 pdf data] --myboundary--
The mail looks good in outlook. But I noticed that Thunderbird did not display my inline image and shows 2 attachments instead (My image and my PDF). So I did some debugging and noticed that inline images should be sent via Content-Type: multipart/related
.
So I changed Content-Type: multipart/mixed
to Content-Type: multipart/related
and Thunderbird displayed it correct: The image is shown in html and one attachment, the PDF is shown.
I am not sure if this is the correct solution although it seems to work. Is it correct to use multipart/related
always (in case if i have inline and non-inline attachments, in case if i have only inline attachments and in case if i have only non-inline attachments)?
Or is the correct way to use one boundary of type related to split the inline attachments and one other boundary of type mixed to split the non-inline attachments?
I hope you can provide me a sample for
Inline and Non-Inline Attachments. An email can contain inline and non-inline attachments. While inline attachments are meant to be part of the message body, non-inline attachments are added to the end of the message. The "Attachments"-button allows to customize what is shown in the list of attachments.
'Inline' indicates that the entity should be immediately displayed to the user, whereas `attachment' means that the user should take additional action to view the entity.
Navigate to Mail > Layout 4. Turn off inline previews for attachments and save: The final step is to turn off inline previews in the Outlook.com mail settings. So, scroll to the end of the layout settings and you will notice the heading for “Inline Previews”.
Images
Yes, it is correct approach to use multipart/related
content type. Here is an example (please note 'Content-Type' and 'Content-Disposition' values):
Example source and detailed info
Here are samples you've requested:
Sample 1: inline only
Subject: Test 01: inline only To: Renat Gilmanov Content-Type: multipart/related; boundary=089e0149bb0ea4e55c051712afb5 --089e0149bb0ea4e55c051712afb5 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable <div dir=3D"ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. P= ellentesque odio urna, bibendum eu ultricies in, dignissim in magna. Vivamu= s risus justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urn= a id pulvinar.<br><br><img src=3D"cid:ii_ia6yo3z92_14d962f8450cc6f1" height= =3D"218" width=3D"320"><br>=E2=80=8B<br>Cras eu velit ac purus feugiat impe= rdiet nec sit amet ipsum. Praesent gravida lobortis justo, nec tristique ve= lit sagittis finibus. Suspendisse porta ante id diam varius, in cursus ante= luctus. Aenean a mollis mi. Pellentesque accumsan lacus sed erat vulputate= , et semper tellus condimentum.<br><br>Best regards<br></div> --089e0149bb0ea4e55c051712afb5 Content-Type: image/png; name="test-01.png" Content-Disposition: inline; filename="test-01.png" Content-Transfer-Encoding: base64 Content-ID: <ii_ia6yo3z92_14d962f8450cc6f1> X-Attachment-Id: ii_ia6yo3z92_14d962f8450cc6f1 iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB ... QCDLAIEsAwSyDBDIMkAgywCBLAMEsgwQyDJAIMsAgSwDBLIMEMgyQCDLAIEsAwSyDBDIMkAg6wK+ 4gU280YtuwAAAABJRU5ErkJggg== --089e0149bb0ea4e55c051712afb5--
Sample 2: only attachments
Subject: Test 02: only attachments To: Renat Gilmanov Content-Type: multipart/mixed; boundary=047d7b41cc5c82ae5d051712c40c --047d7b41cc5c82ae5d051712c40c Content-Type: text/plain; charset=UTF-8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque odio urna, bibendum eu ultricies in, dignissim in magna. Vivamus risus justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urna id pulvinar. Cras eu velit ac purus feugiat imperdiet nec sit amet ipsum. Praesent gravida lobortis justo, nec tristique velit sagittis finibus. Suspendisse porta ante id diam varius, in cursus ante luctus. Aenean a mollis mi. Pellentesque accumsan lacus sed erat vulputate, et semper tellus condimentum. Best regards --047d7b41cc5c82ae5d051712c40c Content-Type: image/png; name="test-02.png" Content-Disposition: attachment; filename="test-02.png" Content-Transfer-Encoding: base64 X-Attachment-Id: f_ia6yvl4b0 iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB ... gECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBA1gWV ywTWDU1tpwAAAABJRU5ErkJggg== --047d7b41cc5c82ae5d051712c40c--
Sample 3: inline and attachments
Subject: Test 03: inline and attachments To: Renat Gilmanov Content-Type: multipart/mixed; boundary=001a11c24d809f1525051712cc78 --001a11c24d809f1525051712cc78 Content-Type: multipart/related; boundary=001a11c24d809f1523051712cc77 --001a11c24d809f1523051712cc77 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable <div dir=3D"ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. P= ellentesque odio urna, bibendum eu ultricies in, dignissim in magna. Vivamu= s risus justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urn= a id pulvinar.<br><br><img src=3D"cid:ii_ia6yyemg0_14d9636d8ac7a587" height= =3D"218" width=3D"320"><br>=E2=80=8B<br>Cras eu velit ac purus feugiat impe= rdiet nec sit amet ipsum. Praesent gravida lobortis justo, nec tristique ve= lit sagittis finibus. Suspendisse porta ante id diam varius, in cursus ante= luctus. Aenean a mollis mi. Pellentesque accumsan lacus sed erat vulputate= , et semper tellus condimentum.<br><br>Best regards</div> --001a11c24d809f1523051712cc77 Content-Type: image/png; name="test-01.png" Content-Disposition: inline; filename="test-01.png" Content-Transfer-Encoding: base64 Content-ID: <ii_ia6yyemg0_14d9636d8ac7a587> X-Attachment-Id: ii_ia6yyemg0_14d9636d8ac7a587 iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB ... QCDLAIEsAwSyDBDIMkAgywCBLAMEsgwQyDJAIMsAgSwDBLIMEMgyQCDLAIEsAwSyDBDIMkAg6wK+ 4gU280YtuwAAAABJRU5ErkJggg== --001a11c24d809f1523051712cc77-- --001a11c24d809f1525051712cc78 Content-Type: image/png; name="test-02.png" Content-Disposition: attachment; filename="test-02.png" Content-Transfer-Encoding: base64 X-Attachment-Id: f_ia6yymei1 iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB ... gECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBA1gWV ywTWDU1tpwAAAABJRU5ErkJggg== --001a11c24d809f1525051712cc78--
Quick summary
multipart/related
multipart/mixed
multipart/mixed
and multipart/related
Update
Here is a very interesting article: Using Images in HTML Email
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With