htmlemailoutlook

How to insert HTML (including images) in an e-mail in Outlook 2016+


Although Outlook sends e-mails as HTML by default, Microsoft seems to want to make it hard for us to write that HTML ourselves. One important reason for using HTML is to keep the size of an e-mail down when inserting an image by using an <img> tag to access the image from online instead of inserting the image itself in the body of the e-mail.

Several sources [e.g., 1, 2] say that the way to do this is to use "Insert as Text" to insert a file containing the HTML code. But as of Office 2016, the "Insert as Text" option is no longer available by default. Fortunately though, there are also sources [e.g., 3] that show how to get it back.

However, when I tried this, Outlook did not interpret my HTML. So, for example, if I make a file containing the line:

<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">

and then use "Insert as Text" to insert that line in my e-mail, the result is just that line of code, not the image. What am I doing wrong?

(As indicated by the alt attribute, the image file in that example is just a random online image that appears in one of the articles referenced above. I have no affiliation with that website.)


Solution

  • The answer is very simple. In a way, it's obvious, but in another way, it's not.

    The answer is that each segment of HTML code inserted has to be a complete HTML file, including the <!DOCTYPE>, <HTML> and <body> tags, not just the desired HTML code. The reason this is not obvious is because if you insert multiple code segments, each one has to be a complete HTML file, which is something you would never do when actually writing HTML. I presume that what is happening is that when Outlook detects a valid HTML file being "Inserted as Text", it strips the opening and closing <!DOCTYPE>, <HTML> and <body> tags and then inserts the code that was between them -- as HTML, not as text.

    So, the solution I found was that instead of the single line of code shown in the question, I need to "Insert as Text" a file containing:

    <!DOCTYPE html>
    <html>
    <body>
    <img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
    </body>
    </html> 
    

    When I insert that as text in my e-mail, I see the image, not the code.

    In all the sources I found online that said to use "Insert as Text" to insert HTML in Outlook, none of them said it had to be a complete HTML file instead of just the desired code. So maybe this Q&A will be helpful to someone else, if I'm not the only person who had to scratch my head for a long time before thinking of that.

    ========================

    Added details about using HTML in the e-mail:

    As pointed out in the Lenetek article linked in the question, Outlook does not support all HTML tags. In particular, for embedding images, I have found:

    When sending from Outlook: Outlook does not support <figure> and <FigCaption>. I found that an image and caption placed in those tags were rendered inline, just ignoring the tags. For floating to the right margin, I found I was able to get the same results by replacing <figure> with <table> and then placing the image and its caption each inside of <TR><TD>...</TD></TR>.

    When receiving in Outlook: There are differences in how different e-mail clients interpret HTML, which is probably why some e-mails come with a link at the top for viewing the e-mail in one's browser. In particular, I've read that Outlook is not well behaved in this regard. And that was the case with my right-floated image referred to above.

    After doing the "Insert as Text" trick, the image appeared correctly at the right margin in the draft e-mail in Outlook, but when it was sent, the CSS style float attribute was ignored and the table appeared by itself at the left margin with no text wrapped around it. I was able to fix this by, in the <table> tag, replacing the style attribute float: right; with the old-fashioned HTML attribute align="right". With that, the image and caption appeared correctly at the right margin when received in Outlook. I have not tested what it looks like in other e-mail clients.