How to embed a .png image directly into an HTML document without linking to an external file?

Embedding a .png Image into an HTML Page

How can one embed a .png file into a blank "file.html" document so that the image displays when the file is opened in any browser, without linking to it from the HTML code?

Answer:

To embed an image into HTML without linking, utilize online Base64 encoders. One recommended option is http://www.greywyvern.com/code/php/binary2base64.

There are two main methods for embedding the image:

• CSS:

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

• Tag:

<img src="/static/imghwm/default1.png" data-src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" class="lazy" alt="My Image">

In both cases, replace with the output from the Base64 encoder.

The above is the detailed content of How to embed a .png image directly into an HTML document without linking to an external file?. For more information, please follow other related articles on the PHP Chinese website!