Inline Images With Data URLs

Posted by jj_jiles on Aug 11, 2010 in PHP | 0 comments

This particular trick comes in very handy for the mobile platforms. Instead of linking to your CSS and your images, you can use this method to embed the images inline within the CSS. This keeps the browser from having to make multiple calls, thus speeding up the load time of your application. You can also use this method within an IMG tag as well.

	/* ***********************************************************
	* START :::
	*	64bit encodes images for CSS embedding
        *      Alternatively, if you are not using PNGs, you can specify the Mime Type
        *      PNG is the default mime
	*********************************************************** */
	function data_url($file, $mime='') {  

		$mime = empty($mime) ? 'image/png' : $mime;

		$contents = file_get_contents($file);
		$base64   = base64_encode($contents);
		return ('data:' . $mime . ';base64,' . $base64);
	}
	/* ***********************************************************
	* END :::
	*********************************************************** */

In the CSS style sheet

You would need to either tell your server to process files with the .css extension or save your CSS files with the .php extension. It’s your call.

 body { background-image: url('<?php echo data_url('http://domain.com/images/file.png'); ?>') no-repeat; }

/* output code would be something like */
body { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=') no-repeat; }

Within HTML img tags

<img src="<?php echo data_url('http://domain.com/images/file.png'); ?>" border=0 />

<!-- output code would be something like --> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=" border=0 />