'Base64 images to gmail

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?

htmlemailipadgmailbase64


Solution 1:[1]

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 2:[2]

Make sure you set Content-Type: multipart/mixed; , boundary and Content-Transfer-Encoding: base64

Solution 3:[3]

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 4:[4]

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 5:[5]

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 = '[email protected]';



                        $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 6:[6]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 valexa
Solution 3
Solution 4
Solution 5 Shivek Parmar
Solution 6 Ivan Extremera

Related Questions