HTML, CSS に画像を base64 エンコードしたテキストで埋込み

画像を base64 エンコードしたテキストで HTML, CSS へ埋め込み。
※ IE6, IE7 では表示されないそうです。

img タグの場合は、上から GIF、JPEG、PNG

<img src="data:image/gif;base64,xxxxxx...." />
<img src="data:image/jpg;base64,xxxxxx...." />
<img src="data:image/png;base64,xxxxxx...." />

CSS の場合は、上から GIF、JPEG、PNG

background: url(data:image/gif;base64,xxxxxx...) no-repeat;
background: url(data:image/jpg;base64,xxxxxx...) no-repeat;
background: url(data:image/png;base64,xxxxxx...) no-repeat;

画像を base64 へエンコードするには、php で画像を直接指定してエンコード処理してしまうのが簡単な方法ではないかと思います。

<?php
$img = file_get_contents( 'http://example.com/sample.png' );
$img = base64_encode( $img );
print $img;
?>

サイズの小さい画像などはリクエスト数を減らすには良いみたいです。
ただ、画像が多い場合は、html、CSS のサイズが大きくなってしまうので、向いていないと思います。

小さい画像をbase64をかけてhtml内に埋め込み – moogme開発記録