Por pura curiosidad, ¿en qué navegadores funciona la incrustación de imágenes en Base64? A lo que me refiero es a este.
Soy consciente de que no suele ser una buena solución para la mayoría de las cosas, ya que aumenta bastante el tamaño de la página, pero tengo curiosidad.
Algunos ejemplos:
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...);
}
Actualización: 2017-01-10
Los URI de datos son ahora compatibles con los principales navegadores. IE soporta la incrustación de imágenes desde la versión 8 también.
http://caniuse.com/#feat=datauri
Las URI de datos son ahora compatibles con los siguientes navegadores web:
- Basados en Gecko, como Firefox, SeaMonkey, XeroBank, Camino, Fennec y K-Meleon Konqueror, a través del sistema de entrada/salida de esclavos de KDE
- Opera (incluyendo dispositivos como la Nintendo DSi o la Wii) WebKit, como Safari (incluso en iOS), el navegador de Android, Epiphany y Midori (WebKit es un derivado del motor KHTML de Konqueror, pero Mac OS X no comparte la arquitectura KIO, por lo que las implementaciones son diferentes), así como Webkit/Chromium, como Chrome.
- Trident
- Internet Explorer 8: Microsoft ha limitado su soporte a ciertos contenidos "no navegables" por razones de seguridad, incluyendo la preocupación de que el JavaScript incrustado en un URI de datos no pueda ser interpretado por los filtros de script como los utilizados por los clientes de correo electrónico basados en la web. Los URI de datos deben ser menores de 32 KiB en la versión 8[3]. Las URI de datos sólo se admiten para los siguientes elementos y/o atributos[4]:
- objeto (sólo imágenes)
- img
- input type=image
- link
- Declaraciones CSS que aceptan una URL, como background-image, background, list-style-type, list-style y similares.
- Internet Explorer 9: Internet Explorer 9 no tiene la limitación de 32KiB y se permite en elementos más amplios.
- Navegador TheWorld: Un navegador de shell de IE que tiene un soporte incorporado para el esquema de URI de datos
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support
La mayoría de los navegadores de escritorio modernos, como Chrome, Mozilla e Internet Explorer, admiten imágenes codificadas como URL de datos. Pero hay problemas para mostrar las URL de datos en algunos navegadores móviles: Android Stock Browser y Dolphin Browser no muestran JPEGs incrustados.
Le recomiendo que utilice las siguientes herramientas para la codificación/decodificación de base64 en línea:
Marque la opción "Formato como URL de datos" para formatear como una URL de datos.