プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
画像をHTMLファイルに埋め込む(Data URI Scheme)。
PHP経由で画像ファイルを表示する」の記事の中で

//エラー画像表示
header('Content-Type: image/png');

//readfile('img/err.png');
print base64_decode('iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIZSURBVHhe7dsxcptAGIbhn5wFucjkBMsJZPdp0+FSaty5TJcGSrtLmz7yCcwJMiki7rJZdjcxtjR4zIdUJO8zwxix8o55xUIjFz4wzPYu/8RMBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERA0ckC9m1lRVGMtsraPg9ab22VjlfDwYfr9J6qDSNTY/m3D+Yu7PohD0avz7GY4Ruqy9r7xtnwrdcjm/PNfuI9rgkjU2Pe7+ojY3lzafJgeo4lLR9wV+c/uPa7fGh8QukkX74emxjbN97Fuc3XT5OHwy4eO/YBHc6/rMWXcP/rR967t8u/S2xl2y4d7X7u084M/fdvFqdxjd2s46Go3NxaHfc6E6af5XQPkXCS4bMfrvDn293ozP8BiwcsLz6knW5rn56eGtFw839+s3+b8uqjhSUc5/4ymqdvP4frfeDs/SrunM3yV+D6xsL9J+q2q7yE07b6s47nKjd2m9aq3V8ezuuar7Yp4+7ZnGAJl7Z59BZu7Pn1yIt71xzru+Nzh4eKPZ67XsA/2ohO9xD5TxBQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQYvYbxldXOMXATVUAAAAASUVORK5CYII=');

というコードを書いたのですが、そのときに「Data URI Scheme」関連のお勉強をしました。
せっかくなので、忘れる前にメモっておくことにします。

それでは本題(--)b

なんと!

HTMLファイルの中に直接画像を埋め込めるんですってさ。

例えばHTML内にこんなタグを埋め込むとφ(--)

<img src="data:image/png;base64,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">

こんな風に見えますφ(--)



そうです。
HTMLファイル内に書いたあれやこれやが画像になっちゃうのです。
書き方は、画像ファイルを指定する部分に

data:【画像のContent-Type】;base64,【base64エンコードした画像ファイルの中身】

形式で書きます。

<img src="data:image/png;base64,うんちゃらかんちゃら">

みたいな指定ね。
今回はimgタグに埋めましたが「data:~」の部分はCSSの背景画像としても指定できますよ。

仕組みとしては、ブラウザさんが文字列から画像ファイルを復元しているのでしょう。
「image/png」の部分で「元々はこんな形式のファイルでした~」というのが分かって
「base64」で「どんなルールで文字列に変換してます~」が分かるので、
それを逆に辿って「うんちゃらかんちゃら」から画像を復元しているのだと思います。
実際に中身を解析したわけではないので推測ですけどね。

ちなみにContent-Typeは、画像ファイルの種類によって微妙に変わります。
実は指定が間違っていても表示されたりしますが、一応、画像の種類から判断して指定してください。
主要な画像ファイルのContent-Typeはこんな感じねφ(--)

png:image/png
jpg,jpeg:image/jpeg
gif:image/gif

あとは画像ファイルをbase64エンコードした画像ファイルの中身を用意すれば、
HTMLファイルの中に直接画像を埋め込むことができます。

ばんざーい\(--)/

でも、どうやって?

どうやってbase64エンコードするの?

そうですね。そこは大事なところです。

PHPを例に挙げると、画像を読み込んで「base64_encode()」関数をかませばエンコードできます。
例えばこんなコードですねφ(--)

$img = base64_encode(file_get_contents('img/hoge.png'));

これで画像ファイルの中身をbase64エンコードしたものが取得できます。
あとは変数「$img」の中身を

<img src="data:image/png;base64,うんちゃらかんちゃら">

の「うんちゃらかんちゃら」の部分に指定あげればOKです。

自分でプログラムを組めない人はしょんぼりしちゃいますかね?
指定した画像をbase64エンコードしてくれるCGIを用意したので
使いたかったら使ってやってくださいφ(--)

画像のData URI Scheme化

これで画像をHTMLファイルの中に埋め込むことができるようになりました。

例えばこんな感じのHTMLファイルを用意するとφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>

