CSS Image
Using Data URI scheme you can embed images directly in HTML or CSS. It can be useful for two things:
- To save on requests to image files (images are loaded and cached only in one single request together with CSS file).
- 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.