画像をbase64エンコードする方法

Webページ作成で同じ細々とした画像(アイコンのような)を使い回すことも多いですよね。
タグを含むコードをコピペするのはいいんですけど、リソースもコピーしないといけないのは面倒です。
そういうときはbase64エンコードしてページに埋め込みましょう。

base64でリソースをエンコードしてページに埋め込み、後は勝手にブラウザがデコードして同じ見た目の画像になってくれます。
例えば、
】と【】は同じ画像ですが、右側はbase64エンコードしています。

そういった目的がある時以外にも、外部リソースを呼び出している場合ページのロード時間の短縮ができたり、いろいろとメリットが有るリソースのbase64化。(むしろそっちがメイン?)
まあコードが微妙に汚くなったり、大きいサイズのものは長くなりすぎるなどちょっとした問題はあるんですが、適切に扱えばかなり便利なテクニックです。
Web開発する人は知っておいて損はない知識ですね(^^)

それと肝心のリソースのbase64化する方法については私めの作成した『toBase64』とか、chromeを利用した方法(下記参考参照)とか、その他有志の方々が提供するWebサービスが数多く有りますよ~。

参考サイト:
ChromeのDevToolsで画像をbase64エンコードしちゃう方法

カテゴリー: Javascript, Web, 未分類 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です