html - example - image url to base64

Incrustación de 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 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; 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

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

Answer 2

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 mostrarán archivos JPEG incrustados .

Le recomiendo que use las siguientes herramientas para la codificación / decodificación en línea de base64:

• Codificar en formato Base64

• Decodificar desde el formato Base64

Marque la opción "Formatear como URL de datos" para formatear como una URL de datos.

Answer 3

Actualización: 2017-01-10

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

caniuse.com/#feat=datauri

Los URI de datos ahora son compatibles con los siguientes navegadores web:

• Gecko-based, como Firefox, SeaMonkey, XeroBank, Camino, Fennec y K-Meleon
• Konqueror, a través del sistema de entrada / salida de esclavos KIO de KDE
• Opera (incluyendo dispositivos como la 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 son diferentes), así como Webkit / A base de cromo, como Chrome
• Tridente
  • Internet Explorer 8: Microsoft ha limitado su soporte a cierto contenido "no navegable" por razones de seguridad, incluidas las preocupaciones de que JavaScript incrustado en un URI de datos puede no ser interpretable por filtros de script como los que utilizan los clientes de correo electrónico basados ​​en web. Los URI de datos deben ser más pequeños que 32 KiB en la versión 8 [3].
  • Los URI de datos solo son compatibles con los siguientes elementos y / o atributos [4]:
    • objeto (solo imágenes)
    • img
    • tipo de entrada = imagen
    • enlazar
  • Declaraciones de CSS que aceptan una URL, como imagen de fondo, fondo, tipo de estilo de lista, estilo de lista y similares.
  • Internet Explorer 9: Internet Explorer 9 no tiene una limitación de 32 KB y está permitido en elementos más amplios.
  • TheWorld Browser: un navegador de shell IE que tiene un soporte integrado para el esquema URI de datos