Create Data URI's | CSS-Tricks

These can be useful for embedding images into HTML/CSS/JS to save on HTTP requests, at the cost of maintainability. More information. There are online tools to do it, but if you want your own very simple utility, here’s some PHP to do it:

function data_uri($file, $mime) {
  $contents=file_get_contents($file);
  $base64=base64_encode($contents);
  echo "data:$mime;base64,$base64";
}

Comments

Rodney Rehm

# May 1, 2012

Maybe this Gist helps, too.

Kathirason

# May 25, 2012

@Rodney, Many thanks for the Gist link..

David Higgins

# June 27, 2012

I don’t like the server-side way of doing this. I prefer a client-side solution. Here’s a much better solution. Just drag and drop the file, and it gives you a DATA URI.

http://iwantaneff.in/datauri

Enjoy!

Luca

# May 30, 2013

Nice little snippet. Updated it to automatically get the right image type, without passing it as a parameter.


/**
 * Creates data URI string of an image file for CSS image embedding.
 * @param  [string] $file path to the file
 * @return [string]       data URI string
 */
function get_data_uri($file) {

    $contents = file_get_contents($file);
    $base64 = base64_encode($contents);
    $imagetype = exif_imagetype($file);
    $mime = image_type_to_mime_type($imagetype);
  
    return "data:$mime;base64,$base64";
}
    function data_uri($file) {
        echo get_data_uri($file);
    }

Robert

Permalink to comment# November 13, 2013

How do you go about in using this?

Loading...

raham sher

# July 30, 2013

yaar,please step by step…

Comments

Leave a Reply Cancel reply