Can I embed a .png image into an HTML page?

How can I embed a .png file into a blank “file.html” so that when you open that file in any browser you see that image?

In this scenario, the image file is not linked to from the HTML, but rather the image data is embedded in the HTML itself.

Answer

There are a few Base64 encoders online to help you with this, and this is probably the best I’ve seen:

http://www.greywyvern.com/code/php/binary2base64

As that page shows your main options for this are CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}

Or the <img> tag itself, like this:

<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />