画像をBase64でHTMLファイルに直接埋め込む方法


Base64 インラインイメージ

画像をBase64にエンコード(変換)して直接HTMLファイルに埋め込む方法をメモしておきます。

Webサイトの高速化技術のひとつとして、HTTPリクエスト数を減らす目的で用いられることもあるインラインイメージ。今回は外部に画像ファイルを置けないという特殊な都合で使用したのですが、変換の方法と書式について調べましたので、今後のためにメモしておきます。

書き方(書式)

普通に画像を配置する場合は以下のように記述しますが、

それを次のようにするだけです。

「xxxxx…」はBase64化されたデータの文字列を示しています。
上記の例はPNG画像の場合ですが、JPEGを埋め込む場合は「data:image/png」の部分を「data:image/jpeg」としてください。

Base64への変換

Macの場合はデスクトップにエンコードしたい画像を保存し、「ターミナル」で以下のコマンドを実行すればOKです(hoge.pngは任意のファイル名)。かなり長い文字列が生成されるはずですので、まるまるコピーします。

とはいえ、個人的にはコマンドラインに少々拒絶感があるのでさらに調べてみると、ChromeのDeveloper Toolsを使ってカンタンにエンコードできることがわかりました。
手順は以下の通りです。

ChromeでBase64へ変換したい画像を開きます。

Developer Toolsを開き(Cmd(Ctrl)+Option(Shift)+i)、Resourcesパネルの左のツリーから当該画像ファイルを選択。

そのままChromeのウィンドウへドラッグ&ドロップ。

すると、アドレスバーにBase64化されたものが表示されるので、まるっとコピーするだけです。カンタンですね!

さらに詳しくは「ChromeのDevToolsで画像をbase64エンコードしちゃう方法」をご覧ください。

なお、実機確認では、Windows IE8〜、Chrome・Firefoxの最新版、Mac Safari・Chrome・Firefoxの各最新版で問題なく表示できました。

気をつけたい点

  • IE7以下は非対応
  • IE8では32KBの容量制限がある
  • ファイルサイズが肥大するので大きい画像は避ける

1つめはもはや無視してもよいと思います。2つ目については3つ目の理由からあまり問題になることはないかもしれません。
ちなみに、今回試してみた画像ではもともと10.5KBのJPEGが14.1KBに。Base64に変換すると30〜35%程度ファイルサイズが増加してしまうようですので、時と場合に応じて使い分けることが大切ですね。