画像を 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 のサイズが大きくなってしまうので、向いていないと思います。