お散歩中です。<br>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPsAAACHCAYAAADQki8cAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAdkSURBVHhe7dzLaxVXHMDxE00MUYnXaIgvTEDo0rhy2SjY7iou6rJFsHVVIdIuGxTbpaWLdlcp0m4EN9Zlu9BIF4KL2scfkEiMEVFvQlRiNDa/kzlx7jj3Zh5nZhJ/3w9ccl8zedz7nTOvm7bXiwyAd9664CuAdxyxA0oQO6AEsQNKEDugBLEDShA7oASxA0oQO6AEsQNKEDugBLEDShA7oASxA0oQO6AEsQNKEDugBLEDShA7oASxA0oQO6AEsQNKEDugBLEDShA7oASxA0oQO6AEsQNKEDugBLEDShA7oASxA0q0vV4UXAfgSb1eN3fu3DE3btywtwcGBsyBAwfspSrEDuQUDlu+ymV8fDx49G1DQ0PL4Ze5ACB2IIW0YSdVxgKA2IEmigo7Kd8LAGIHFlUddlJ5FgDEDvUk7KtXry6HPj09HTyy+gwODjaEfujQoeCRlRE7EDE2NmbjP3PmjNmyZYu9r4oFQJ6w4xA7EENG+cOHD9vVZrkuCwC3el/EGoDvsOMQOxBjdHTUBieX69evB/c2yroAKCPsOMQOxEgSuzwWjlYu0QWACJ9QI9NEn3Ps2DEzPDxsn1skYgdiJIm9ra0tuPZGdG95rVZrCFu+Rkf/c+fOmbNnzwa3ikPsQIyssWcxMjJszp//PrhVHGIHYrSKfWFh2ty6dcRcvvxXcI8xmzZ9ZDo7B4NbK6vXf7DzEQcPtpmjR3823d2f2NtFIXYgRqvYHz78ysbqbN9+wWzdejq4lcz8/JiZnDxuXrz4x95et65m+vtvm/b2vfZ2EfiIK5DC8+c3G0Kv1b5IHbro6Bgwe/b8sRj50nH8hYW6mZo6aa8XhdiBFMKhd3W9b3p7vwtupbd+fc3s3HkluLW0IJFLUYgdSOjly7tmdvZacMuYnp6vg2vZbdw4ZBcazszMr8E1/9hmB0Lkwy+XLl2yx8LlqxwjP3HihN12Hxz8d3F7/Uv7vA0b9tuRuRXZ4dbd/amdZm5uads8zvz8+OKCZOlDN7Ltvm/fA3vdN2IHQtyOuSg5Fn7q1H/LI7uM6o8ff2uvNyPP2bZtxExMfLDi6rlsu7u983v33jadnfvtdZ+IHQhpFfvJk38uR7t79+/2aysy8re399tR+9WrenBvPFlwuHnLjrvwqr0vbLMDGcn2drOLHHOfmvrM3L17cMXnysXtlReyWl8EYgc8k1FcVt0l+FrttL0+M/NL8Gh1iB3wKBz6jh0X7TH4vr6L9kScR4++CZ71Nre9Ljo6+oNrfhE7ECIfZJHdWNGLfFAlvPc9bu96NHRn8+ajdjtcdu5NTn4cu/0+N/d3cE121rXey58VO+iAhOr1HxsOvcnprY4LXU5/bbZzTZ4jj8u0u3ZdsWfRiWfPRs29ex/a60UeemNkBxKSEdqRaMOjsexxd8fK3Zlw0Ys7D16eF15tD59IE/4evjGyAynI6C3hChnBZfXccaO7kPujJ93I3vmnT6/Zx9wn5MKjuijqsJtgZAdSkJNkHIn+yZM358pL3LJqLyGPjb3XMPLHhS4LhwcPPrfXhUReVOiCkR1I6f794w3nyPf1/WRPiw2TQ22yB76398Li6H0zNnS3je8UdeacQ+xASrK9LaGGR275qGtPz0jDqrusosuCQURX3WVEd9v4Qg7P8c8rgFVIPgE3MXGk4Ww3OQtOTqKRaN2edvknFbJwkNBlbUA+Iuu2+R2ZRtYAikbsQEZxI7wj58SHT46JBu6UMaI7xA7kJB9ikR118t9mkpIdcfKPL4rcRo8idsADGeXlePns7G9NR3EZ6bu6huxIXuRe92aIHShQ+N9NV50ax9mBgvj6v/K+EDtQkqrjJ3agRBJ8VdETO+BZkqCrCJ7YAY/SRFx28OyNBzzIG24ZGTKyAzlI5ElDl6CbRV3GKE/sQEZZA60qeGIHMlgpzJVWy8tYbY8idiClVqG3WlWPKjt4dtABGUSDj8soyXPKROxAQVZb7KzGA0oQO6AEsQNKEDugBLEDnsmOubjDc3H3lYnYAY+qDroVL4fe3C/IUTxolTbyKlrJPbKHf8kil2oyb1/z9zEvnz8P1ib3Hlgr74M1sRof/mPm/cP6mJfvnyfvPFC+JK+ZjN7uElXFa5479vAvUsWqyVoWfsHzvvgyfZ555J0+yvf8VpOVfq9mgUeV/ffxMrIn/eWyCs877/fxMS+fP48P4TdNljdQ3umjfMxPpks7bZZpwpJO3+w1l/tbPVY1zo2vmHtz5XkZom/QtPPKO31UFT/PavsbNFPW94nDobeKyYud9wUPT59lXnmnj/I9v3dJlX8PRnasSm4ETPP2zDJNWN7pVztiB5RgNR5QgtgBJYgdUILYASWIHVCC2AEliB1QgtgBJYgdUILYASWIHVCC2AEliB1QgtgBJYgdUILYASWIHVCC2AEliB1QgtgBJYgdUILYASWIHVCC2AEliB1QgtgBJYgdUILYASWIHVCC2AEliB1QgtgBJYgdUILYASWIHVCC2AEliB1QgtgBJYgdUILYARWM+R9QecO0mMJbLgAAAABJRU5ErkJggg=="><br>
てくてく
</body>
</html>

