1. tokimari

    Posted

    tokimari
Changes in title
+ターミナルで画像をBase64化して簡単に圧縮する方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,121 @@
+小さなアイコン類をテキストにすることで、
+リクエスト本数を減らし、全体的な速度向上につなげることができます。
+
+
+## 作り方
+
+実はターミナル上で1行コマンドを打つだけ。
+
+```zsh
+$ base64 icon.png
+iVBORw0KGgoAAAANSUhEUgAAAB4AAA … AgCI= // Base64化された画像の文字列が出力される(凄く長い)
+```
+
+これだけ。超簡単。
+変換サイトをよく見かけるけど、使わなくても実はできるというびっくり。
+Macにはデフォルトで入ってました。
+
+Base64化する前に、画像圧縮ソフトで圧縮してから変換すると、さらに小さくなります。
+
+
+
+## 使い方
+
+出力された文字列をこのまま貼っても使えません。
+
+```html
+<img src="data:image/png;base64,(Base64化した文字列)">
+```
+
+()の代わりに出力された文字列をコピペ。
+pngを適宜拡張子に合わせて書き換えます。
+めんどくさいのでDashでスニペット登録しています。
+
+
+## つかいどき
+
+Base64化することで却って重くなってしまうこともありますし、
+文字列にすることで管理しづらくなることもあるので、使いどきは見定めないといけません。
+
+うちのプロジェクトでは
+
+* 1KB未満である(アイコンなど)
+* webfontにしたけど1回しか使っていないもの
+* spriteには適さない(1個単体で使われる可能性が高い)
+* 変更が少ない(頻繁にアップデートがかかる場合は手間になってしまう)
+
+という基準を設けています。
+
+## 効率化のために
+
+### 元画像も必ず保存しておく
+
+何かのきっかけでBase64をやめたいこともあるので、必ず残しておきます。
+この画像なんだっけ?とか、どの画像をBase64化していたっけ?という記録用にもなります。
+
+うちではbase64ディレクトリを作っておき、そのディレクトリ内はデプロイしないようにしています。
+
+
+### Base64化したテキストの使い方
+意味のない文字列は、運用時にかなり邪魔になってしまいます。
+
+#### 1. CSSのクラスの背景に使う
+アイコンであれば余計なDOMがなくなって、むしろSEO的にも良い感じ。なきがする。
+
+```css
+.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;
+}
+```
+```html
+<h2><img src="icn.png">新着一覧</h2> // 画像
+<h2 class="icn-new">新着一覧</h2> // Base64化して背景に
+```
+
+#### 2. helperに登録しておく
+Railsではhelper、Handlebarsではpartialや自作helperなどを用いて、簡単に呼び出せるようにしておくと便利です。(他の言語にもそういうのありそう)
+
+Handlebars自作ヘルパーの例:
+
+```javascript: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, (文字列)';
+ });
+
+};
+
+```
+
+
+## その他
+
+```zsh: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ファイルに書き出したりすることもできます。
+デコードもできるそうです。