Encontré un par de hilos útiles en este foro con respecto a los problemas planteados por (mostrar) imágenes en firmas de correo electrónico , aquí , por ejemplo, y he buscado en toda la web, pero aún no he encontrado una buena solución que aborda suficientemente el problema. A un cliente mío simplemente le gustaría incluir el logotipo de su empresa en la firma de sus correos electrónicos, y los problemas que he encontrado se pueden resumir de la siguiente manera:
- Puedo exportar una versión rasterizada del logotipo de AI a tamaño real, y se verá nítida en el escritorio pero pixelada / borrosa en pantallas de alta densidad (por ejemplo, "retina") como el iPhone.
- Como se sugiere en el hilo al que hice referencia, puedo exportar el logotipo a 2-3 veces el tamaño real que se muestra para apuntar a las pantallas de alta densidad, pero el logotipo se verá suave en pantallas que no sean de alta densidad cuando se reduzca . Este es un problema particular en este caso, ya que el logotipo contiene texto, que se ve terrible cuando se yuxtapone con texto real en el navegador / cliente de correo electrónico.
- Lo he considerado
.svgcomo una opción, pero aparentemente el soporte no es excelente; y en este caso, supongo que la gran mayoría de los usuarios que leen el correo electrónico de este cliente usarán Outlook, por lo que algo que solo se representa correctamente en iOS / webkit / etc.no es una opción viable.
Estoy perdido en este punto y me pregunto si existe alguna otra opción posible. No estoy seguro, por ejemplo, si es posible implementar una imagen de alta densidad con baja resolución en una firma de correo electrónico.
Cualquier sugerencia / idea aquí es muy apreciada. Es casi cómico lo difícil que resultó ser esta tarea.
fuente
Respuestas:
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 E-Mails.
Pero los problemas comienzan 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/
fuente
Las soluciones técnicas pueden ser:
Aloje la imagen en un servidor e inserte una
<img>etiqueta con la dirección. El Servidor podría usar la metainformación de la Solicitud HTTP que buscará la imagen y entregará el tamaño de imagen correcto para el dispositivo.Haga lo mismo con CSS de tamaño de 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 ...)
fuente
Muchos clientes de correo actuales admiten SVG (Gráficos vectoriales escalables). Para esos clientes, muestre un SVG. Se garantiza que no se destruirá con la escala, porque se lee como un programa de computadora (por ejemplo, dibuja un círculo, luego dibuja una línea conectada a ese círculo a 120 y 240 grados, etc.), por lo que el procesador mostrará correctamente una imagen no borrosa software de soporte interno.
Hay una variedad de técnicas de respaldo si le interesan los clientes mayores, pero deberá determinar qué fallos, si los hay, le interesan (por ejemplo, qué clientes de correo electrónico le preocupa mostrar la firma). Yo personalmente elegiría un método que brindara una cobertura casi universal con un esfuerzo mínimo en lugar de intentar una cobertura complicada del 100% o sin cobertura: hay uno agradable que admite todos menos Android 2.3, lo que probablemente es raro, y tiene solo cuatro líneas de código.
Por otro lado, los selectores de medios CSS probablemente también deberían funcionar. Si la resolución de la pantalla es menor que, digamos 800 píxeles de ancho, use el PNG o JPEG que usa hoy, de lo contrario use un SVG. Estoy bastante seguro de que cualquier dispositivo de "pantalla retina" sería compatible con SVG, o al menos la mayoría lo haría.
fuente
Publicación muy antigua, pero como tuve problemas con el mismo problema durante horas y simplemente lo resolví, voy a describir cómo lo hice. El problema que enfrenté fue que el logotipo de la compañía que había mostrado bien en los monitores de escritorio (incluso HD). Pero se veía borroso / borroso cuando se ve en un teléfono con pantalla de retina. La imagen que obtuve del cliente era exactamente igual al tamaño que pedía. El problema (estrictamente para desarrolladores :) con pantallas retina es que tienen cuatro veces más píxeles en un área unitaria 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 alto de 124x48, cree una imagen de 248x28. Lo que esto hace es que duplica la resolución de la imagen y cuadruplica 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 pixelación o desenfoque de la imagen. Saludfuente
¡Yo tuve el mísmo problema! Súper frustrante, pero finalmente descubrí que usar una mesa de trabajo de 120px (alto) por 300px (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.
fuente