Para mostrar una imagen en un fichero HTML se usa la etiqueta <img> que la enlaza con una imagen externa. Normalmente se indica la dirección de la imagen externa, pero también es posible incrustar la propia imagen dentro del fichero HTML. Esto se hace mediante DATA URIs especificando los bits del fichero de la imagen en base64 e incluirlo en lugar de la dirección de la imagen externa.
En HTML:
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOu..................." />
En CSS:
.mi-imagen {
background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOu...................);
}
¿Cómo convertimos una imagen a una cadena base64?
- A través de un servicio web como este.
- Si usamos PHP, podemos convertir la imagen sobre la marcha con este código:
<?php echo base64_encode(file_get_contents("../images/mi_imagen.gif")) ?> - En Java, con la clase org.apache.commons.codec.binary.base64.
- Usando el módulo PageSpeed para Apache. Mediante el filtro Optimize Images con la opción inline_images este módulo automáticamente sustituye imágenes pequeñas enlazadas por DATA URIs.
Ventajas:
- La imagen va incrustada en el fichero por lo que en ficheros con muchas imágenes se reducen mucho las múltiples conexiones necesarias descargarse las imágenes.
- Se pueden utilizar para incluir imágenes en emails escritos en HTML de forma que se muestren en el cliente sin necesidad de descargar las imágenes externas del mensaje.
- Usando DATA URIs se puede incrustar cualquier objeto, no simplemente imágenes.
- Las buenas prácticas de desarrollo para dispositivos móviles recomiendan el uso imágenes incrustadas para fondos y estilos CSS.
Desventajas:
- La codificación de una imagen en base64 ocupa 1,37 veces más que la imagen en si. Este problema se puede reducir utilizando compresión GZIP, pero aún así supone aproximadamente un 10% más que la propia imagen.
- Algunos navegadores antiguos no soportan DATA URIs.
- Una web que use DATA URIs es más difícil de mantener, ya que al estar las imágenes incrustadas en todos los ficheros HTML, no se puede simplemente sustituir el fichero para cambiar una imagen en toda la web.
- Las imágenes normalmente se cachean, por lo que no se descargan cada vez que se descarga la página HTML. Sin embargo al estar la imagen incrustada se descarga siempre junto a la pagina HTML. (Esto no ocurre si las imagenes se incrustan en las hojas de estilos CSS ya estas también se cachean)
- Cuando un documento contiene varias veces la misma imagen, si la imagen está incrustada en código HTML y no en la hoja de estilo CSS, la imagen se incrusta tantas veces como aparezca en el documento. Esto no ocurre con imágenes externas enlazadas que solo se descargan una vez.
