570

純粋に好奇心からですが、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...);
}
4

3 に答える 3

365

更新: 2017-01-10

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

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

データ URI は、次の Web ブラウザーでサポートされるようになりました。

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

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

于 2009-07-30T15:32:32.263 に答える
53

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

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

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

于 2013-10-03T06:18:50.217 に答える
13

Can I use ( http://caniuse.com/#feat=datauri ) は、主要なブラウザー全体でのサポートを示していますが、IE ではほとんど問題がありません。

于 2015-11-04T09:57:14.287 に答える