Convert picture to base64

How to integrate base64 encoded pictures in web pages?

You can embed the image (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.

convert picture to base64

How to integrate base64 encoded pictures in web pages?