How to 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

Hello @kartik,

Try this:

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