Como poner imagenes en correos o paginas sin usar etiquetas de img o attachments

Habrá veces que queremos desplegar una imagen en un correo o en una página web sin utilizar una etiqueta (tag) de <img>. O también que en una hoja de estilos (CSS) queramos especificar literalmente el contenido de la imagen en lugar de hacer referencia a ella en algún path.

Utilizando Data URI Schemes, podemos especificar el “string” de Base64 que equivale a una imagen gráfica. Es decir, estamos especificando “in-line” la imagen, en formato de datos, en lugar de utilizar una etiqueta img que implica la localización de la imagen como un recurso externo.

Es decir..es lo mismo poner esto:

<img src="images/dotnet.gif alt="dotnet" />

que esto:


<img alt="dotnet" src="data:image/gif;base64,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" />

Ahora, cómo saber el Base64 string de una imagen? Podemos utilizar la herramienta online llamada “Image to Base64 converter“, hecha por Mads Kristensen, un excelente desarrollador de .NET. Mads trabaja en ZYB.

Chris Coyier, de CSS Tricks, también escribió recientemente sobre Data URIs y los comentarios en su blog post son interesantes. Chris también hace referencia a otra herramienta, similar a la de Mads, llamada Image to Data URI convertor.

Esto es sólamente una técnica, una manera más de lograr las cosas, que podría ser la más correcta o no, dependiendo de los escenarios. Los Data URIs también tienen algunas limitantes:

  • En Internet Explorer, solo funcionan en la version 8 en adelante.
  • En IE8, los Data URIs estan limitados a 32k, por lo que solo podrían servir para imagenes meramente decorativas, no fotos de alta resolución, etc.
  • Las imágenes no son cacheadas por separado, así que si el HTML o CSS se vuelve a descargar, las imágenes obviamente también.

Evalúen sus opciones, y espero les sirva.

One Response to Como poner imagenes en correos o paginas sin usar etiquetas de img o attachments
  1. [...] Como poner imagenes en correos o paginas sin usar etiquetas de img o attachments. [...]... jbravomontero.wordpress.com/2010/07/16/conversion-automatica-de-imagenes-a-data-uris

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.