HTMLで画像を表示したいときは<img>
タグのsrc
属性に画像のソースURLを指定するのが一般的です。
しかしData URIスキーム(Data URI scheme)*1 を使えば、src
属性に画像そのもの(バイナリ)を埋め込むことができます。
このエントリでは、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スキームで画像などのファイルを埋め込む特徴は、次のようなものがあります(抜粋)。
このことから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}"
以上です。
このエントリでは、Data URIスキームを使ってimg
タグのsrc
属性に画像バイナリを埋め込む方法を、簡単なサンプルコードと共に説明しました。