Puur uit nieuwsgierigheid, in welke browsers werkt Base64 image embedding? Waar ik op doel is this.
Ik realiseer me dat het meestal geen goede oplossing is voor de meeste dingen, omdat het de paginagrootte nogal wat vergroot - ik'ben gewoon nieuwsgierig.
Enkele voorbeelden:
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...);
}
Update: 2017-01-10
Data URI's worden nu ondersteund door alle grote browsers. IE ondersteunt sinds versie 8 ook het insluiten van afbeeldingen.
http://caniuse.com/#feat=datauri
Data URI's worden nu ondersteund door de volgende web browsers:
- Gecko-based, zoals Firefox, SeaMonkey, XeroBank, Camino, Fennec en K-Meleon
- Konqueror, via KDE's KIO slaven input/output systeem
- Opera (met inbegrip van apparaten zoals de Nintendo DSi of Wii)
- WebKit-gebaseerd, zoals Safari (ook op iOS), Android's browser, Epiphany en Midori (WebKit is een afgeleide van Konqueror's KHTML-engine, maar Mac OS X deelt de KIO-architectuur niet, zodat de implementaties verschillend zijn), evenals Webkit/Chromium-gebaseerd, zoals Chrome
- Trident
- Internet Explorer 8: Microsoft heeft de ondersteuning beperkt tot bepaalde "non-navigable" content om veiligheidsredenen, waaronder de bezorgdheid dat JavaScript dat is opgenomen in een data URI mogelijk niet kan worden geïnterpreteerd door scriptfilters, zoals die worden gebruikt door web-based e-mailclients. Data URI's moeten kleiner zijn dan 32 KiB in versie 8[3].
- Data URI's worden alleen ondersteund voor de volgende elementen en/of attributen[4]:
- object (alleen afbeeldingen)
- img
- input type=image
- link
- CSS declaraties die een URL accepteren, zoals background-image, background, list-style-type, list-style en dergelijke.
- Internet Explorer 9: Internet Explorer 9 heeft geen 32KiB beperking en toegestaan in bredere elementen.
- TheWorld Browser: Een IE shell browser die een ingebouwde ondersteuning heeft voor Data URI schema
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support
De meeste moderne desktopbrowsers zoals Chrome, Mozilla en Internet Explorer ondersteunen afbeeldingen die als data-URL zijn gecodeerd. Maar er zijn problemen met het weergeven van data URLs in sommige mobiele browsers: Android Stock Browser en Dolphin Browser zullen embedded JPEGs niet weergeven.
Ik raad je aan om de volgende tools te gebruiken voor online base64 codering/decodering:
Vink de "Formatteer als Data URL" optie aan om te formatteren als een Data URL.