Viewed   113 times

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 I would call the same file with a GET parameter that would output hardcoded binary data with the correct header, but that seems a bit complicated.

Can I use something to pass the image directly in a CSS background-image declaration? This would allow me to utilize the CSS sprite technique.

Browser support isn't an issue here, so more exotic methods are welcome also.


Does someone have a link/example to how to generate Data URL's properly with PHP? I'd figure echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) would suffice but I could be wrong.



A solution to embed an image directly in an HTML page would be to use the data URI scheme

For instance, you could use some portion of HTML that looks like this :

<img src="data:image/png;base64,
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

There are other solutions on the wikipedia page I linked to :

  • including the image as a CSS rule
  • Using some Javascript.

But note those solutions will not work on all browsers -- up to you to decide whether this is acceptable or not, in your specific situation.

Edit : to answer the question you asked about "how to generate Data URL's properly with PHP", take a look a bit lower in the wikipedia page about the Data URI scheme, which gives this portion of code (quoting) :

function data_uri($file, $mime) 
  $contents = file_get_contents($file);
  $base64   = base64_encode($contents); 
  return ('data:' . $mime . ';base64,' . $base64);

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="An elephant" />
Saturday, October 8, 2022

try with this code

$temp = $_FILES["file"]["tmp_name"];
$image = basename($_FILES["file"]["name"]);
$img = "images/".$image;
move_uploaded_file($temp, $img);
echo "<img src=images/".$image' />";
Tuesday, August 2, 2022

Ok, sorry, I was thinking too fast :)

imagepng() will output raw data stream directly to the browser, so you must use ob_start() and other output buffering handles to obtain it.

Here you are:

$output = ob_get_contents();

That is - you need to use $output variable for you base64_encode() function.

Saturday, October 29, 2022

Try below code:
Note: Make sure your uploads folder have write permission.

define("DOC_ROOT", $_SERVER['DOCUMENT_ROOT']."/");
define("PDF_UPLOADS", DOC_ROOT."uploads/");

$name = $_FILES['file']['name'];
$size = $_FILES['file']['size'];
$type = $_FILES['file']['type'];
$tmp_name = $_FILES['file']['tmp_name'];

if (isset($name)) 
    if (!empty($name)) 
        if(move_uploaded_file($tmp_name, PDF_UPLOADS. $name))
            echo 'Uploaded';
            echo "Not Uploaded";
        echo 'Please choose a file';

Sunday, September 4, 2022

As you are aware, everything passed as email message has to be textualized.

  • You must create an email with a multipart/mime message.
  • If you're adding a physical image, the image must be base 64 encoded and assigned a Content-ID (cid). If it's an URL, then the <img /> tag is sufficient (the url of the image must be linked to a Source ID).

A Typical email example will look like this:

Subject: A simple example
Mime-Version: 1.0
Content-Type: multipart/related; boundary="boundary-example"; type="text/html"

Content-Type: text/html; charset="US-ASCII"

... text of the HTML document, which might contain a URI
referencing a resource in another body part, for example
through a statement such as:
<IMG SRC="" ALT="IETF logo">

Content-Location: CID:somethingatelse ; this header is disregarded
Content-ID: <>
Content-Type: IMAGE/GIF
Content-Transfer-Encoding: BASE64

wbGljYXRpb24gcHJvaGliaXRlZC4A etc...


As you can see, the Content-ID: <> ID is matched to the <IMG> at SRC="". That way, the client browser will render your image as a content and not as an attachement.

Hope this helps.

Sunday, September 25, 2022
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :