Attach HTML as text in Outlook for Mac (2011)?

Outlook for Windows has an option when attaching files, under the arrow on the 'Insert' button on the file upload dialog box, called "Insert as text". When used with HTML files, it converts the HTML into the body of the email text as a HTML email from the file, and attaches all linked images so that they are bundled with the email and shown in the email. It's handy for making emails or for easy testing of mailshot templates.

Outlook for Mac doesn't have this feature. The nearest workaround I can find is copying the HTML from select-all on a web browser. Unfortunately, this requires hosting images on a web server instead of including them with the email correctly formatted as per the HTML*.

Is there a way to put the code and images of a HTML file into the body of an email in Outlook for Mac 2011, like using the Attach file > Insert button dropdown > Insert as text feature in Outlook for Windows?

**Obviously, externally hosting images rather than attaching them is good practice for a real, serious final mailshot. But this isn't a real serious final mailshot (if it was I wouldn't be using Outlook...), it's small-scale formatted emails and tests/iterations which (for complicated reasons) can't be done in a proper HTML email handling system*

Solution 1:

I'm not in front of my mac to try at the moment, but your description sounds a lot like the way Apple's mail.app handles image attachments. They are (or at least they can be if you choose to) rendered in-line, in the body of the email text.

I don't know what's happening in the background there (html, code, etc.), but have you tried composing your message in mail.app and copy/pasting into Outlook, or perhaps use mail.app to send yourself a properly rendered message and view source, or something to that effect... to then import the composed message, images in-line, into Outlook?

Solution 2:

As far as I can tell, this is impossible using Outlook for Mac directly. BUT - there's a workaround using Gmail that works.

Strengths: It gets the image into the HTML, preserves nearly all your carefully crafted HTML (I haven't yet found anything it significantly distorts apart from the notes below), and it includes the image as an ID-referenced Content-transfer-encoding: base64 in the email header - the 'proper' way to embed images in HTML email which, in my testing, shows the image by default without prompts or warnings when received in Outlook 2011, Gmail and Hotmail. Also, the image stays and continues to work when the image is forwarded.

Weaknesses: Going via Gmail seems to remove <style> blocks (but many email clients do so anyway, most cross-client HTML emails will use inline styles), and it removes custom styles and classes from the image itself, so where possible try to apply them to a wrapper. Also, it assumes the dimensions of the image file are the exact dimensions at which you want it to be shown (also a good cross-client practice).

Here's the steps:

1. Get a Gmail account if you don't have one already.
2. Open the Gmail compose window. Go to Settings from the cog, then Labs, enable Insert Images.
3. Create the HTML as a HTML file. Link to images locally. Use a layout that doesn't depend too much on the HTML styles and classes of the image itself.
4. Open the HTML in Google Chrome (using Firefox causes any anchor links to be pointed at the original file on your local system). Select all in the regular Chrome window, copy and paste.
5. Paste into the Gmail compose window.
6. Select your image (it'll probably be an empty broken image rectangle). Use the Insert Image button to upload your local image to where it was. Delete the original broken reference.

That's it - the image should be re-inserted in the correct place. If it needs to go via Outlook for Mac, email it to your Outlook for Mac account, then forward.

An alternative is converting the image to Base 64 and writing it like <img src="data:image/png;base64,iVBORw0KGgoAA..." /> then copying into Outlook (or Gmail) from a browser. The problem with this is, in my testing it seems to be much more likely to not shown, removed or made to go through "Download images" prompts (which for me on Outlook 2011 don't actually then show anything).