web-dev-qa-db-ja.com

Base64画像を埋め込む

好奇心から純粋に、どのブラウザでBase64画像埋め込みが機能しますか？私が言及しているのは これ です。

私はそれがページサイズをかなり大きくするので、通常それがほとんどの事のための良い解決策ではないことを認識します - 私はただ興味があります。

いくつかの例：

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...);
}
htmlbase64browser
545
S Pangborn

更新：2017-01-10

データURIは現在、すべての主要ブラウザでサポートされています。 IEは、バージョン8以降の画像の埋め込みもサポートしています。

http://caniuse.com/#feat=datauri

データURIは現在、以下のWebブラウザでサポートされています。

  • Firefox、SeaMonkey、XeroBank、Camino、Fennec、K-MeleonなどのGeckoベース
  • KDEのKIOスレーブ入出力システムによるKonqueror
  • オペラ（ニンテンドーDSiやWiiなどのデバイスを含む）
  • Safari（iOSを含む）、Androidのブラウザ、Epiphany、MidoriなどのWebKitベース（WebKitはKonquerorのKHTMLエンジンの派生物ですが、Mac OS XはKIOアーキテクチャを共有していないため、実装が異なります）、およびWebkit /クロムベース、Chromeなど
  • トライデント
    • Internet Explorer 8：マイクロソフトは、セキュリティ上の理由から、Webベースの電子メールクライアントで使用されるようなスクリプトフィルタではJavaScriptが解釈できない可能性があるという懸念を含む、特定の「ナビゲート不可」コンテンツへのサポートを制限しています。バージョン8 [3]では、データURIは32 KiBより小さくなければなりません。
    • データURIは、次の要素や属性に対してのみサポートされています[4]：
      • オブジェクト（画像のみ）
      • img
      • 入力タイプ=画像
      • リンク
    • Background-image、background、list-style-type、list-styleなどのURLを受け入れるCSS宣言。
    • Internet Explorer 9：Internet Explorer 9には32KiBの制限はなく、より幅広い要素で使用できます。
    • TheWorld Browser：データURIスキームをサポートしているIE Shellブラウザ

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

352
Philippe Gerber

Chrome、Mozilla、Internet Explorerなど、最近のほとんどのデスクトップブラウザは、データURLとしてエンコードされた画像をサポートしています。しかし、一部の携帯ブラウザではデータURLの表示に問題があります。AndroidStock BrowserとDolphin Browserは 埋め込まれたJPEGを表示しません .

オンラインbase64エンコード/デコードには、以下のツールを使用することをお勧めします。

データURLとしてフォーマットするには、[データURLとしてフォーマット]オプションをオンにします。

51
Brig Ader

私は使用できますか（ http://caniuse.com/#feat=datauri ）は、IEではほとんど問題ありませんが、主要なブラウザでサポートされています。

13
kehers