HTMLへ画像を埋め込む際の課題
HTMLへ画像を埋め込む際、これまではPNG画像であればbackground-image: url("../images/hoge.png");のように指定していましたが、このようなURL指定方式の場合、CSSロード完了後に、サーバに対して対象のファイル取得要求を発行し、サーバ上でファイルをReadし、ブラウザへ応答を返して初めて描画が開始される、とコストがかかります。
Base64 encode形式のメリット
そこで、画像ファイルをBase64文字列に変換(encode)し、background-image: url(data:image/png;base64,<encode後文字列>);とすることで、CSSロード完了時には既に手元に画像データがそろっており、ブラウザ内部にて<encode後の文字列>を画像に変換し、描画することにより、サイトの描画速度を向上させたり、サイト全体の通信量を低減したりすることができます。
本エントリのフォーカス
今回は、自分の備忘録も兼ねまして、下記についてまとめておこうと思います。何かのご参考になれば幸いです。
- PNG画像からBase64文字列を生成する方法
- Base64文字列を埋め込んで表示する方法
PNG画像からBase64文字列を生成する
変換方法は、手元のLinuxでPythonスクリプトを実行する方法もありますが、Linux環境が無い方もいらっしゃると思いますので、今回はOnlineでPNG画像をBase64文字列へ変換してくれるサイトを利用してみました。
今回利用させていただきましたサイト
下記のような操作画面になります。
- Encodeを選択
- 「ファイルを選択」からPC上にある変換したいPNG画像を選択する
- 「Convert the Source data」をクリックする
- 上部のEndode結果表示テキストボックスに大量のメッセージが表示されます。
- テキストエディタにコピーして、改行をすべて削除すればBase64文字列形式の画像の完成です。
[例] 自作のQiitaアイコン(40px*40px)を変換してみました。
出力されるテキストメッセージ
長すぎるので途中を省略しますが、以下のような出力が得られます。
iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAK
TWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQ
...
hTyH2pN7Tz249YFHXpu+9ukkPzsc7vOOOuJFwOOVVr99U0t830PovntQSrLCaQdcA56XuQ2SzWwM
5XkcftPW1fbJuVKlX5fonjHH1dEHgadSeTkXqBpgWtYBb6YK8CMgjQU/s4MZ4wCwGFgKTAWuAa5M
/QVRChR2I+HUXxH1wFZgE7AZaB9osf1/AHFAmooC5VykAAAAAElFTkSuQmCC
実際に張り付けてみましょう
CSSのbackground-imageを利用します。
CSSの作成
生成した文字列の先頭に .base64-icon.qiita { background-image: url(data:image/png;base64,を、文字列の後方に); }を付けて、CSS形式とします。上記の例で変換した文字列をCSS形式にすると、画像サイズをwidth, heightで指定しinline-block属性で生成した空の箱に、background-imageを張り付ける、という意味で、以下のようなCSSとなります（encodeされた文字列は長すぎるので途中を省略します）。
.base64-icon {
display: inline-block;
}
.base64-icon.qiita {
width: 40px;
height: 40px;
background-image: url(data:image/png;base64,iVBORw0KGgoA...AElFTkSuQmCC);
}
埋め込み先のHTML
そして、実際に埋め込む箇所のHTMLは以下のようにclassに.base64-icon.qiitaを付けてあげればOKです
<i class="base64-icon qiita"></i>
補足
i 要素は、代替音声や気分など、質が異なるテキストだと示す形で、一般の散文から区別されるテキストの範囲を表します。
以上です。私のサイトでは<footer>のアイコンに利用しております。
それでは、良いBase64 Lifeを！