Menu
I'm generating some inline images for an email sent from the iPad. Looks great in all desktop email clients, but gmail doesn't seem to like the base64 image and it shows up as text.
Anyone have any luck embedding images with base64 and gmail? Or know of a better solution for sending HTML emails with images from the iPad?
253
base64 encoded images are not well supported in email. They aren't supported in most web email clients (including Gmail) and are completely blocked in Outlook. Apple Mail is one of the few clients that does support them, that's why you're able to see them there but not elsewhere.
Essentially, base64-encoded images are technically supported in both client-side and server-side signature modes (you can insert them manually into your HTML code), although they can cause unexpected errors or behaviors. Note that email clients' rendering capabilities are much worse than those of actual web browsers.
The Gmail Compose window can contain natively-embedded images only if you insert them using the “Insert photo” feature using the Photos, Albums, or Upload tabs.
Google's Gmail website automatically blocks many email images until it's sure the messages are coming from a trusted source. You can't instruct Gmail to always show images from all senders, but you can allow images from certain senders by clicking "Always Display Images From …" at the top of their messages.
The links from Moin Zaman show test results that are outdated (from 2008). As of my thorough testing today Gmail does support displaying embedded images for both methods.
Use base64 encoding image inline within <img src="...">
<html><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO..."></body></html>
Use base64 encoded image as attachment
Message-ID: <[email protected]>
Accept-Language: en-US
Content-Language: en-US
X-MS-Has-Attach: yes
X-MS-TNEF-Correlator:
x-originating-ip: [xxx.xxx.xxx.xxx]
Content-Type: multipart/related;
boundary="_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_";
type="multipart/alternative"
MIME-Version: 1.0
Return-Path: [email protected]
X-OriginatorOrg: example.com
--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: multipart/alternative;
boundary="_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_"
...skipping Content-Type: text/plain which would be here for this example...
--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<html><body><img border=3D"0" width=3D"980" height=3D"230" id=3D"Picture_x0020_1" src==3D"cid:[email protected]"></body></html>
--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_--
--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: image/png; name="image001.png"
Content-Description: image001.png
Content-Disposition: inline; filename="image001.png"; size=32756;
creation-date="Mon, 08 Oct 2012 15:27:07 GMT";
modification-date="Mon, 08 Oct 2012 15:27:07 GMT";
Content-ID: <[email protected]>
Content-Transfer-Encoding: base64
iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO
xAAADsQBlSsOGwAAf5lJREFUeF7tvQlgVdW18L+ZR20mpsSLCYlBQKwgwRCMr9TAqzg0CAl98Y9a
ikBfHxL1A/r0tUr77Feg1mDav4LUijxTk8hLRIstQ2mJhEiAWAEpNCGRa8KUSQXCzLf2cOZz7j33
5s5Zx6j3nruHtX97n33WWWfttbtdv36d4IEEkAASQAJIAAkgASSABJCA/wl0938VWAMSQAJIAAkg
ASSABJAAEkAClAAq3zgOkAASQAJIAAkgASSABJBAgAig8h0g0FgNEkACSAAJIAEkgASQABJA5RvH
...
To do your own testing, you can send email with inline embedded image using one of the following techniques
Send an email using one of the above to your Gmail account, then open the Email in Gmail Web Client (any browser that works) and use the Down-Arrow next to the Reply button to choose the Show Original option. This will show you how it is received.
I think best practice is to use the embedded image as attachment method.
In my testing with Gmail Web Client, if I sent 30 images in a single email of different sizes, a few would not load successfully showing image container but not the image. If that happens, try reloading the page.
In my testing (Windows 7)...
57
There doesn't seem to by any official documentation but Gmail definitely doesn't support this, inline or as an attachment in base64.
Here is some testing that campaign monitor tried:
Embedding images in email
Embedding images revisited
26
Make sure you set Content-Type: multipart/mixed; , boundary and Content-Transfer-Encoding: base64
26
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
