Infierno de la firma de correo electrónico: ¿cómo incluir una imagen de logotipo y hacer que se mantenga nítida?

Si yo fuera tú, abandonaría la Idea. El manejo de contrataciones es el menor de sus problemas, porque simplemente no hay soporte dentro de los correos electrónicos.

Pero los problemas empiezan antes. La mayoría de los clientes de correo electrónico eliminan las imágenes y agregan un botón donde el usuario puede activar las imágenes. Todo este alboroto por solo un logotipo es demasiado complicado.

Simplemente escribiría el sig con texto sin formato y eso es todo.

Pero tal vez no quieras rendirte, así que esto podría ser algo para ti.

O usa esta técnica:

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/

Las soluciones técnicas podrían ser:

1. Aloja la imagen en un servidor y simplemente incrusta una <img>etiqueta con la dirección. El servidor podría usar la metainformación de la solicitud HTTP que obtendrá la imagen y entregará el tamaño de imagen correcto para el dispositivo.

2. Haga lo mismo con CSS consciente del tamaño de la pantalla (pero no sé qué tan bueno es el soporte para esto en varios clientes de correo electrónico) Pero esencialmente puede agregar ambas imágenes al correo y usar CSS para varios tamaños de pantalla para mostrar el imagen correcta (e incluso puede especificar una imagen especial para imprimir...)

Muchos clientes de correo hoy en día admiten SVG (Gráficos vectoriales escalables). Para esos clientes, muestre un SVG. Se garantiza que no se destruirá al escalarlo, porque se lee como un programa de computadora (por ejemplo, dibuje un círculo, luego dibuje una línea conectada a ese círculo a 120 y 240 grados, etc.), por lo que el procesador generará correctamente una imagen no borrosa. dentro del software de soporte.

Hay una variedad de técnicas de respaldo si le interesan los clientes más antiguos, pero deberá determinar qué respaldos le interesan (por ejemplo, en qué clientes de correo electrónico le preocupa mostrar la firma). Personalmente, elegiría un método que ofreciera una cobertura casi universal con un esfuerzo mínimo en lugar de probar una cobertura complicada del 100 % o sin cobertura. código.

Por otro lado, los selectores de medios CSS probablemente también deberían funcionar. Si la resolución de la pantalla es inferior a, digamos, 800 píxeles de ancho, use el PNG o JPEG que usa actualmente; de ​​lo contrario, use un SVG. Estoy bastante seguro de que cualquier dispositivo de "pantalla de retina" admitiría SVG, o al menos la mayoría lo haría.

Publicación realmente antigua, pero como estuve luchando con el mismo problema durante horas y simplemente lo resolví, describiré cómo lo hice. El problema que enfrenté fue que el logotipo de la empresa que había mostrado bien en los monitores de escritorio (incluso HD). Pero se veía borroso/borroso cuando se veía en un teléfono con pantalla retina. La imagen que obtuve del cliente era exactamente igual al tamaño solicitado. El problema (estrictamente para los desarrolladores :) con las pantallas retina es que tienen cuatro veces más píxeles en una unidad de área que las pantallas estándar. Entonces, lo que necesita es una imagen del doble del tamaño que desea en la pantalla. Por ejemplo, si desea que su logotipo tenga un ancho y un alto de 124x48, cree una imagen de 248x28. Lo que esto hace es duplicar la resolución de la imagen y cuadriplicar el número de píxeles. Luego use HTML para forzar que su nueva imagen se muestre a la mitad de su nuevo ancho, es decir<img src=”your_image.jpg” width=”124” />. Hacer esto debería resolver cualquier imagen pixelada o borrosa. Salud

¡Yo tuve el mísmo problema! Súper frustrante, pero finalmente descubrí que usar una mesa de trabajo de 120 px (alto) por 300 px (ancho), por ejemplo, en Illustrator y luego exportar para pantallas como PNG 8 con una resolución de 96 ppi funciona bien para las firmas de Microsoft Outlook.