Sunday, 1 July 2007

Mail HTML con imagenes incrustadas en base64

¿Quieres crear un mail HTML con imagenes insertadas que los programas de correo no bloqueen antes de visualizar? Por ejemplo, ¿quieres utilizar una firma con una imagen y que la imagen siempre se visualice sí o sí, sin que aparezca como un archivo adjunto a tus emails? Vamos a ver cómo.


Igual que te habrá pasado a ti, antes de llegar a aquí habrás probado mil cosas: poner direcciones absolutas en los "src" de tus imagenes (en el codigo HTML), enviarte un mail para luego reenviarlo esperando que la segunda vez que lo envies la imagen ya vaya incrustada o embebida en el mail, etc... Posiblemente, además hayas leido mil y un métodos que habrás probado sin estar del todo satisfecho con los resultados. Muchos de ellos funcionan, pero parcialmente.


Quiero convertir con vosotros el siguiente método que hasta el momento me ha funcionado muy bien. Sentíos libres de comentar aquí vuestros resultados. Al final de mi explicación expondré lo que sé en cuanto a sus limitaciones.


Nuestro objetivo va a ser conseguir firmar nuestros mails con un logotipo de nuestra empresa, de forma que éste se cargue inmediatamente en el programa de correo del destinatario, sea cuál sea (outlook, thunderbird, webmail, etc...).


Básicamente, el "truco" consiste en que nuestra firma sea un pequeño trozo de código HTML que entre otras cosas incluya una etiqueta de imagen (<img src="..." />) con el logo de la empresa pero encapsulado o embebido codificado en base64. De esta forma, el mail pesará ligeramente un poco más, pero desde luego compensa por la efectividad del método: la imagen será decodificada en cuanto se intente visualizar el mail sea donde sea... en un programa gestor de correo local (outlook, thunderbird, etc...) o en una página de webmail (es decir, en un navegador).


Pasos:



  • Pasar la imagen (JPG o GIF) a base64

  • construir un archivo HTML conteniendo esa imagen en un tag <img>

  • insertar ese archivo HTML al final de nuestros mails como firma predeterminada


Para pasar la imagen (JPG o GIF) a base64, lo más fácil es utilizar algún recurso on-line que nos haga el trabajo. El que yo utilizo es Base64 online. Con el botón "examinar" indicamos cuál es el archivo del que queremos obtener su codificación en base64. Y luego clicamos el botón "convert de source data". Por ejemplo, si codificamos la siguiente imagen



obtenemos el siguiente código:


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
hYpzpaWlqWqdf//Z

Para copiarlo todo fácilmente te recomiendo que hagas un clic dentro del recuadro donde está el código a copiar, y utilices el menú que aparece al hacer clic con el botón secundario del ratón. Primero clica en "Seleccionar todo", y luego en "copiar".


El segundo paso consiste en construir un código HTML que inserte nuestro logotipo en base64. Para ello puedes simplemente elaborar ese código HTML trabajando con la imagen tal como lo harías habitualmente (src="http://....") y luego reemplazaremos el src por el código en base64 de esa imagen.


Este es un ejemplo de cómo podría ser esa firma:


<table style="border:1px #c5a500 solid;font-family:'trebuchet ms',verdana;font-size:14px;" cellpadding='15'>

<tr>
<td>
<img id='logo'
src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASAB
IAAD/4QAWRXhpZgAATU0AKgAAAAgAAAAAAAD//gAXQ3JlYXRlZCB3
aXRoIFRoZSBHSU1Q/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKB
wcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFB
UU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQU
...
E+G4Fx5bSHB0AUof3Y0QUarvPL9GnN91JHQ+Cv8AvqS9FbPh9mvDkF
takqx6wxz8dbJSpO9QrfDo
hYpzpaWlqWqdf//Z
"
/>
</td>
<td style="vertical-align:middel;">
<p><b>Mi nombre</b>
<br /><a href="http://www.imasdeweb.com" style="color:#c40000;">
<b>www.imasdeweb.com</b></a></p>
</td>
</tr></table>

Y el aspecto que tendría en el email es:








Sergio Rodríguez Ríos

www.imasdeweb.com



Lo último que quedaría es grabar este código HTML en un archivo con extensión .htm y configurar nuestro programa de correo para que utilice de forma predeterminada ese archivo como firma de nuestros emails. Espero que lo disfrutéis!!!

31 comments:

  1. Evidentemente, se to "olvidó" decir que no funciona en Microsoft Internet Explorer
    ¬¬

    ReplyDelete
    Replies
    1. Eso que importa... ese navegador solo sirve para descargar otros navegadores..

      Delete
  2. Vaya David... ahora me haces dudar. Lo investigo y luego pongo aquí el resultado de mis pruebas.

    Es lo que pasa cuando te acostumbras a trabajar con FireFox o cuando tienes sistemas operativos NO-MICROSOFT (Ubuntu en mi caso)... que a veces te olvidas de hacer pruebas en IE ;)

    Aunque me extraña, porque diría que hice esas pruebas. Bueno, lo dicho... lo veo y reescribo. Gracias por tu comentario.

    ReplyDelete
  3. Hola David, me gusta como has explicado, yo estoy en la construccion de un sistema de boletines, y me gustaria si no tienes algun ejemplo de lo que has hecho, porque la verdad que se me complica,porque yo tengo q hacer eso pero por cada imagen que inserte en usuario en el emial, espero tu respuesta, gracias

    ReplyDelete
  4. Perdon el mensaje era para Usher web o quien me pueda dar una mano, gracias

    ReplyDelete
  5. Muchas gracias, muy buena explicacion

    Me salio a la primera xD

    ReplyDelete
  6. Estimado Usher Web, pasa que no entiendo como dar este paso, sucede que tengo un webmail, pero no tiene ni para insertar imagen en el cuerpo del e-mail, y como sy del área ventas, no se como insertar el codigigo que dices, puedo copiar tu parrafo y el paso de convertir la imagen lo entiendo, pero si hago el Html, donde lo pego?, podras tomarte unos minutos para explicar con manzanitas, step by step, si revisas este blog, o si puedes escribeme a esteban@atodomovil.com por favor, mucha suerte en este nuevo año, tu empresa es de servicio WEB?
    quizas podamos ver hacer algo en conjunto, mira la web de atomovil.com, un gran saludo y en serio espero puedas escribir...

    ReplyDelete
  7. Siento haber tardado unos días en responderte, pero he andado bastante ocupado. Sin embargo, la pregunta me parece muy interesante.

    Y la respuesta es muy sencilla. Si utilizas habitualmente correo web (Hotmail, Yahoo, Terra, etc...) en lugar de un programa de escritorio (Thunderbird, Outlook, etc), se me ocurren dos maneras para poder insertar una firma HTML como la que he detallado en el articulo:

    - la opción que seguro te va a funcionar es: create la firma y enviala una sola vez desde un programa de correo de escritorio a tu cuenta de correo web. Luego guardas ese email como "borrador" o "plantilla" y así te sirve cuando quieras para escribir nuevos emails con tu firma ;)

    - la otra opción no sé si siempre será posible (dependerá del servicio de correo web que utilices), en Hotmail si veo que funciona: cuando estés redactando un nuevo email, busca en el menú de edición del mismo una opción como "editar en HTML". De hecho, en Live de Hotmail se ve un "botón desplegable" que dice "texto enriquecido", y al hacer clic se despliega una lista con otros 2 modos de edición: "Editar en HTML" y "Texto sin formato". Solamente debes escoger el modo HTML, que es el que te permite insertar etiquetas HTML como las que explico en el articulo ;)

    Espero que te sirva. De todas formas, se agradecerán comentarios que complementen lo dicho por mí o que muestren otras vías alternativas :)

    un saludo,
    SERGI

    ReplyDelete
  8. para insertar contenido flash .swf se puede?

    ReplyDelete
  9. Por poder... puedes insertar el código HTMl que tú quieras, como por ejemplo una etiqueta EMBED para incluir una película flash. Lo que pasa es que lo que no es tan seguro es que el destinatario del email vaya a poder "reproducir" esa película Flash!!

    Es decir, me imagino (no lo he probado) que si el destinatario consulta su correo en una web (es decir, usa webmail) es decir, tu email se visualizará en un navegador de páginas web, entonces no creo que haya problemas para que se reproduzca el flash que hayas incluido en tu email.

    Sin embargo, si el destinatario utiliza un programa de escritorio para leer sus correos (Thunderbird, Outlook, etc.) no creo que vaya a reproducirse el flash!!! Piensa que la reproducción de una película flash depende de que el programa que abre el correo utilice el PLUGIN DE FLASH, y creo que los programas de correo no lo usan ;)

    Creo que aspirar a inculir un Flash en tus emails ya es pedir demasiado ;) Siempre te queda el recurso de poner en el email una frase del tipo: "Para visualizar correctamente este email haga clic aquí" y enlazar esa frase con una URL en la que hayas puesto el email HTML con Flash y todo :)))

    SERGI

    ReplyDelete
  10. Hola

    Recomiendo que pruebes E-nvía. Es una herramienta Online para la creación de Mailings, Newsletters y Boltines Electrónicos.
    La herramienta permite la creación y gestión de Campañas por Internet con Seguimiento de Resultados/Estadisticas, personalización, entre otras funcionalidades.

    En la pagina web de E-nvía hay un link para crear una cuenta de prueba para conocer la herramienta sin cargo y sin compromiso.

    La herramienta fue desarrollada para que no requiera conocimientos técnicos y es bastante fácil de utilizar.

    En la misma, hay un blog con recomendaciones para la realización de un HTML (optimizado para envío de correos).

    Cualquier duda, nos escribe o llama al 93 534 8842 y estaremos encantados de ayudarle.

    ReplyDelete
  11. Usher web tengo un problema, yo tengo una cuenta de correo hotmail, pero al poner el código me dice que es muy largo

    ReplyDelete
  12. "Usher web dijo...

    Si utilizas habitualmente correo web (Hotmail, Yahoo, Terra, etc...) en lugar de un programa de escritorio (Thunderbird, Outlook, etc), se me ocurren dos maneras para poder insertar una firma HTML como la que he detallado en el articulo:

    - la opción que seguro te va a funcionar es: create la firma y enviala una sola vez desde un programa de correo de escritorio a tu cuenta de correo web. Luego guardas ese email como "borrador" o "plantilla" y así te sirve cuando quieras para escribir nuevos emails con tu firma ;)

    - la otra opción no sé si siempre será posible (dependerá del servicio de correo web que utilices), en Hotmail si veo que funciona: cuando estés redactando un nuevo email, busca en el menú de edición del mismo una opción como "editar en HTML". De hecho, en Live de Hotmail se ve un "botón desplegable" que dice "texto enriquecido", y al hacer clic se despliega una lista con otros 2 modos de edición: "Editar en HTML" y "Texto sin formato". Solamente debes escoger el modo HTML, que es el que te permite insertar etiquetas HTML como las que explico en el articulo ;)

    Espero que te sirva. De todas formas, se agradecerán comentarios que complementen lo dicho por mí o que muestren otras vías alternativas :)

    un saludo,
    SERGI"

    ReplyDelete
  13. Hola a todos, es muy interesante esta página, el único sitio que he podido encontrar donde quizás me puedan ayudar. Estoy recibiendo unos correos que me manda mi novia con unas fotos codificadas a base 64. La información la leo en el código fuente del email, pero no puedo ver las imágenes. ¿hay alguna forma de convertir el código en imagen y poder así recuperar la foto en jpg? He probado haciendo el truco de hotmail con texto html, pero no me funciona.

    Gracias espero me podais ayudar

    ReplyDelete
  14. @Raúl: bienvenido a mi blog, en el cuál escribo muy de tanto en tanto, solamente cuando tengo algo realmente original que aportar... entiéndase cuando me he hecho un harto de buscar y leer para encontrar solución a un problema concreto, y entonces escribo un artículo para compartir lo que aprendí ;)

    Respondiendo a tu pregunta, te diría lo que yo hago en situaciones similares. No es una solución muy elegante, pero sí muy práctica y fácil, jejeje... por algo se dirá que "lo mejor es enemigo de lo bueno"...

    Bueno, la solución es así:

    1. visualiza el email que contiene la imagen embebida en base64, ya sea en tu programa de correo o en una web.
    2. haz una captura de pantalla
    3. usa un editor de imágenes para recortar la foto en la captura

    Fácil, no? ;)
    Entiendo que es una solución "manual", en el sentido de que si quisieras hacerlo de forma automática con un script no serviría... pero en fin, en tu caso si sirve.

    Un saludo!
    SERGI

    ReplyDelete
  15. @Raúl: releyendo tu comentario he pensado que tal vez no te entendí bien, porque parece que tal vez no llegas ni siquiera a poder ver las fotos en el correo, no? es decir, SOLAMENTE ves el codigo en base64 ??!

    Si es así, te he probado otra solución ;)

    En la misma página que menciono en el artículo "Base64 online" te permiten las dos operaciones: pasar de foto a base64 y al revés!!!!

    http://www.motobit.com/util/base64-decoder-encoder.asp

    Para pasar de base64 a foto solo has de cambiar algunas cosas del formulario de la página:

    1. abre el código original del mensaje de email y copia en el portapapeles el codigo base64 de la foto
    2. en la web de arriba pega ese código (es bastante largo) en la casillota más grande, obviamente.
    3. donde pone "What to do with the source data: " marca la opción "DECODE"
    4. donde pone "Output data: " marca "EXPORT TO A BINARY FILE", y en la casilla a su derecha escribe algo como "mi_foto.jpg"
    5. haz clic en el botón "convert the source data"
    6. tu navegador entonces descargará un archivo, que es la foto ;)

    Ahora creo que sí te ayudé :))
    Saludos!
    SERGI

    ReplyDelete
  16. Lo siento sergi, quizás no me he explicado bien... El problema es que no puedo visualizar la imagen, porque el servidor de correo de mi novia, compacta el email en un archivo sin extensión donde está todo el código fuente y la imagen codificada a base 64. Lo único que tengo es el código, pero no se como obtener la fotografía, he intentado seguir todos los pasos que has indicado, pero no consigo visualizar la imagen a partir del código.

    Un saludo y gracias por tu ayuda y por tus respuestas

    ReplyDelete
  17. Sergi no había visto tu último mensaje, lo siento, si que funciona lo que has explicado.

    Muchas gracias por tu ayuda.

    Sinceramente agredecido. Saludos

    ReplyDelete
  18. seguimos sin saber si funciona o no en IE verdad???

    ReplyDelete
  19. he probado lo que comenta el amigo del tuturial y no finciona osea se envia bien pero no funciona al abrir el correo, llega pero no se abre directamente con la imagen

    ReplyDelete
  20. Tienes razón Anónimo, en que algunas veces no se muestra la imagen. No me preguntes el porqué. Hace tiempo que escribí este artículo y desde entonces no he conseguido mucho más.

    Me imagino que las medidas anti-spam se han ido perfeccionando tanto que posiblemente muchos lectores de correo ya no permiten DE NINGUNA DE LAS MANERAS mostrar imágenes sin pedir permiso al usuario.

    Así es la vida: que por culpa de 4 que quieren hacer daño tenemos que aguantarnos la mayoría. Pero en fin, de todas maneras, me consta que el método expuesto en este artículo funciona la mayoría de las veces (no sabría darte un porcentaje).

    Mi consejo es que siempre pongas al incio de tu email algo como: "este correo contiene imágenes interesantes para el contenido, si no puedes visualizarlas pulsa el siguiente enlace o engánchalo en tu navegador" ;)

    Si alguien tiene algún apunte sobre algún método más eficaz, que nos deje un enlace por aquí ;)

    Saludos!
    SERGI

    ReplyDelete
  21. La intension fue muy buena, mi objetivo era enviar un correo desde una pagina web incrustando una imagen. Probando la visualizacion en Firefox excelente, pero debido a un comentario hice la prueba de visualizacion en Internet Explorer pero no funciono, asi que probe de todas maneras el envio del correo pero en outlook, hotmail y gmail, llega el cuadrito que identifica la imagen, pero la imagen no se visualiza ni haciendole click. Lastima porque me habria sido de gran utilidad. tuve que subir la imagen a internet y vincularla al correo... kabedoya

    ReplyDelete
  22. carnal me que en este paso:

    construir un código HTML que inserte nuestro logotipo en base64. Para ello puedes simplemente elaborar ese código HTML trabajando con la imagen tal como lo harías habitualmente (src="http://....") y luego reemplazaremos el src por el código en base64 de esa imagen.

    me puedes ayudar
    salu2

    ReplyDelete
  23. Hola Reymon, pues justo debajo de ese párrafo que has citado hay un ejemplo de cómo hacerlo. No entiendo en qué punto te quedas encallado. Sé más explícito con tu pregunta.

    ReplyDelete
  24. Muchas gracias por tu ejemplo. me sirvió mucho en mi proyecto de ExtJS 4

    ReplyDelete
  25. gracias por ayudar a las personas a aprender a como se puede incrustar una imagen de logotipo en su blog, aunque puede ser una tarea dificil para alguien que no sabe manejar el html, es algo se debe hacer para que tu sitio tenga tu sello personal.

    imagenes chistosas

    ReplyDelete
  26. Buen día en mi caso y siguiendo el ejemplo de crear el HTML y en la etiqueta <img id='logo' src="data:image/jpg;base64,AQUI VA EL CODIGO BASE64//> si envia el correo pero la imagen no se visualiza en el html que envio como mensaje me aprece solo un cuadrito de la imagen mas no la imagen alguien que me pueda ayudar. NOTA: el envio de correo lo hago en java Message message = new MimeMessage(getSession()); y transport.send(message)

    ReplyDelete
  27. Excelente truco, me podrías comentar si se puede aplicar con cualquier tipo de correo como hotmail o gmail? De ahí en fuera, un muy buen aporte, te felicito.

    ReplyDelete
  28. A lo que preguntaba Mandrake (por allá el 2015, jeje) hay que tener cuidado con la part de "aqui va el codigo base 64". Lo digo porqué para JPGs es diferente que para PNGs... no entiendo los detalles técnicos exactos de este asunto, pero los JPG acaban con ciertos caracteres (a modo de sufijo) y los PNG con otros, y creo que también sucede algo parecido con los carácteres previos.

    Sorry, nunca me he dado el tiempo de buscar la pregunta exacta a este detalle. Si alguien tiene a mano un enlace con buena información... que comparta! :)

    ReplyDelete
  29. A lo que pregunta Paco, sobre Hotmail/GMail, decir que realmente este sistema sí puede verse truncado según el "lector de correos" que use el destinatario del correo para abrirlo. Incluso con un mismo software (o plataforma web) puede configurarse de modo diferente, especialmente en lo que tiene que ver con el manejo de contenidos "incrustados" en el correo y las etiquetas HTML en general.

    Dicho esto, creo que es misión imposible tratar de anticipar la reacción de cada usuario y su plataforma, además de que esto cambia cada año! Está complicado.

    ReplyDelete