Incrustar imágenes de Base64

564

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

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...);
}
html base64 browser S Pangborn
fuente
3
¿por qué no configurar una página con los ejemplos, todos vamos a ir a través y hacemos las pruebas en tiempo real, en vivo y reportamos aquí
Nir Levy
44
64 bits solo toma 6 caracteres 2 ^ 6. Una cadena de texto tendrá 8 bits por carácter como mínimo, según el tipo de codificación. Pierdes al menos un 25% de eficiencia ... mi prueba rápida mostró una pérdida del 30%.
44
Más importante aún, es probable que pierda la capacidad de almacenar en caché sus cosas de manera efectiva.
Choza8
66
@BrianHaak "tremendamente" no dice nada. Personalmente, he usado imágenes de base64 varias veces con ReactJs durante los últimos dos años y no tuve ningún problema de renderizado. Por favor proporcione alguna medida.
Lukas Liesis
1
@LukasLiesis Hice mediciones en Google Chrome con fines comerciales, por lo que no hay informes públicos aquí. Puede estar bien para renderizar imágenes únicas, pero debe tener en cuenta que el almacenamiento en caché no funciona en absoluto. En React.js, es muy crítico cuando conduce a completar partes de representación (en los cambios de navegación, por ejemplo).
Brian Haak

Respuestas:

361

Actualizar: 2017-01-10

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

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

  • Basado en Gecko, 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 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 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].
    • Los URI de datos solo son compatibles con los siguientes elementos y / o atributos [4]:
      • objeto (solo 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 32 KB y está permitido en elementos más amplios.
    • TheWorld Browser: un navegador de shell de IE que tiene soporte incorporado para el esquema de URI de datos

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

Philippe Gerber
fuente
Hola Philippe, ¿hay alguna solución para el límite de tamaño de 32 KiB en IE8? ¿Base64 es compatible con IE7 e IE6? Si no, ¿alguna solución (sin límite de tamaño)? En caso afirmativo, ¿hay algún límite de tamaño? En caso afirmativo, ¿alguna solución?
SexyBeast
Investigue
¿Las normas dicen algo? Cierto voto positivo para una buena respuesta update =).
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
55
Limitación de IE8: lo que encontré fue que IE8 tiene un límite máximo de caracteres de imagen incrustada de 32,768 ( por Microsoft ) y mi imagen incrustada tenía poco más de 35,000. Entonces, cuando la background-imagepropiedad CSS ( url(...embedded image) intentó cargarse en IE8, debido a que se había excedido el límite de caracteres, classno se cargó todo el contenido de la propiedad. No busqué una solución para esto, volví a las imgimágenes incrustadas que excedían el máximo y mis imágenes se cargaron adecuadamente.
id.ot
53

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 base64:

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

Bergantín Ader
fuente
3
No necesita una herramienta en línea para codificar a base64. En su lugar, puede usar la herramienta de línea de comandos base64 en Linux o Mac OS X: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)
cstroe