Embedding Base64 Images

Question

Rein aus Neugier, der Browser nicht Base64 Bild in dem Einbetten der Arbeit? Was ich mich beziehe, ist dieser .

Ich weiß, es ist nicht in der Regel eine gute Lösung für die meisten Dinge, da sie die Seitengröße einiges 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 nun von allen gängigen Browsern unterstützt. IE unterstützt Bilder seit Version 8 als auch die Einbettung.

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

---

Daten URIs werden nun durch die folgenden Web-Browser unterstützt:

  

  
• Gecko-basierten, wie zum Beispiel Firefox, SeaMonkey, XeroBank, Camino, Fennec und K-Meleon
  
• Konqueror über KDE KIO-Slaves Input / Output System
  
• Opera (einschließlich Geräte wie der Nintendo DSi oder Wii)
  
• WebKit-basierten, wie zum Beispiel Safari (auch auf iOS), Android Browser, Epiphany und Midori (WebKit ist ein Derivat von Konquerors KHTML-Engine, aber Mac OS X die KIO Architektur nicht teilen, so dass die Implementierungen verschieden sind), als und Webkit / Chromium-basierte, wie Chrome
  
• Trident      
    
  • Internet Explorer 8: Microsoft hat seine Unterstützung für bestimmte „nicht befahrbar“ Inhalte aus Sicherheitsgründen beschränkt ist, einschließlich Bedenken, dass JavaScript in einem Datum eingebetteten URI nicht von Skript Filter wie die von Web-basierten E-Mail-Clients verwendet interpretierbar sein kann . Daten URIs muss kleiner sein als 32 KiB in Version 8 [3].
    
  • Daten URIs nur für die folgenden Elemente unterstützt werden und / oder Attribute [4]:      
      
    • Objekt (nur Bilder)
      
    • img
      
    • input type = image
      
    • link
      
    
  • CSS-Deklarationen, die eine URL, wie Hintergrund-Bild, Hintergrund, list-style-type, list-style und ähnliche.
  akzeptieren   
  • Internet Explorer. 9: Internet Explorer 9 nicht über 32KiB Einschränkung und in breiteren Elemente erlaubt
    
  • TheWorld Browser: Ein IE Shell Browser, der eine integrierte Unterstützung für Data URI-Schema hat
    
  

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

Answer 2

Die meisten modernen Desktop-Browsern wie Chrome, Mozilla und Internet Explorer unterstützen Bilder als Daten URL-kodiert. Aber es gibt Probleme Daten URLs in einigen mobilen Browsern angezeigt wird. Android Vektor Browser und Dolphin Browser wird nicht angezeigt eingebetteten JPEGs

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

• Encode zu Base64-Format

• Decode von Base64-Format

Überprüfen Sie die "Format als Daten URL" Option als Daten URL zu formatieren.

Answer 3

Kann ich ( http://caniuse.com/#feat=datauri ) zeigt Unterstützung für die gängigen Browser mit einige Probleme auf IE.