今回は王道のテクニックとはそれますが、画像のインライン化というテクニックについて紹介します!画像のインライン化は通信回数をへらすことでサイトの表示速度を向上させることができる可能性のあるテクニックです。早速いってみましょう。
画像のインライン化とは?
画像のインライン化は、画像を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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">
これをブラウザの検証ツールで確認すると...

インライン画像の設定方法
すべての画像をインライン化するわけにはいかないため、インライン化したい画像は指定せねばなりません。WordPressの場合はプラグインを利用することで設定できます。
もしくは自身で変換して直接サイトに埋め込むのもよいでしょう(本記事では直接変換しました)。例えばこの以下のサイトを利用すれば画像をBase64形式で変換してくれるため、ここで生成したコードを直接 img タグに埋め込みましょう。
https://lab.syncer.jp/Tool/Base64-encode/
さいごに
インライン画像化はいかがだったでしょうか。かなり面白いテクニックだったのではないでしょうか。個人的にこういう裏技的なテクニックは好物です。それでは次回の記事でお会いしましょう👋