CSS Image

Using Data URI scheme you can embed images directly in HTML or CSS. It can be useful for two things:

1. To save on requests to image files (images are loaded and cached only in one single request together with CSS file).
2. To embed images in HTML emails and bypass filters that normally would prevent them from displaying.

You can encode string with Base64.encode64 (Ruby) or base64_encode (PHP).

<?php
$image = base64_encode(file_get_contents('image.jpg'));
echo '<img src="data:image/png;base64,'.$image.'/>';
?>


See the output by inspecting source tag for the image.

1. by sobstel • November 2011