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

php html image embed
Rella picture Rella · May 11, 2010 · Viewed 110.6k times · Source

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

Nick Craver picture Nick Craver · May 11, 2010

There are a few base64 encoders online to help you with this, 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>" />

Related questions

How to embed images in a single HTML / PHP file?

I am creating a lightweight, single-file database administration tool and I would like to bundle some small icons with it. What is the best way to embed images in a HTML/PHP file? I know a method using PHP where …

Read More
Get img src with PHP

I would like to get the SRC attribute into a variable in this example: <img border="0" src="/images/image.jpg" alt="Image" width="100" height="100" /> So for example - I would like to get a variable $foo = "/images/image.…

Read More
Send email with PHPMailer - embed image in body

I'm trying to send HTML mail, with PHPMailer, with images. The body is loaded from a html file, that contains all the info. When sending the mail, the image does not appear in the body, although I even send the …

Read More