HTMLに画像データを埋め込む「Data URIスキーム」の使い方

HTMLで画像を表示したいときは<img>タグのsrc属性に画像のソースURLを指定するのが一般的です。

しかしData URIスキーム(Data URI scheme)*1 を使えば、src属性に画像そのもの（バイナリ）を埋め込むことができます。

• Data URI scheme - Wikipedia

このエントリでは、Data URIスキームを使ってimgタグのsrc属性に画像バイナリを埋め込む方法を、簡単なサンプルコードと共に説明します。

Data URIスキームを使った画像は、実際に見てもらった方が早いでしょう。

下の画像はData URIスキームを使って表示したものです。

ブラウザの機能でHTML要素を参照して<img>タグのsrc属性を見てみてください。

srcの値がURLではないことがわかるはずです。

Data URIスキームではsrcの値を次のようなフォーマットで指定します。

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

例えば今回の例（GIF画像）だと次のようになります。

src="data:image/gif;base64,xxx..."

とてもシンプルですね。

Data URIスキームで画像などのファイルを埋め込む特徴は、次のようなものがあります（抜粋）。

• URLを指定するのに比べてHTTPリクエストの回数を減らせる
• Data URIスキームによって埋め込まれた画像やファイルはキャッシュされない

このことからData URIスキームは、何度も表示する画像よりも、一度しか表示しない画像に向いていると言えそうです。

最後に、画像バイナリをBase64エンコードするRubyのサンプルコードを載せておきます。

require "base64"
bin = File.read("image.gif")
str = Base64.strict_encode64(bin) # Base64.encode64 では改行が挿入されるため
data_uri_scheme = "data:image/gif;base64,#{str}"

• Base64.#strict_decode64 (Ruby 2.7.0 リファレンスマニュアル)

以上です。

このエントリでは、Data URIスキームを使ってimgタグのsrc属性に画像バイナリを埋め込む方法を、簡単なサンプルコードと共に説明しました。

• 1:Data URLスキームと言うこともある