Incorporamento di immagini Base64

564

Per pura curiosità, in quali browser funziona l'incorporamento di immagini Base64? Quello 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.

Qualche esempio:

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
fonte

perché non impostare una pagina con esempi, andremo tutti attraverso e faremo test in tempo reale e segnaleremo qui

— Nir Levy,

64 bit richiede solo 6 caratteri 2 ^ 6. Una stringa di testo avrà almeno 8 bit per carattere a seconda del tipo di codifica. Perdi almeno il 25% di efficienza .... il mio test rapido ha mostrato una perdita del 30% circa.

Ancora più importante, probabilmente perderai la possibilità di memorizzare nella cache le tue cose in modo efficace.

— Capanna

@BrianHaak "tremendamente" non dice nulla. Ho usato personalmente le immagini base64 più volte con ReactJs negli ultimi due anni e non ho avuto problemi di rendering. Si prega di fornire alcune misurazioni.

— Lukas Liesis,

@LukasLiesis Ho effettuato misurazioni su Google Chrome a fini commerciali, quindi non ho rapporti pubblici qui. Potrebbe essere ok per il rendering di immagini uniche ma devi considerare che la memorizzazione nella cache non funziona affatto. In React.js, è molto importante quando porta a completare il rendering delle parti (ad esempio sulle modifiche alla navigazione).

— Brian Haak,

Risposte:

361

Aggiornamento: 2017-01-10

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 (compresi 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), così come Webkit / A base di cromo, come Chrome

Tridente

Internet Explorer 8: Microsoft ha limitato il proprio supporto a determinati contenuti "non navigabili" per motivi di sicurezza, comprese le preoccupazioni che JavaScript incorporato in un URI dei 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

tipo di input = immagine

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 dei dati

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

— Philippe Gerber
fonte

Ciao Philippe, esiste qualche soluzione alternativa per il limite di dimensioni di 32 KiB in IE8? Base64 è supportato in IE7 e IE6? In caso negativo, eventuali soluzioni alternative (senza limiti di dimensioni)? Se sì, qualsiasi limite di dimensioni? Se sì, qualche soluzione alternativa?

— SexyBeast,

Dai

Gli standard dicono qualcosa? Alcuni voti positivi per l'aggiornamento di una buona risposta =).

— Ciro Santilli 31 冠状病六四事件法轮功

Limitazione di IE8 - Quello che ho scoperto è che IE8 ha un limite massimo di caratteri dell'immagine incorporata di 32.768 ( per Microsoft ) e la mia immagine incorporata aveva poco più di 35.000. Pertanto, quando la background-imageproprietà CSS ( url(...embedded image) ha tentato di caricare in IE8, poiché il limite di caratteri era stato superato, l'intero classcontenuto della proprietà non veniva caricato. Non ho perseguito una soluzione per questo, sono tornato indietro imgper immagini incorporate che superavano il massimo e le mie immagini caricate in modo appropriato.

— id. Non

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:

Seleziona l'opzione "Formatta come URL dati" per formattare come URL dati.

— Brig Ader
fonte

Non è necessario uno strumento online per codificare in base64. Invece puoi usare lo strumento da riga di comando base64 su Linux o Mac OS X: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)

— cstroe

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

— kehers
fonte