Incorporamento di immagini Base64

Question

Puramente per curiosità, in quali browser funziona l'incorporamento di immagini Base64? Ciò a cui mi riferisco è questo .

Mi rendo conto che di solito non è una buona soluzione per la maggior parte delle cose, poiché aumenta un po 'le dimensioni della pagina - sono solo curioso.

Alcuni esempi:

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

Aggiornamento: 10/01/2017

Gli URI dei dati sono ora supportati da tutti i principali browser. IE supporta anche l'incorporamento di immagini dalla versione 8.

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

---

Gli URI dei dati sono ora supportati dai seguenti browser Web:

  

  
• Basato su Gecko, come Firefox, SeaMonkey, XeroBank, Camino, Fennec e K-Meleon
  
• Konqueror, tramite il sistema di input / output degli slave KIO di KDE
  
• Opera (inclusi dispositivi come Nintendo DSi o Wii)
  
• Basato su WebKit, come Safari (incluso su iOS), browser Android, Epiphany e Midori (WebKit è un derivato del motore KHTML di Konqueror, ma Mac OS X non condivide l'architettura KIO, quindi le implementazioni sono diverse), come nonché basato su Webkit / Chromium, come Chrome
  
• Trident      
    
  • Internet Explorer 8: Microsoft ha limitato il proprio supporto a determinati "non navigabili" contenuti per motivi di sicurezza, inclusi i dubbi che JavaScript incorporato in un URI di dati potrebbe non essere interpretabile da filtri di script come quelli utilizzati dai client di posta elettronica basati sul Web. Gli URI dei dati devono essere inferiori a 32 KiB nella versione 8 [3].
    
  • Gli URI dei dati sono supportati solo per i seguenti elementi e / o attributi [4]:      
      
    • oggetto (solo immagini)
      
    • img
      
    • input type = image
      
    • collegamento
      
    
  • Dichiarazioni CSS che accettano un URL, come immagine di sfondo, sfondo, tipo di elenco, stile di elenco e simili.
    
  • Internet Explorer 9: Internet Explorer 9 non ha limitazioni di 32 KiB e è consentito in elementi più ampi.
    
  • TheWorld Browser: un browser shell IE che ha un supporto integrato per lo schema URI dati
    
  

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

Answer 2

I browser desktop più moderni come Chrome, Mozilla e Internet Explorer supportano immagini codificate come URL di dati. Ma ci sono problemi nella visualizzazione degli URL dei dati in alcuni browser mobili: Android Stock Browser e Dolphin Browser non visualizzeranno JPEG incorporati .

Ti consiglio di utilizzare i seguenti strumenti per la codifica / decodifica base64 online:

• Codifica nel formato Base64

• Decodifica dal formato Base64

Controlla il formato " come URL dei dati " opzione per formattare come URL dati.

Answer 3

Posso usare ( http://caniuse.com/#feat=datauri ) mostra il supporto attraverso i principali browser con alcuni problemi su IE.