Question

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.

EDIT

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.

Answer 1

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,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
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" />