知らずにハマってしまったので備忘録として残しておきます。

画像を表示する方法

ぼくが知っているいつものやり方。

<img src="/img/hoge.jpeg" />

こういうやり方もできます。

<img src="data:image/jpeg;base64,Y2QgL3Zhci93d3cvZWNvcmFuZ2UvaHR〜" />
<!-- 途中省略してます -->

何をやってるかというと画像データをBase64変換して直接HTMLに埋め込んでいます。

Base64形式に変換するメリット

1つ目のやり方は画像を表示するためHTTPリクエストしますが、
文字列をHTMLやCSSに埋め込むことでリクエスト回数を減らすことができます。

画像をたくさん表示する場合に非常に有効です。

デメリットはないのか？

Base64変換するとサイズが30％ほど増えます。
リクエスト回数は減らせますが、大きい画像も変換すると逆効果になるかもしれません。
小さい画像（アイコンとか）だけBase64変換すると効果的でしょう。

何にハマったの？

順序がおかしい気がしますが、何にハマったか一応書いておきます。

ぼくが開発を引き継いだサイトである画像を表示してほしいと依頼がありました。
画像パスを取得する関数(PHP)は既にあったので、「じゃあ、この関数呼び出してテンプレートに書くだけじゃん」と思ってました。
でも、やってみると変な文字列しか返されず、「？？？」でしたがBase64変換して直接埋め込めることを知っていればそんな悩まず済んだ話しだったでしょう。

基本的にシステム部分のみ開発してますが、こういうのは知ってないとデザイナーと連携取れないんで知っておくべきですね。