アルパカログ

Webエンジニアでマネージャーな人がプログラミングやマネジメントの話題を中心に書いているブログです。

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

f:id:otoyo0122:20200725132644p:plain:w300

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

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

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

Data URIスキームを使った画像

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}"

以上です。参考になった方は、ぜひ「はてブ」やSNSでシェアしてくださいね。

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