Cómo codificar datos de imagen dentro de un archivo HTML?

Question

Me gustaría poder mostrar un archivo HTML que incluye una imagen (dentro del archivo). Buscando en Google, me he encontrado con un par de maneras de hacer esto:

• javascript:imageData
• una URI de datos tales como <IMG SRC="data:image/gif;base64,[...]">
• <object ... > etiqueta (aunque esto utiliza un URI de datos, por lo que para heredar la misma limitaciones)

Pero no sé cuál es mejor compatible con los navegadores, o si hay otras alternativas.

¿Alguien con algo de experiencia práctica me puede ofrecer consejos? Gracias.

Answer 1

Respecto a la integración del navegador, desde Wikipedia:

URIs de datos son soportados actualmente por los siguientes navegadores web:

• Gecko y sus derivados, tales como Mozilla Firefox
• Opera
• KDE, a través del sistema de entrada/salida KIO. Esto permite que el navegador de KDE, Konqueror sea compatible con URI de datos.
• Safari; aunque el motor de renderizado de Safari, WebKit, es un derivado del motor KHTML de Konqueror, Mac OS X no comparte la arquitectura de esclavos de KIO por lo que las implementaciones no se comparten.
• Safari para iPhone;
• Google Chrome
• Internet Explorer 8; Microsoft tiene soporte limitado para ciertos contenidos "no navegables", como etiquetas y reglas de CSS, por razones de seguridad, incluyendo preocupaciones de que JavaScript incrustado en un URI de datos puede no ser interpretable por filtros de scripts como los utilizados por correo electrónico basado en web clientela. Los URI de datos deben ser menores de 32 k.
• TheWorld Browser; es un navegador IE concha que tiene un soporte incorporado para el esquema de URI de datos

IE no maneja correctamente la etiqueta <object>, ver here para más detalles. En resumen, no puede confiar en que IE muestre imágenes desde allí.

El javascript:imageData tampoco es bien compatible, ya que se usa en muchos ataques de scripts cruzados.

Hay muchas discusiones de this en el web, y todas llegan a la conclusión de que no existe una buena forma universal de insertar imágenes. Si solo necesita admitir un subconjunto de navegadores, la uri de datos puede funcionar, o una combinación de uri de datos y javascript.

Answer 2

imageData es más flexible, por ejemplo, algunos ie restringen los datos uris a 32k.

Answer 3

El esquema de URI de datos es razonable bien soportado, excepto en Internet Explorer antes de la versión 8.

JavaScript URIs son, creo, un poco mejor, pero apoyada fallar si JS no está disponible.

Lo mejor que puede hacer es atenerse a los recursos de imagen externos.

Answer 4

Los URI de datos no funcionarán en < IE8. IE8 los admite hasta 32 KB.