Base64-Bilder einbetten

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

Mir ist klar, dass es für die meisten Dinge keine gute Lösung 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...);
}
dda
Bearbeitete Frage 10. Januar 2018 в 4:40
Programmierung
html browser base64
30. Juli 2009 в 3:01
17 Aufrufe
Lösung

Aktualisierung: 2017-01-10

Daten-URIs werden nun von allen gängigen 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 KDE's KIO-Slaves Eingabe/Ausgabe-System Opera (einschließlich Geräten wie dem Nintendo DSi oder der Wii) WebKit-basiert, wie Safari (auch auf iOS), Android-Browser, Epiphany und Midori (WebKit ist ein Derivat von Konqueror's KHTML-Engine, aber Mac OS X teilt nicht die KIO-Architektur, so dass die Implementierungen unterschiedlich sind), sowie Webkit/Chromium-basiert, wie Chrome
    • Trident Internet Explorer 8: Microsoft hat seine Unterstützung aus Sicherheitsgründen auf bestimmte nicht navigierbare Inhalte beschränkt. Dazu gehören Bedenken, 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]:
  • object (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.
  • TheWorld Browser: Ein IE-Shell-Browser, der eine eingebaute Unterstützung für das Daten-URI-Schema hat

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

Philippe Gerber
Bearbeitete Antwort 9. Januar 2017 в 11:13
Kommentare (4)

Die meisten modernen Desktop-Browser wie Chrome, Mozilla und Internet Explorer unterstützen als Daten-URL kodierte Bilder. Allerdings gibt es Probleme bei der Anzeige von Daten-URLs in einigen mobilen Browsern: Android Stock Browser und Dolphin Browser können eingebettete JPEGs nicht anzeigen.

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

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

CodeCaster
Bearbeitete Antwort 13. Oktober 2016 в 2:04
Kommentare (1)

Kann ich verwenden (http://caniuse.com/#feat=datauri) zeigt Unterstützung für die wichtigsten Browser mit wenigen Problemen auf IE.

Kommentare (0)