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

Question

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 1

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>" /> 

Answer 2

The 64base method works for large images as well. I use that method to embed all the images into my website, and it works every time. I've done it with files up to 2 MB size, JPEG and PNG.