Base64-Bilder einbetten

Question

Nur aus reiner Neugier: In welchen Browsern funktioniert das Einbetten von Base64-Bildern? Worauf ich mich beziehe, ist este .

Mir ist klar, dass dies in der Regel keine gute Lösung für die meisten Dinge ist, da es die Seitengröße ziemlich erhöht - ich bin nur neugierig.

Einige Beispiele:

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...);
}

Answer 1

Update: 2017-01-10

Daten-URIs werden jetzt von allen wichtigen Browsern unterstützt. Der IE unterstützt seit Version 8 auch das Einbetten von Bildern.

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

---

Daten-URIs werden jetzt von den folgenden Webbrowsern unterstützt:

• Gecko-basiert, wie Firefox, SeaMonkey, XeroBank, Camino, Fennec und K-Meleon
• Konqueror, über das KIO-Slave-Ein-/Ausgabesystem von KDE
• Opera (einschließlich Geräten wie dem Nintendo DSi oder der Wii)
• WebKit-basiert, wie Safari (auch unter iOS), der Android-Browser, Epiphany und Midori (WebKit ist ein Derivat der KHTML-Engine von Konqueror, aber Mac OS X nutzt nicht die KIO-Architektur, so dass die Implementierungen unterschiedlich sind), sowie Webkit/Chromium-basiert, wie Chrome
• Dreizack
  • Internet Explorer 8: Microsoft hat die Unterstützung aus Sicherheitsgründen auf bestimmte "nicht navigierbare" Inhalte beschränkt, u. a. weil Bedenken bestehen, dass in einen Daten-URI eingebettetes JavaScript von Skriptfiltern, wie sie von webbasierten E-Mail-Clients verwendet werden, nicht interpretiert werden kann. Daten-URIs müssen in Version 8[3] kleiner als 32 KiB sein.
  • Daten-URIs werden nur für die folgenden Elemente und/oder Attribute unterstützt[4]:
    • Objekt (nur Bilder)
    • img
    • input type=image
    • Link
  • CSS-Deklarationen, die eine URL akzeptieren, wie background-image, background, list-style-type, list-style und ähnliche.
  • Internet Explorer 9: Internet Explorer 9 hat keine 32KiB Beschränkung und erlaubt breitere Elemente.
  • DerWelt-Browser: Ein IE-Shell-Browser mit eingebauter Unterstützung für das Daten-URI-Schema

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

Answer 2

Die meisten modernen Desktop-Browser wie Chrome, Mozilla und Internet Explorer unterstützen Bilder, die als Daten-URL kodiert sind. Allerdings gibt es Probleme bei der Anzeige von Daten-URLs in einigen mobilen Browsern: Android Stock Browser und Dolphin Browser zeigen sie nicht an. eingebettete JPEGs .

Ich empfehle Ihnen, die folgenden Tools für die Online-Base64-Kodierung/Dekodierung zu verwenden:

• Kodierung im Base64-Format

• Dekodierung aus dem Base64-Format

Aktivieren Sie die Option "Als Daten-URL formatieren", um als Daten-URL zu formatieren.

Answer 3

Kann ich ( http://caniuse.com/#feat=datauri ) zeigt, dass alle wichtigen Browser unterstützt werden, mit wenigen Problemen beim IE.