Einbetten von Base64-Bildern

564

In welchen Browsern funktioniert das Einbetten von Base64-Bildern aus Neugier? Was ich mich beziehe, ist dies .

Mir ist klar, dass es für die meisten Dinge normalerweise 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...);
}
html base64 browser S Pangborn
quelle
3
Warum nicht eine Seite mit Beispielen einrichten
?
4
64 Bit benötigt nur 6 Zeichen 2 ^ 6. Eine Textzeichenfolge enthält je nach Codierungstyp mindestens 8 Bit pro Zeichen. Sie verlieren mindestens 25% Wirkungsgrad .... mein Schnelltest ergab etwa 30% Verlust.
4
Noch wichtiger ist, dass Sie wahrscheinlich die Fähigkeit verlieren, Ihre Inhalte effektiv zwischenzuspeichern.
Hut8
6
@ BrianHaak "enorm" sagt nichts. Ich persönlich habe in den letzten Jahren mehrmals base64-Bilder mit ReactJs verwendet und hatte überhaupt keine Renderprobleme. Bitte geben Sie einige Messungen an.
Lukas Liesis
1
@LukasLiesis Ich habe Messungen in Google Chrome für kommerzielle Zwecke durchgeführt, daher hier keine öffentlichen Berichte. Es mag in Ordnung sein, eindeutige Bilder zu rendern, aber Sie müssen berücksichtigen, dass das Caching überhaupt nicht funktioniert. In React.js ist es sehr wichtig, wenn Teile vollständig neu gerendert werden (z. B. bei Navigationsänderungen).
Brian Haak

Antworten:

361

Update: 2017-01-10

Daten-URIs werden jetzt von allen gängigen Browsern unterstützt. IE unterstützt das Einbetten von Bildern seit Version 8.

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

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

  • Geckobasiert wie Firefox, SeaMonkey, XeroBank, Camino, Fennec und K-Meleon
  • Konqueror über das KIO-Slave-Ein- / Ausgabesystem von KDE
  • Opera (einschließlich Geräte wie Nintendo DSi oder Wii)
  • WebKit-basiert wie Safari (einschließlich iOS), Android-Browser, Epiphany und Midori (WebKit ist eine Ableitung der KHTML-Engine von Konqueror, Mac OS X teilt jedoch nicht die KIO-Architektur, sodass die Implementierungen unterschiedlich sind) sowie Webkit / Chrombasiert wie Chrome
  • Dreizack
    • Internet Explorer 8: Microsoft hat seine Unterstützung aus Sicherheitsgründen auf bestimmte "nicht navigierbare" Inhalte beschränkt, einschließlich Bedenken, dass in einen Daten-URI eingebettetes JavaScript möglicherweise nicht durch Skriptfilter interpretiert werden kann, wie sie beispielsweise von webbasierten E-Mail-Clients verwendet werden. 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
      • Eingabetyp = Bild
      • Verknüpfung
    • CSS-Deklarationen, die eine URL akzeptieren, z. B. Hintergrundbild, Hintergrund, Listenstil, Listenstil und ähnliches.
    • Internet Explorer 9: Internet Explorer 9 hat keine 32-KB-Beschränkung und ist in breiteren Elementen zulässig.
    • TheWorld Browser: Ein IE-Shell-Browser, der das Daten-URI-Schema integriert unterstützt

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

Philippe Gerber
quelle
Hallo Philippe, gibt es eine Problemumgehung für die 32-KB-Größenbeschränkung in IE8? Wird base64 in IE7 und IE6 unterstützt? Wenn nein, irgendwelche Problemumgehungen (ohne Größenbeschränkung)? Wenn ja, eine Größenbeschränkung? Wenn ja, Problemumgehungen?
SexyBeast
Schauen Sie sich das an, vielleicht würde es helfen: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Sagen die Standards etwas? Bestimmte Upvote für gute Antwort Update =).
Ciro Santilli 31 冠状 病 六四 事件 31
5
IE8-Einschränkung - Ich habe festgestellt, dass IE8 eine maximale Zeichenbeschränkung für eingebettete Bilder von 32.768 ( pro Microsoft ) hat und mein eingebettetes Bild etwas mehr als 35.000 hat. Wenn also die background-imageCSS-Eigenschaft ( url(...embedded image) versuchte, in IE8 zu laden, weil die Zeichenbeschränkung überschritten wurde, classwurde nicht die gesamte Eigenschaft geladen, die die Eigenschaft enthielt. Ich habe keine Korrektur für dieses Problem vorgenommen, sondern bin zu imgeingebetteten Bildern zurückgekehrt, die das Maximum überschritten haben, und meine Bilder wurden entsprechend geladen.
id.ot
53

Die meisten modernen Desktop-Browser wie Chrome, Mozilla und Internet Explorer unterstützen Bilder, die als Daten-URL codiert sind. Es gibt jedoch Probleme beim Anzeigen von Daten-URLs in einigen mobilen Browsern: Android Stock Browser und Dolphin Browser zeigen keine eingebetteten JPEGs an .

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

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

Brig Ader
quelle
3
Sie benötigen kein Online-Tool, um in base64 zu codieren. Stattdessen können Sie das Befehlszeilentool base64 unter Linux oder Mac OS X verwenden: echo "data: image / jpeg; base64", $ (cat file.jpg | base64)
cstroe