インライン画像を使ってHTTPリクエストを減らそう

通常htmlページにイメージタグで画像表示した場合にhtml+画像×nって感じでHTTPリクエストが増えます
そこで画像をコードにしてhtmlに埋め込めばhtmlだけのリクエストで済みます
うまく説明できないですが要するに複数回のリクエストが一回のリクエストで済みます
$img = base64_encode(file_get_contents("icon.jpg"));
<img src="data:image/jpeg;base64,<?= $img; ?>">
phpだとこんな感じ
Googleの画像検索もこの手法です
なんだか良いことづくめな感じがしますが仮に10kbの画像だとすると13kb分のコードになります
こりゃめっちゃ長いコードです
画像ファイルのままより三割増になります
HTTPリクエスト数とhtmlの容量とを天秤にかけて選んだほうが良いでしょう

ちなみにここのサイトの掲示板はインライン画像より画像ファイルを読み込んだほうが断然速かったです

2015/06/01/ 22:03