こんな感じの見た目になりますφ(--)

お散歩中です。



てくてく

すっげー!Σ( ̄◇ ̄;
こりゃー便利だ。

ただし、使用する際には注意点もあります。

まず、IE7以前では表示されません
IE8では32KBまでしか表示されません
IEの古いバージョンを考慮する必要がある人はご注意ください。

また、画像サイズが大きくなるほど、エンコードされた文字列も長くなります。
画像サイズが2KBだとこの程度ですがφ(--)

<img src="data:image/png;base64,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">

画像サイズが10KBだとこんなんなりますφ(--)

<img src="data:image/png;base64,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">

結構違いますよね?
これが100KBとかになると、さらに長くなります。
コードの可読性なんかも考慮すると、あまり大きいサイズの画像は止めておいた方が良いと思います。

個人的には、選択肢の一つとして考慮しつつも必要以上にこだわらなくてもいいかなーと考えています。
当たり前ですが、メリットもあればデメリットもありますしね。
使えるところでは使う、使えないところでは使わない、それで良いんじゃないでしょうか。

最後に「PHP経由で画像ファイルを表示する」の記事の中で触れた

//エラー画像表示
header('Content-Type: image/png');

//readfile('img/err.png');
print base64_decode('iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIZSURBVHhe7dsxcptAGIbhn5wFucjkBMsJZPdp0+FSaty5TJcGSrtLmz7yCcwJMiki7rJZdjcxtjR4zIdUJO8zwxix8o55xUIjFz4wzPYu/8RMBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERAEQFFBBQRUERA0ckC9m1lRVGMtsraPg9ab22VjlfDwYfr9J6qDSNTY/m3D+Yu7PohD0avz7GY4Ruqy9r7xtnwrdcjm/PNfuI9rgkjU2Pe7+ojY3lzafJgeo4lLR9wV+c/uPa7fGh8QukkX74emxjbN97Fuc3XT5OHwy4eO/YBHc6/rMWXcP/rR967t8u/S2xl2y4d7X7u084M/fdvFqdxjd2s46Go3NxaHfc6E6af5XQPkXCS4bMfrvDn293ozP8BiwcsLz6knW5rn56eGtFw839+s3+b8uqjhSUc5/4ymqdvP4frfeDs/SrunM3yV+D6xsL9J+q2q7yE07b6s47nKjd2m9aq3V8ezuuar7Yp4+7ZnGAJl7Z59BZu7Pn1yIt71xzru+Nzh4eKPZ67XsA/2ohO9xD5TxBQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQREARAUUEFBFQYvYbxldXOMXATVUAAAAASUVORK5CYII=');

について補足しておきますね。

これは画像の中身をbase64エンコードした文字列をあらかじめ生成して、PHPのコードに埋めています。
実際に出力するときには「base64_decode()」関数でデコードしてから出力しているので、
呼出元には元の画像ファイルが返るってな理屈です。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事