Embedding Base64 Images

How to display Base64 images in HTML

My suspect is of course the actual Base64 data. Otherwise it looks good to me. See this fiddle where a similar scheme is working. You may try specifying the character set.

<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

Embedding Base64 Images

Update: 2017-01-10

Data URIs are now supported by all major browsers. IE supports embedding images since version 8 as well.

http://caniuse.com/#feat=datauri


Data URIs are now supported by the following web browsers:

  • Gecko-based, such as Firefox, SeaMonkey, XeroBank, Camino, Fennec and K-Meleon
  • Konqueror, via KDE's KIO slaves input/output system
  • Opera (including devices such as the Nintendo DSi or Wii)
  • WebKit-based, such as Safari (including on iOS), Android's browser, Epiphany and Midori (WebKit is a derivative of Konqueror's KHTML engine, but Mac OS X does not share the KIO architecture so the implementations are different), as well as Webkit/Chromium-based, such as Chrome
  • Trident

    • Internet Explorer 8: Microsoft has limited its support to certain "non-navigable" content for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32 KiB in Version 8[3].
    • Data URIs are supported only for the following elements and/or attributes[4]:

      • object (images only)
      • img
      • input type=image
      • link
    • CSS declarations that accept a URL, such as background-image, background, list-style-type, list-style and similar.
    • Internet Explorer 9: Internet Explorer 9 does not have 32KiB limitation and allowed in broader elements.
    • TheWorld Browser: An IE shell browser which has a built-in support for Data URI scheme

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

How can I display embedded Base64 encoded images in Outlook email

The background-image property from CSS is unsupported in Outlook. You can read more about that in the following series of articles:

  • Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
  • Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

You can add a web reference to any external image or just add an embedded image instead, for example:

    Set objOL = CreateObject("Outlook.Application")
Set objMail = objOL.CreateItem(olMailItem)
objMail.Attachments.Add "C:\pictest.jpg"
objMail.HTMLBody = "<html><p>This is a picture.</p>" & _
"<img src='cid:pictest.jpg' height=480 width=360>"
objMail.Display

See To add an embedded image to an HTML message for more information.

Embed a base64-encoded image at the bottom of HTML file

Inspired by this answer, it is possible to specify image contents via CSS using the all-purpose content attribute.

I do not know which browsers support this behaviour, although I strongly suspect most modern ones do.

Example modified from that answer:

<img src="#" class="myImage" />   

<style type="text/css">
.myImage {
content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw==');
}

</style>

Placing style elements in the body is illegal in HTML4, and dubious in HTML 5. However, every browser I know of supports it.

Remember that having inline images in HTML documents comes with some massive downsides, most prominently impaired cacheability.

base64 encoded images in email signatures

Important

My answer below shows how to embed images using data URIs. This is useful for the web, but will not work reliably for most email clients. For email purposes be sure to read Shadow2531's answer.


Base-64 data is legal in an img tag and I believe your question is how to properly insert such an image tag.

You can use an online tool or a few lines of code to generate the base 64 string.

The syntax to source the image from inline data is:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme

Send a base64 image in HTML email

Support, unfortunately, is brutal at best. Here's a post on the topic:

https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/

And the post content:
enter image description here

Use a base64 embedded image multiple times

If you can use CSS, you could place it there instead, as a class.

Then just add the class to the elements you want.

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.



Related Topics



Leave a reply



Submit