Bueno ¡acá encontramos una solución! (Claro que antes explicamos un poco para que puede servir, si todavía no te preguntaste nada del tema):
¿Para qué incrustar una imagen en una hoja de estilo o en un archivo html?
Esta no es una práctica muy generalizada, pero en ocasiones podría ser bastante recomendable, como cuando el acceso a las imágenes podría ser limitado o necesitemos distribuir solamente un archivo auto-contenido.
Otra posibilidad es que sea necesario reducir la cantidad de peticiones HTTP al servidor, o en situaciones en que el tamaño de las imágenes es tan reducido que la demora en hacer las peticiones podría efectivamente reducirse al incrustar las imágenes en el código (es el caso de los mails!)
Vamos al "how to" en el caso de los archivos incrustados en html o para enviar por e-mail:
La opción para navegadores (serios) del tipo mozilla, firefox, safari, opera, etc. es:
1) Transformá la imagen a texto en esta web
2) En el código que sigue reemplazale el texto subrayado:
3) Copiá ese código en un HTML y ¡vualá!
También podés descargarte de acá el código.
La opción para navegadores (que no se ajustan a los estandares) IEXS 6 e IEXS 7 es:
1) Transformá la imagen a texto en esta web
2) En el código que sigue reemplazale el texto subrayado:
3) Copiá ese código en un archivo con extensión MHTML
Podés descargarte de acá el ejemplo para iexplorer.
Como ven, en ambos casos las imágenes se definen dentro del mismo archivo en lugar de referenciar a archivos externos, como hacemos normalmente.
Como todo en la vida, tiene sus desventajas:
A pesar de ser una buena alternativa en ciertas situaciones, este método tiene ciertas desventajas que debemos analizar antes de aplicarlo:
• Nuestro navegador preferido, la estrella de Microsoft MSIE 6, y hasta el momento de publicar este artículo tampoco su nuevo pseudo-navegador MSIE 7 no tiene soporte para url("data:....) pero... ¿alguien esperaba otra cosa? Ante esto, una buena solución podría ser servir las imágenes o mediante hacks determinar qué navegador recibe qué parte de la hoja.
• El tamaño de las imágenes aumenta en alrededor de un tercio (multiplica el tamaño por 4/3) por lo que si vas a utilizar este método te recomiendo optimizar al máximo el "estilo" de tus páginas de estilo.
Para terminar este tedioso e insoportable artículo, les pasamos el código php con el que también pueden codificar las imágenes en base64 en su casita (¡Sí! ¡Hágalo Ud. mismo!):
< ? p h p
echo base64_encode(file_get_contents('img01.jpg'));
?>
Si a pesar de todo les interesó el tema, pueden ver también una opción para incrustar pdf:
