Base64イメージの埋め込み

StackOverflow https://stackoverflow.com/questions/1207190

  •  05-07-2019
  •  | 
  •  

質問

純粋に好奇心から、どのブラウザーで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...);
}
役に立ちましたか？

解決

更新：2017-01-10

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

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

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

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

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

他のヒント

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

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

「データURLとしてフォーマット」をチェックしてください;データURLとしてフォーマットするオプション。

使用できますか（ http://caniuse.com/#feat=datauri ）は、主要なブラウザでのサポートを示しています。 IEのいくつかの問題。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top