This is some text prior to the author information. You can change this text from the admin section of WP-Gravatar To change this standard text, you have to enter some information about your self in the Dashboard -> Users -> Your Profile box. ¿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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×1gg+7B05LynEsT5e0j5ya
/eujcJZf4exAH82T3iFRWjXaa2vdS063w4kSLUq9PdX/ADwwQpBPtCXwn3JSPDUNWrYjVPf3ai4H
mgt6PSKg8skfXdgNvPR1Hl1BUyn3Np8tFASTctlqGSn5LuNHLoCGYhx9hB02dZUq+9vnQhRQik3K
CsD1R+St+P8A8h9o0Ms3lhduoHX6f/BTVBi4cQW1BWvIdHsA9HxA+K5VSnIqV97RSn0h35McuKqJ
4uf0zMSM40r4OhtXw1wrNJYrG4W0L0tsPopxr9UShYyC6xGZdaJ9ziUH4alVpJuSwlAZCIFzlRHg
DGiAE/Ega4OkfPbboE8zTbnwPH/NGv3H9utbJxSfpYOzBI9fB/oVoy6tPIynZl6PL+fURfl/27tt
RqXVrnVVZLlXkyGmEU5ltxX0KWlOLWpa09S+kDGehzpjt7utZ+6dYk0mgsXAxNaiPTA7PitBgJaQ
VqSpSHFFOQCAcdSB46mrj2qj7rzrAj1CK7UKVSPlqoyYTOQqTwinIQzkcwFLdQVY58IVjHUF71Ku
RimqhCCaJRUDnGaaTChMoHmBwoSkdcnyyToObOwZw9km1U464mZTmOpG5MwNdoB227xqXhrdg2nI
VPqCpOaAnxKCdIMmBtp660FVCmMvbx7XV4pAmv0e5KW6vHNxEemurbJ8yBJKc+SEjw1Aby7p1Xaa
37CqlPaamxJFQq8afT5Oe6lMlunK4FEHKSCkKSocwUgjxBY0ncmnXp2m7Yo1CkpnUagUWtR0zG88
EqSumylPuo80ckISfENhXjoc7XKCrbaxFhJKU1aqAqA5DLMLAPvwfsOmFltbdzatPaqDRB69EAg9
+x70×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×104QU4PMatLw5hYIAg1o
HlCq/gRnROjkpP8AlEn9ujapVAU+OXOAuufmtg4JOkinMpWFAYIOde3IqFuh1YBUnpy1JZ2ptkqE
718pxK1AmhaZBqlWyqTIQyk80s5OB7wB/wAdNPmq9yxJZ+xQ/u0alhvPQk6XozeRy1ZKFGphdqSI
SIFBJtaSEnDzKlY6Akf8RpgulyELKVIKVA4wf+2rF9GbJ6dRr4qE0XA4UjiHidZDZ61Km9V/UKCG
rXlLQC442ySM8Kicj34GvfzVkY5yGc+A9b92jf0ZB54z79efR2yrHDz9msctVafWuUAzaA/DCPXQ
6lYOCkHljzyNdmrXkuICluNtA9EqJzjzwAdGyoLa1pUoA8PT2a9+joJJxk+Z1nlmK2N6qABvQbHo
E+G4Fx5bSHB0AUof3Y0QUarvPL9GnN91JHQ+Cv8AvqS9FbPh9mvDkFtakqx6wxz8dbJSpO9QrfDo
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:
<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 |
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!!!
Tags: códigos, html, imagenes
Publicado en Internet |
