3. Load Event
| タイプ |
HTMLへのリンク による埋め込み |
CSSへのリンク による埋め込み |
インラインイメージ | |||
|---|---|---|---|---|---|---|
| Github（1） | CDN（2） | Github（3） | CDN（4） | HTML（5） | CSS（6） | |
| 平均値 | 397.7ms | 166.8ms | 265.6ms | 250.2ms | 130.4ms | 245.1ms |
| 1（キャッシュ無） | 411 | 156 | 483 | 261 | 127 | 254 |
| 2 | 247 | 162 | 251 | 225 | 122 | 222 |
| 3 | 378 | 187 | 228 | 267 | 125 | 264 |
| 4 | 412 | 145 | 230 | 234 | 130 | 272 |
| 5 | 397 | 164 | 255 | 243 | 126 | 232 |
| 6 | 412 | 174 | 256 | 252 | 131 | 255 |
| 7 | 362 | 170 | 242 | 252 | 138 | 252 |
| 8 | 372 | 163 | 247 | 262 | 122 | 236 |
| 9 | 406 | 169 | 279 | 234 | 141 | 231 |
| 10 | 400 | 178 | 185 | 272 | 142 | 233 |
高速な通信回線の場合、DOMContentLoaded Eventに大きな差はありませんが、Load Eventには大きな差がでました。
HTMLへのリンクによる埋め込み（1）と比べると、インラインイメージ（5）のLoad Eventが起こる時間が非常に速くなっています。CDNの活用（2）も速度が改善されていますね。
| タイプ |
HTMLへのリンク による埋め込み |
CSSへのリンク による埋め込み |
インラインイメージ | |||
|---|---|---|---|---|---|---|
| Github（1） | CDN（2） | Github（3） | CDN（4） | HTML（5） | CSS（6） | |
| 平均値 | 1,888ms | 917.0ms | 1,061ms | 933.7ms | 970.7ms | 1,073.1ms |
| 1（キャッシュ無） | 1,650 | 543 | 1,150 | 801 | 286 | 680 |
| 2 | 1,620 | 1,110 | 853 | 830 | 1,510 | 818 |
| 3 | 1,370 | 714 | 1,170 | 881 | 513 | 854 |
| 4 | 2,020 | 1,160 | 1,070 | 1,080 | 760 | 1,100 |
| 5 | 1,630 | 806 | 793 | 880 | 1,190 | 881 |
| 6 | 2,850 | 1,190 | 1,090 | 1,060 | 1,210 | 1,500 |
| 7 | 1,580 | 820 | 893 | 773 | 1,100 | 1,530 |
| 8 | 1,510 | 1,120 | 1,660 | 1,060 | 1,740 | 784 |
| 9 | 2,510 | 792 | 1,070 | 882 | 925 | 1,700 |
| 10 | 2,140 | 915 | 861 | 1,090 | 473 | 884 |
モバイル通信回線の場合、HTMLへのリンクによる埋め込み（1）以外はそれほど差のない結果となりました。
インラインイメージは、回線状況が良い時には非常に速く、悪いときには非常に遅くなるというハイリスク・ハイリターンな手法のようです。3G回線の場合はより差が大きくなるかもしれませんね。
Base64エンコードの手間を省くには
インラインイメージの良さは分かっていてもBase64エンコードを行って埋め込むことが手間になりがちです。
この記事では詳しい解説は省きますが、サーバーサイドで自動変換をしたり、ツールを活用することでBase64エンコードや埋め込みを自動化できます。
例えば、HTMLはPHP（base64_encode）やRubyを使いサーバー側でエンコードさせる方法、CSSではSass/Compassのヘルパー（Compass Inline Data Helpers）などがあります。
また、変更時に書き換えが必要なため最善の方法とは言えませんが、エディタの機能を使った自動化手法があります。
例えば、Sublime text 2というエディタにEmmetというパッケージ（拡張機能）を入れることで、ショートカットキー（Ctrl+Shift+d）一発でBase64エンコードを行い埋め込むことができます。
この他にも便利なツールがあると思います。ツールを上手に活用して開発の手間を省きましょう。
1.Base64エンコードツール
自動で埋め込むことはできませんが、画像をBase64エンコードするためのツールを紹介しておきます。
中でも、duri.meはUIが分かりやすくクリップボードに自動コピーできたりと使い勝手も良くオススメです。
まとめ
インラインイメージの利用は埋め込み先のHTML・CSSのロードタイムにどう影響するかがポイントになります。
ブラウザがインラインイメージを利用したHTMLやCSSを読み込む時に、ファイルサイズ大きいことが原因でHTMLやCSSのロードタイムが遅くなってしまっては本末転倒です。その場合はリンクによる埋め込みを利用した方が良いでしょう。低速なモバイル通信回線の場合、特に注意が必要です。
ただし、gzipエンコードを活用することで転送時のファイルサイズを抑え影響を抑えることもできます。この場合はその限りではないでしょう。その上でインラインイメージを活用する場合は、HTML・CSSどちらに埋め込むかということも良く考えましょう。
文章として意味のある画像は、HTMLのイメージタグを使い埋め込むべきです。逆にアイコンなどの装飾に使われる画像はCSSに埋め込みましょう。特にページ内で複数回使われる画像の場合、OOCSS（Object-Oriented CSS）の概念を使い継承できるClass指定をしておくことで、無駄なデータの埋め込みを減らすことができます。
インラインイメージがどういうものなのか分かっていただけたでしょうか？ これで、インラインイメージに関する解説は終わりです。状況に合わせて活用してみてください。
次回はCSS Spriteとイメージマップについて解説いたします。お楽しみに！
