Base64 encoded image is not showing in gmail
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.
Another thing to be mindful of with base64 encoded images is email file size. Gmail App (iOS, Android) and Outlook (iOS) truncate email messages whose file size exceeds 102KB. Remotely referenced images (Eg. <img src="http://www.website.com/image.png">
do not count towards the email's file size, but base64 encoded images do and can quickly blow out an email's file size past the 102KB limit. Just something else to consider.
Base64 images to gmail
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: <BE0243A40B89D84DB342702BC5FD6D313EA3BE1B@BYMAIL.example.com>
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@example.com
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:image001.png@01CDA268.204677C0"></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: <image001.png@01CDA268.204677C0>
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
Base64 images to gmail in Delphi
At first i thought the issue is this : PCFET0NUWVBFIGh0bWwgUFVCTElDICItL
since it does not look like base64 code of png which starts with iVBOR.
But the issue was here : Content-ID: qrcode.png
When setting Content-ID you have to be carefull since in some versions simply setting it with quotation marks is not enough and you have to set it with adding <> like so : Content-ID: <qrcode.png>
.
With this the result was as wanted.
An image with base64 source won't display properly in email's body
https://www.google.com/search?q=does+gmail+display+base64&rlz=1C1GCEU_ruRU819RU819&oq=does+gmail+display+base64&aqs=chrome..69i57j33.6352j0j7&sourceid=chrome&ie=UTF-8
2 Answers. 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.Nov 18, 2019
Related Topics
Two Inline-Block, Width 50% Elements Wrap to Second Line
Inline Elements and Line-Height
Prevent Flex Items from Rendering Side to Side
Ellipsis For Overflow Text in Dropdown Boxes
Difference in Applying CSS to Html, Body, and the Universal Selector *
Best Way to Include Css? Why Use @Import
Position an Element Relative to Its Container
How Make Background Image on Newsletter in Outlook
Canvas Drawings, Like Lines, Are Blurry
Allow 2 Decimal Places in ≪Input Type="Number"≫
Angular 2 Checkbox Two Way Data Binding
Float Does Not Work in a Flex Container
How to Remove the Underline For Anchors(Links)
Imitating a Blink Tag With Css3 Animations