Convert picture to base64

How to integrate base64 encoded pictures in web pages ?

You can embed the image data (with Data URIs) like this

With HTML

Example with img tag

With CSS & HTML

Example with div tag

<html><head><style type="text/css">
.class_example{background-image: url(data:image/png;base64,iVBORw......);width: ...px; height: ...px;}
</style></head>
<body>
<div class="class_example"></div>
</body>
</html>

Dimensions (width x height px) of picture have to be added into CSS in order to display picture into div.

Example with body tag

<html><head><style type="text/css">
body{ background-image:url(data:image/png;base64,iVBORw......);background-repeat:repeat;}
</style></head>
<body>
Content
</body>
</html>

You can use background repeat property with base 64 data and get a background that will be repeated.

Why changing image file to a base64 representation ?

When the browser will load the page, picture file will not be loaded from the server.
It saves HTTP Requests.

It's only the base64 representation of picture that will be loaded.

Almost every browser support base64 encoded images except ( Internet Explorer 5 to Internet Explorer 7)
You can use conditionnal comments to display image file into css stylesheet
If browser is IE 7 and Lower :

And for example you call into style-ie7-and-lower.css image.png to display image and not base64 content.

body{background-image:url('image.png');background-repeat:repeat;}

More information : http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

convert picture to base64

How to integrate base64 encoded pictures in web pages ?

Why changing image file to a base64 representation ?