コレ以上どうやってページを軽量化しよう・・って時に検討したいのが画像のbase64化ですね。
いろいろツールもあるみたいですが、Macならターミナルでできちゃう。
コマンド
openssl base64 < path-to-file.png | tr -d '\n' | pbcopy
これでクリップボードにコピーされてるので、使いたいところでペタリするだけ。
コピーした時点ではただbase64エンコードしただけなので、
実際にDataURIとして使う場合には、
data:image/png;base64,{ここにコピーしたやつ}
のようにして使う。
使い所
個人的には使い所の難しい技術やなーと思ってます。
メリットは、リクエストが発生しないところ。
3Gみたいな環境では、なんとかしてリクエスト数は減らしたいところなので、なかなかに有用。
一般的に言われるデメリットは、
- 長ったらしいテキストを埋めることになるので、htmlの容量が増える可能性がある
- デコードするコストがかかる
- ファイル管理・更新が煩雑
アイコンみたいな画像はスプライトにすれば良いし・・となると、
スプライトに載せるにしては汎用性の低い内容で、そこまで容量が大きくない画像・・ということになりますね。
というわけで、使い所を見極めつつ、表示速度を優先したいページでは前向きに使っていきたいなーと。