How to Embed PNG Images Directly into HTML Without External Files?

Embedding PNG Images into HTML Pages

The task of embedding a PNG image into an HTML page without linking to the image file raises the question: how to incorporate the image data directly into the HTML?

Embedding with Base64 Encoding

Base64 encoding provides a solution to embedding images into HTML. There are various online Base64 encoders available, but it's recommended to use a robust one like the one found at http://www.greywyvern.com/code/php/binary2base64.

This tool presents two primary embedding options: using CSS or the tag.

CSS Embedding

In CSS, embedding can be achieved as follows:

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

Tag Embedding

Alternatively, the tag can be used:

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

By utilizing Base64 encoding, you can embed PNG images directly into HTML pages, enabling the display of images without the need for external image files.

The above is the detailed content of How to Embed PNG Images Directly into HTML Without External Files?. For more information, please follow other related articles on the PHP Chinese website!