console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

画像をbase64エンコードして、DataURI化するコマンド

コレ以上どうやってページを軽量化しよう・・って時に検討したいのが画像のbase64化ですね。
いろいろツールもあるみたいですが、Macならターミナルでできちゃう。

コマンド

openssl base64 < path-to-file.png | tr -d '\n' | pbcopy

これでクリップボードにコピーされてるので、使いたいところでペタリするだけ。

コピーした時点ではただbase64エンコードしただけなので、
実際にDataURIとして使う場合には、
data:image/png;base64,{ここにコピーしたやつ}
のようにして使う。

使い所

個人的には使い所の難しい技術やなーと思ってます。

メリットは、リクエストが発生しないところ。
3Gみたいな環境では、なんとかしてリクエスト数は減らしたいところなので、なかなかに有用。

一般的に言われるデメリットは、

  • 長ったらしいテキストを埋めることになるので、htmlの容量が増える可能性がある
  • デコードするコストがかかる
  • ファイル管理・更新が煩雑

アイコンみたいな画像はスプライトにすれば良いし・・となると、
スプライトに載せるにしては汎用性の低い内容で、そこまで容量が大きくない画像・・ということになりますね。


というわけで、使い所を見極めつつ、表示速度を優先したいページでは前向きに使っていきたいなーと。