明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

画像をHTMLに直接埋め込む方法

HTMLで画像を表示する場合、<img />タグを使用します。
このとき、画像のバイナリデータが取得できるなら、以下のように書くことができます。

<?php
$mime_type = 'image/jpeg';
$image_data = base64_encode(file_get_contents("request-t.jpg"));
$img_tag = <<< EOF
<img src="data:$mime_type;base64,$image_data" />
EOF;

画像の MIME TYPE を $mime_type、バイナリデータを格納している変数 $image_data を base64_encode() 関数でエンコーディングします。
それを
<img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" /> の形で記述すれば、HTML文書内に直接画像を埋め込むことができます。
(ちなみに上記の画像は 1x1の透過GIFです)

この書き方のメリットは、画像をHTMLに直接埋め込めるので、画像の HTTP 接続が発生しないことです。
デメリットとしては、画像サイズがバイナリデータに比べ若干増加するため、表示に時間がかかってしまうことがあるという点です。
また、ブラウザは HTML ファイルをすべて読み込んでからページ描画を行うため、HTML 文書のサイズが大きいと、体感の待ち時間が大きくなる、という側面もあります。
画像を別リクエストとして処理する場合は、HTML の描画とは非同期に取得できるためユーザストレスが少ないです。

したがって、小さなサイズの画像を大量に表示するようなページでは使いやすいかと思います。