Help us understand the problem. What is going on with this article?

ターミナルで画像をBase64化する方法(速度改善)

More than 5 years have passed since last update.

小さなアイコン類をテキストにすることで、
リクエスト本数を減らし、全体的な速度向上につなげることができます。

作り方

実はターミナル上で1行コマンドを打つだけ。

$ base64 icon.png
iVBORw0KGgoAAAANSUhEUgAAAB4AAA … AgCI= // Base64化された画像の文字列が出力される(凄く長い)

これだけ。超簡単。
変換サイトをよく見かけるけど、使わなくても実はできるというびっくり。
Macにはデフォルトで入ってました。

Base64化する前に、画像圧縮ソフトで圧縮してから変換すると、さらに小さくなります。

使い方

出力された文字列をこのまま貼っても使えません。

<img src="data:image/png;base64,(Base64化した文字列)">

()の代わりに出力された文字列をコピペ。
pngを適宜拡張子に合わせて書き換えます。
めんどくさいのでDashでスニペット登録しています。

つかいどき

Base64化することで却って重くなってしまうこともありますし、
文字列にすることで管理しづらくなることもあるので、使いどきは見定めないといけません。

うちのプロジェクトでは

  • 1KB未満である(アイコンなど)
  • webfontにしたけど1回しか使っていないもの
  • spriteには適さない(1個単体で使われる可能性が高い)
  • 変更が少ない(頻繁にアップデートがかかる場合は手間になってしまう)

という基準を設けています。

効率化のために

元画像も必ず保存しておく

何かのきっかけで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ファイルに書き出したりすることもできます。
デコードもできるそうです。

tokimari
フロントエンドエンジニア?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした