小さなアイコン類をテキストにすることで、
リクエスト本数を減らし、全体的な速度向上につなげることができます。
作り方
実はターミナル上で１行コマンドを打つだけ。
$ base64 icon.png
iVBORw0KGgoAAAANSUhEUgAAAB4AAA … AgCI= // Base64化された画像の文字列が出力される（凄く長い）
これだけ。超簡単。
変換サイトをよく見かけるけど、使わなくても実はできるというびっくり。
Macにはデフォルトで入ってました。
Base64化する前に、画像圧縮ソフトで圧縮してから変換すると、さらに小さくなります。
使い方
出力された文字列をこのまま貼っても使えません。
<img src="data:image/png;base64,(Base64化した文字列)">
()の代わりに出力された文字列をコピペ。
pngを適宜拡張子に合わせて書き換えます。
めんどくさいのでDashでスニペット登録しています。
つかいどき
Base64化することで却って重くなってしまうこともありますし、
文字列にすることで管理しづらくなることもあるので、使いどきは見定めないといけません。
うちのプロジェクトでは
- 1KB未満である（アイコンなど）
- webfontにしたけど１回しか使っていないもの
- spriteには適さない（１個単体で使われる可能性が高い）
- 変更が少ない（頻繁にアップデートがかかる場合は手間になってしまう）
という基準を設けています。
効率化のために
元画像も必ず保存しておく
何かのきっかけでBase64をやめたいこともあるので、必ず残しておきます。
この画像なんだっけ？とか、どの画像をBase64化していたっけ？という記録用にもなります。
うちではbase64ディレクトリを作っておき、そのディレクトリ内はデプロイしないようにしています。
Base64化したテキストの使い方
意味のない文字列は、運用時にかなり邪魔になってしまいます。
1. CSSのクラスの背景に使う
アイコンであれば余計なDOMがなくなって、むしろSEO的にも良い感じ。なきがする。
.icn-new:before {
content: "";
background: url(data:image/png;base64,(Base64化した文字列)) center center no-repeat;
background-size: 15px 16px;
width: 15px;
height: 16px;
display: inline-block;
}
<h2><img src="icn.png">新着一覧</h2> // 画像
<h2 class="icn-new">新着一覧</h2> // Base64化して背景に
2. helperに登録しておく
Railsではhelper、Handlebarsではpartialや自作helperなどを用いて、簡単に呼び出せるようにしておくと便利です。（他の言語にもそういうのありそう）
Handlebars自作ヘルパーの例：
helper.js
module.exports.register = function (Handlebars, options) {
/**
* spacer.gifのBASE64パスを返す
* @return {String} BASE64 path for 'spacer.gif'
*
* ```
* {{spacer}}
* ```
*/
Handlebars.registerHelper('spacer', function() {
return 'data:image/gif;base64, (文字列)';
});
};
その他
helpを見てみる
$ base64 -h
Version DEBUG
Usage: base64 [-dhvD] [-b num] [-i in_file] [-o out_file]
-h, --help display this message
-v, --version display version info
-d, --debug enables additional output to stderr
-D, --decode decodes input
-b, --break break encoded string into num character lines
-i, --input input file (default: "-" for stdin)
-o, --output output file (default: "-" for stdout)
txtファイルに書き出したりすることもできます。
デコードもできるそうです。