Incrustar Imágenes Base64

Question

Por pura curiosidad, ¿en qué navegadores funciona la incrustación de imágenes Base64? A lo que me refiero es a this.

Me doy cuenta de que, por lo general, no es una buena solución para la mayoría de las cosas, ya que aumenta bastante el tamaño de la página. Solo 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...); 
} 

Answer 1

Actualización: 10/01/2017

Los URI de datos ahora son compatibles con todos los principales navegadores. IE también admite la incorporación de imágenes desde la versión 8.

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

---

URIs de datos ahora son compatibles con los siguientes navegadores web:

• Gecko-basados, como Firefox, SeaMonkey, XeroBank, Camino, Fennec y K-Meleon
• Konqueror, a través del sistema de entrada/salida de esclavos KIO de KDE
• Opera (incluidos dispositivos como el Nintendo DSi o Wii)
• Basado en WebKit, como Safari (incluido 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 están basados ​​en cromo diferente), así como Webkit /, como Chrome
• Trident
  • Internet Explorer 8: Microsoft ha limitado su apoyo a determinados contenidos "no navegable" por razones de seguridad, incluyendo la preocupación de que JavaScript incrustado en un URI de datos puede no ser interpretable por los filtros de scripts, como los utilizados por los clientes de correo electrónico basados ​​en web. Los URI de datos deben ser menores que 32 KiB en la Versión 8 [3].
  • URIs de datos son compatibles sólo para los siguientes elementos y/o atributos [4]: ​​
    • objetos (sólo imágenes)
    • img
    • tipo de entrada = imagen
    • enlace
  • 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 una limitación de 32KiB y está permitido en elementos más amplios.
  • navegador TheWorld: Un navegador de cáscara de IE que se ha incorporado un soporte para el esquema de URI de datos

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

Answer 2

La mayoría de los navegadores de escritorio modernos como Chrome, Mozilla e Internet Explorer imágenes de apoyo codificadas como URL de datos. Pero existen problemas al mostrar las URL de datos en algunos navegadores móviles: Android Stock Browser y Dolphin Browser no mostrarán JPEG incrustados.

os recomiendo que utilice las siguientes herramientas para la línea base 64 de codificación/decodificación:

• Encode to Base64 format

• Decode from Base64 format

Compruebe el "Formato de URL de datos como" opción de formato como una URL de datos.

Answer 3

Puedo usar (http://caniuse.com/#feat=datauri) muestra compatibilidad con los principales navegadores con pocos problemas en IE.