pagina - ¿Cómo integrar imágenes en HTML para mostrarlas en clientes de correo web?

insertar imagenes en html desde internet

Question

Estoy intentando hacer una firma en HTML usando imágenes codificadas en URL de datos de base 64. Aquí hay un ejemplo:

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">

Funciona bien con el software de correo como Mail on Mac o Thunderbird, pero no funciona con webmail como gmail, outlook, roundcube, hotmail ...

¿Tienes alguna idea de cómo hacer que funcione? Realmente quiero poner esas imágenes directamente en el código fuente, es más práctico.

Answer 1

Estoy usando SVG incrustado, aquí es por qué:

• Se ve bien (los gráficos vectoriales funcionan bien para los logotipos).
• Sin archivos adjuntos (incluso las imágenes enviadas como los llamados archivos adjuntos de correo electrónico ocultos son visibles como tales en muchos clientes de correo electrónico).
• No hay solicitud http adicional (funciona fuera de línea, una vez descargado).
• No pregunta de "¿Quieres cargar las imágenes ...".
• Está bien para mí, si no se muestra en Gmail y Outlook. Es una especie de degradación agraciada.

Pero si realmente desea mostrar imágenes en Gmail y Outlook, deberá cargarlas a través de HTTP.

El tipo de CSS-tricks tiene una buena guía sobre SVG en el correo electrónico: https://css-tricks.com/a-guide-on-svg-support-in-email/

La solución final es la siguiente:

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}

<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

Pero personalmente no me gusta, porque no quiero que un cliente le pregunte al usuario si quiere cargar recursos adicionales.

Answer 2

respuesta simple?

Usted no puede Gmail, Outlook, etc. ignorará las imágenes base64.

Mira este sitio para aprender más sobre esto

Por lo tanto, en función de nuestros resultados, claramente no vale la pena utilizar imágenes incrustadas en sus correos electrónicos. Todo lo que estará haciendo es obligar a la gente a descargar imágenes codificadas que no podrán ver.