インライン画像-画像読み込み速度の高速化-

雑記

インライン画像とは通常の「img src="画像ファイルのパス"」でHTMLリクエストを発生、画像を読み込ませることで
通信速度が遅くなる原因を、画像ファイルのバイナリーデータをBase64エンコードした文字列にすることでデータの遅延を防ぐことができる。

base64エンコードの方法


PHPの場合



base64_encode()を使用

<?php
$img = base64_encode(file_get_contents("パス/ファイル名"));
?>
<img src="data:image/gif;base64,<?php echo $img; ?>">


compassの場合



「url」となる部分を「inline-image」に変える

セレクタ{
    background-image: inline-image("パス/ファイル名");
}


webサービスの場合



"base64 画像 変換"で検索すれば、プラウザ上で変換できるものが結構あります。

出力方法


 <img src="data:image/png;base64,iVBORw0KGgoAAAANS...(中略)">


実際の読み込み速度の比較。



「Pingdom Website Speed Test」でURLを入力して読み込み方法の異なる2つのサイトを通信速度を比較

画像ファイル読み込みの場合






インライン画像(base64読み込みの場合






結果



ページのグレード(Perf. grade)やロードタイム(Load time)などでインライン画像の方が最適な結果と成った。
これはcssファイルからimgファイルへリクエストが発生せずに、cssファイルの中だけで処理できる為。
ただ、画像ファイルよりも容量が大きくなっているがcssファイルをgzipで圧縮することで軽減できる。