Base64 images to gmail
HtmlEmailIpadGmailBase64Html Problem Overview
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?
Html Solutions
Solution 1 - Html
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
- Using code by creating your own base64 image strings
- Enable and use Google Lab for Inserting Images
- Paste image into Email client like Outlook 2010
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)...
- Chrome (latest) needed a couple of reloads to successfully load/show all 30 images
- Opera (latest) wouldn't successfully show all 30 images regardless of number of reloads
- Firefox (latest) consistently showed all 30 images without issue
- Internet Explorer 9 (latest) consistently showed all 30 images without issue
- Safari (latest) consistently showed all 30 images without issue
Solution 2 - Html
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
Solution 3 - Html
Make sure you set Content-Type: multipart/mixed; , boundary and Content-Transfer-Encoding: base64
Solution 4 - Html
I test that gmail don support also raw data uri images (without base64) - I use this snippet to generate image (which then was send to gmail addres) - but images not show up :(
To solve this issue you need to add images as attachements with cid and use that cid in img tags <img src="cid:123456"> - more details here
function convert() {
let base64 = imageBase64.value.split('base64,')[1];
let hex = [...atob(base64)].map(c => c.charCodeAt(0).toString(16).padStart(2, 0));
let img = 'data:image/png,%' + hex.join('%');
pic.src = img;
msg.innerText = img;
}
Put your img base64 data uri here<br>
<input style="width:200px" id='imageBase64' value="data:image/bmp;base64,Qk0aAwAAAAAAABsAAAAMAAAAEAAQAAEAGAAAAAAACFpyAAAAAAAACB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAKoH8AAAACFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCFpyCFpyKoH8KoH8KoH8AAAACB/NCB/NCFpyCB/NCB/NKoH8CB/NCB/NKoH8CB/NCFpyCFpyKoH8KoH8CFpyCFpyCFpyCFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NAAAAAAAACFpyAAAACFpyCFpyCFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NAAAAAAAACFpyAAAAAAAACFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NCFpyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8KoH8KoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyKoH8KoH8KoH8KoH8CFpyCFpyCFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyKoH8CFpyCFpyKoH8KoH8KoH8CFpyKoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAACFpyKoH8CFpyKoH8KoH8KoH8CFpyKoH8KoH8CFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyKoH8KoH8CFpyKoH8AAAACFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NKoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NAAAAAAAAKoH8KoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8">
<button onclick="convert()">Convert</button><br> Result
<br>
<textarea id='msg' rows="4" cols="50"></textarea><br>
<img id='pic'>
Solution 5 - Html
I use this generator https://codebeautify.org/svg-to-base64-converter
When you get onto the website, you can upload your image, for example an SVG image, after uploading your image you will get a code snippet with and in-bedded Base64 image that you can simple copy and past to your html file.
<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi4xNDciIGhlaWdodD0iNDAuMTMzIiB2aWV3Qm94PSIwIDAgMjIuMTQ3IDQwLjEzMyI+CiAgPGcgaWQ9IlBhdGhfNjExOCIgZGF0YS1uYW1lPSJQYXRoIDYxMTgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuNSAxLjUpIiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik0xNS42NTEsNi4xNjVoMy41Vi4yNjFBNDYuNyw0Ni43LDAsMCwwLDE0LjA1NiwwQzkuMDE1LDAsNS41NjMsMy4wNzUsNS41NjMsOC43MjV2NS4ySDB2Ni42SDUuNTYzVjM3LjEzM0gxMi4zOFYyMC41MjVoNS4zMzhsLjg0OS02LjZIMTIuMzhWOS4zNzhjMC0xLjkwNy41MjktMy4yMTMsMy4yNzEtMy4yMTNaIiBzdHJva2U9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0gMTQuMDU1NDk2MjE1ODIwMzEgMy44MTQ2OTcyNjU2MjVlLTA2IEMgOS4wMTQ5NTY0NzQzMDQxOTkgMy44MTQ2OTcyNjU2MjVlLTA2IDUuNTYyNzI2MDIwODEyOTg4IDMuMDc1MDkyMzE1NjczODI4IDUuNTYyNzI2MDIwODEyOTg4IDguNzI0ODUzNTE1NjI1IEwgNS41NjI3MjYwMjA4MTI5ODggMTMuOTI0OTY0OTA0Nzg1MTYgTCAtMy44MTQ2OTcyNjU2MjVlLTA2IDEzLjkyNDk2NDkwNDc4NTE2IEwgLTMuODE0Njk3MjY1NjI1ZS0wNiAyMC41MjQ4MTQ2MDU3MTI4OSBMIDUuNTYyNzI2MDIwODEyOTg4IDIwLjUyNDgxNDYwNTcxMjg5IEwgNS41NjI3MjYwMjA4MTI5ODggMzcuMTMzMjI0NDg3MzA0NjkgTCAxMi4zODAxNTU1NjMzNTQ0OSAzNy4xMzMyMjQ0ODczMDQ2OSBMIDEyLjM4MDE1NTU2MzM1NDQ5IDIwLjUyNDgxNDYwNTcxMjg5IEwgMTcuNzE4MDU1NzI1MDk3NjYgMjAuNTI0ODE0NjA1NzEyODkgTCAxOC41NjY2MDY1MjE2MDY0NSAxMy45MjQ5NjQ5MDQ3ODUxNiBMIDEyLjM4MDE1NTU2MzM1NDQ5IDEzLjkyNDk2NDkwNDc4NTE2IEwgMTIuMzgwMTU1NTYzMzU0NDkgOS4zNzc1OTM5OTQxNDA2MjUgQyAxMi4zODAxNTU1NjMzNTQ0OSA3LjQ3MDE2MzM0NTMzNjkxNCAxMi45MDk1OTY0NDMxNzYyNyA2LjE2NDY5MzgzMjM5NzQ2MSAxNS42NTEwNjU4MjY0MTYwMiA2LjE2NDY5MzgzMjM5NzQ2MSBMIDE5LjE0NjgxNjI1MzY2MjExIDYuMTY0NjkzODMyMzk3NDYxIEwgMTkuMTQ2ODE2MjUzNjYyMTEgMC4yNjEwOTMxMzk2NDg0Mzc1IEMgMTguNTQ0ODQ1NTgxMDU0NjkgMC4xODEzMTI1NjEwMzUxNTYyIDE2LjQ3MDYxNTM4Njk2Mjg5IDMuODE0Njk3MjY1NjI1ZS0wNiAxNC4wNTU0OTYyMTU4MjAzMSAzLjgxNDY5NzI2NTYyNWUtMDYgTSAxNC4wNTU0OTYyMTU4MjAzMSAtMS40OTk5OTYxODUzMDI3MzQgQyAxNi42ODQxNDY4ODExMDM1MiAtMS40OTk5OTYxODUzMDI3MzQgMTguODA3MzU1ODgwNzM3MyAtMS4yOTcwMTYxNDM3OTg4MjggMTkuMzQzODg1NDIxNzUyOTMgLTEuMjI1OTA2MzcyMDcwMzEyIEwgMjAuNjQ2ODE2MjUzNjYyMTEgLTEuMDUzMjI2NDcwOTQ3MjY2IEwgMjAuNjQ2ODE2MjUzNjYyMTEgMC4yNjEwOTMxMzk2NDg0Mzc1IEwgMjAuNjQ2ODE2MjUzNjYyMTEgNi4xNjQ2OTM4MzIzOTc0NjEgTCAyMC42NDY4MTYyNTM2NjIxMSA3LjY2NDY5MzgzMjM5NzQ2MSBMIDE5LjE0NjgxNjI1MzY2MjExIDcuNjY0NjkzODMyMzk3NDYxIEwgMTUuNjUxMDY1ODI2NDE2MDIgNy42NjQ2OTM4MzIzOTc0NjEgQyAxNC44Nzg1NTYyNTE1MjU4OCA3LjY2NDY5MzgzMjM5NzQ2MSAxNC4zMjYxNTY2MTYyMTA5NCA3Ljc5NDcwNDQzNzI1NTg1OSAxNC4xMzU1MDU2NzYyNjk1MyA4LjAyMTM3Mzc0ODc3OTI5NyBDIDEzLjk2NjA2NjM2MDQ3MzYzIDguMjIyODI0MDk2Njc5Njg4IDEzLjg4MDE1NTU2MzM1NDQ5IDguNjc5MTI0ODMyMTUzMzIgMTMuODgwMTU1NTYzMzU0NDkgOS4zNzc1OTM5OTQxNDA2MjUgTCAxMy44ODAxNTU1NjMzNTQ0OSAxMi40MjQ5NjQ5MDQ3ODUxNiBMIDE4LjU2NjYwNjUyMTYwNjQ1IDEyLjQyNDk2NDkwNDc4NTE2IEwgMjAuMjcxODA2NzE2OTE4OTUgMTIuNDI0OTY0OTA0Nzg1MTYgTCAyMC4wNTQzNTU2MjEzMzc4OSAxNC4xMTYyNDMzNjI0MjY3NiBMIDE5LjIwNTgwNjczMjE3NzczIDIwLjcxNjA5NDk3MDcwMzEyIEwgMTkuMDM3NTQ2MTU3ODM2OTEgMjIuMDI0ODE0NjA1NzEyODkgTCAxNy43MTgwNTU3MjUwOTc2NiAyMi4wMjQ4MTQ2MDU3MTI4OSBMIDEzLjg4MDE1NTU2MzM1NDQ5IDIyLjAyNDgxNDYwNTcxMjg5IEwgMTMuODgwMTU1NTYzMzU0NDkgMzcuMTMzMjI0NDg3MzA0NjkgTCAxMy44ODAxNTU1NjMzNTQ0OSAzOC42MzMyMjQ0ODczMDQ2OSBMIDEyLjM4MDE1NTU2MzM1NDQ5IDM4LjYzMzIyNDQ4NzMwNDY5IEwgNS41NjI3MjYwMjA4MTI5ODggMzguNjMzMjI0NDg3MzA0NjkgTCA0LjA2MjcyNjAyMDgxMjk4OCAzOC42MzMyMjQ0ODczMDQ2OSBMIDQuMDYyNzI2MDIwODEyOTg4IDM3LjEzMzIyNDQ4NzMwNDY5IEwgNC4wNjI3MjYwMjA4MTI5ODggMjIuMDI0ODE0NjA1NzEyODkgTCAtMy44MTQ2OTcyNjU2MjVlLTA2IDIyLjAyNDgxNDYwNTcxMjg5IEwgLTEuNTAwMDAzODE0Njk3MjY2IDIyLjAyNDgxNDYwNTcxMjg5IEwgLTEuNTAwMDAzODE0Njk3MjY2IDIwLjUyNDgxNDYwNTcxMjg5IEwgLTEuNTAwMDAzODE0Njk3MjY2IDEzLjkyNDk2NDkwNDc4NTE2IEwgLTEuNTAwMDAzODE0Njk3MjY2IDEyLjQyNDk2NDkwNDc4NTE2IEwgLTMuODE0Njk3MjY1NjI1ZS0wNiAxMi40MjQ5NjQ5MDQ3ODUxNiBMIDQuMDYyNzI2MDIwODEyOTg4IDEyLjQyNDk2NDkwNDc4NTE2IEwgNC4wNjI3MjYwMjA4MTI5ODggOC43MjQ4NTM1MTU2MjUgQyA0LjA2MjcyNjAyMDgxMjk4OCA1LjU5NzYxNDI4ODMzMDA3OCA1LjAzMTY0NTc3NDg0MTMwOSAyLjk4NzQ4Mzk3ODI3MTQ4NCA2Ljg2NDc0NjA5Mzc1IDEuMTc2NjU0ODE1NjczODI4IEMgOC42MzczNDYyNjc3MDAxOTUgLTAuNTc0NDI0NzQzNjUyMzQzOCAxMS4xMjM4NjYwODEyMzc3OSAtMS40OTk5OTYxODUzMDI3MzQgMTQuMDU1NDk2MjE1ODIwMzEgLTEuNDk5OTk2MTg1MzAyNzM0IFoiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI2YzYjYxZiIvPgogIDwvZz4KPC9zdmc+Cg=='/>
Works great.
Solution 6 - Html
Try This Buddies.. I m sure this Would work to include an image as an attachment
$output_hex_string_img = $image;
$output_bin_string_img = base64_decode($output_hex_string_img);
//echo base64_encode( $output_bin_string_img );
$XXX = base64_encode( $output_bin_string_img );
$from_name = "Senders Name";
$from_mail = "[email protected]";
$replyto = "[email protected]";
$subject = "Device Missing Notification";
$message = "Device Missing notification has been activated on your device. Please change this setting when you find your smartphone back. Best Of Luck!!\r\r ";
$mailto = 'xxxxxxxx@mail.com';
$file = $XXX;
$filename = "Print_shot.png";
$uid = md5(uniqid(time()));
$name = basename($file);
$header = "From: ".$from_name." <".$from_mail.">\r\n";
$header .= "Reply-To: ".$replyto."\r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-Type: multipart/mixed; boundary=\"".$uid."\"\r\n\r\n";
$header .= "This is a multi-part message in MIME format.\r\n";
$header .= "--".$uid."\r\n";
$header .= "Content-type:text/html; charset=iso-8859-1\r\n";
$header .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
$header .= $message."\r\n\r\n";
$header .= "--".$uid."\r\n";
$header .= "Content-Type: application/octet-stream; name=\"".$filename."\"\r\n"; // use different content types here
$header .= "Content-Transfer-Encoding: base64\r\n";
$header .= "Content-Disposition: attachment; filename=\"".$filename."\"\r\n\r\n";
$header .= $file."\r\n\r\n";
$header .= "--".$uid."--";
mail($mailto, $subject, "", $header);
But you have to include everything inside headers by using different Content-Type in headers. and whatever Appear in the Body which could be the third parameter in the mail function will be passed as a blank string..
Solution 7 - Html
This works fine: I set two src attribute, one with data:image/png;base64 and the other with the link to the image. When you use gmail, it use the src attribute with link and when you use other client of email it use the src attribute with data:image/png;base64. Try it!. you will see.
https://img.newoldstamp.com/i/0/0/0/0/197.png?g6mv7" width="24" class="tmp-social-twitter" alt="twitter">
Solution 8 - Html
MFMailComposeViewController *picker = [[MFMailComposeViewController alloc] init];
[picker addAttachmentData:UIImageJPEGRepresentation(_tempImage,1) mimeType:mimeType fileName:filename];
[picker setMessageBody:emailBody isHTML:YES];
If isHTML is YES, addAttachmentData will auto change to base64 string, in email html can see you img.
If isHTML is NO, addAttachmentData is attachment.