純粋に興味があるのですが、Base64による画像埋め込みはどのブラウザで動作しますか?私が参照しているのは、thisです。
ページサイズがかなり大きくなってしまうので、通常はあまり良い解決策ではないことは承知していますが、ちょっと気になっています。
**いくつかの例を挙げてみましょう。
HTML:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
更新日:2017-01-10)
データURIが主要ブラウザに対応しました。IEはバージョン8から画像の埋め込みにも対応しています。
http://caniuse.com/#feat=datauri
Data URIは以下のWebブラウザでサポートされています。
- Firefox、SeaMonkey、XeroBank、Camino、Fennec、K-Meleon などの Gecko ベースのブラウザ。 Konqueror (KDEのKIOスレーブ入出力システム経由) Opera (ニンテンドーDSiやWiiなどのデバイスを含む) WebKitはKonqueror'のKHTMLエンジンから派生したものですが、Mac OS XはKIOアーキテクチャを共有していないため、実装が異なります。
- Trident Internet Explorer 8: マイクロソフトは、セキュリティ上の理由から、データURIに埋め込まれたJavaScriptが、ウェブベースの電子メールクライアントで使用されているようなスクリプトフィルタによって解釈できない可能性があることなどから、サポートを特定の"non-navigable"コンテンツに限定しています。Version 8[3]では、データURIは32KiBよりも小さくなければなりません。
- Data URIは以下の要素・属性でのみサポートされています[4]。
- object (画像のみ)
- img
- input type=image
- link
- background-image、background、list-style-type、list-style など、URL を受け付ける CSS 宣言。
- Internet Explorer 9: Internet Explorer 9は32KiBの制限がなく、より広い範囲の要素を使用することができます。
- TheWorldブラウザ。TheWorld Browser: IE シェルブラウザで、Data URI スキームに対応しています。
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support
Chrome、Mozilla、Internet Explorerなどの最新のデスクトップブラウザは、データURLでエンコードされた画像に対応しています。しかし、一部のモバイルブラウザでは、データURLの表示に問題があります。Android Stock BrowserやDolphin Browserでは、埋め込まれたJPEGを表示できません。
オンラインでBase64エンコード/デコードを行うには、以下のツールを使用することをお勧めします。
Base64フォーマットへのエンコード](http://base64online.org/encode/)
Base64フォーマットからのデコード](http://base64online.org/decode/)
データURLとしてフォーマットする場合は、"Format as Data URL"オプションにチェックを入れます。