HTMLに画像を直接埋め込むインライン化の紹介

今回は王道のテクニックとはそれますが、画像のインライン化というテクニックについて紹介します！画像のインライン化は通信回数をへらすことでサイトの表示速度を向上させることができる可能性のあるテクニックです。早速いってみましょう。

画像のインライン化とは？

画像のインライン化は、画像をimgタグを利用せずに直接エンコーディングして埋め込んでしまうテクニックです。そうすることで通信回数を減らすことができるため、表示速度が改善される場合があります。ただしデメリットとして、通信回数は改善されますが、画像を転送するための通信の総サイズは増加します。したがって小さめの画像でなければ活用は厳しいでしょう。したがって通信回数を節約するか通信量を節約するかの比較になるわけです。

例えば小さいですが、この画像（10pxの正方形）を

インライン化するためにエンコーディングしてみると、

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmBhkWBwD5cvaPAAAAGUlEQVQI12M4AwcMhJknt5zYBSKIUYuNCQANTk9hvF+hDAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wNi0yNlQwNzowNzowMCswOTowMNoaD+kAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDYtMjZUMDc6MDc6MDArMDk6MDCrR7dVAAAAAElFTkSuQmCC

という形式になります。この文字列を以下のサイトに打ち込んでみてください。

https://www.site24x7.com/ja/tools/datauri-to-image.html

すると画像を復元することができます。

これを実際の通信において応用するのが画像のインライン化になります。

どの場面で利用されるのか？

一概にはいえないものの、画像サイズが小さい場合に用いられる場合が多いです。例えば、スマホでのGoogleの検索結果の画面では、下記のようにサムネイル画像が表示されますが、この16x16の画像にはインライン画像が利用されています。この例のようにサイズが非常に小さい画像の場合、データを送受信するコストを省いてHTMLにコードを埋め込むことで通信量の削減をさせることができます。

インライン画像の確認方法

見た目上は何も変化がないため、その画像がインライン化どうかを判断することは難しいです。なのでブラウザの検証ツールを利用する必要があります。実際に以下にインライン画像を埋め込んでみました。いかがでしょう？一見すると判断できないだろうと思います。

この画像は以下のようなimg タグによるインライン画像なっています。

<img src="data:image/png;base64,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">

これをブラウザの検証ツールで確認すると...