Imágenes embebidas en el código HTML, CSS o JSON

Sun, 06 Mar 2011 18:34:00 +0100

Mediante esquema data:URI se pueden incluir imágenes codificadas en base64 en el CSS de una página o en el src de una etiqueta img como si fueran fuentes externas. También se pueden introducir otro tipo de datos, como por ejemplo, código HTML.

<img src="data:image/png;base64,iVBORw0KGgo[...]QmCC" title="image" alt="image" />

También se puede utilizar en un JSON:

{
"image":{
"data_uri":"data:image/png;base64,iVBORw0KGgo[...]QmCC"
}
}

Las ventajas de utilizar este método son que no se necesitan abrir conexiones adicionales para decargar los datos, ya que toda la información está incluida en el propio archivo, con lo que dejan recursos disponibles, algo que puede ser especialmente útil en redes inalámbricas muy saturadas o lentas, como algunas redes de telefonía móvil, y se crean menos entradas en la caché del navegador. Además, al estar incluidos en el código se pueden cachear.

Json on Karpoke - Just Another Blog

Imágenes embebidas en el código HTML, CSS o JSON