Correo electrónico firma infierno - ¿Cómo incluir una imagen de logotipo y mantenerla nítida?


11

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:

  1. 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.
  2. 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.
  3. 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.


66
Es una tarea tonta, pero los clientes a menudo no son conscientes o son imposibles de convencer. No puede controlar el cliente de correo electrónico del usuario. Muchos usuarios (como yo) solo ven correos electrónicos de texto sin formato, por lo tanto, no importa lo que hagas, es solo un archivo adjunto de imagen y no tiene sentido.
Scott

Muy cierto; y este es un recado de tontos. Desafortunadamente, recibo la respuesta "pero he visto logotipos de firmas de correo electrónico que se ven nítidos", lo que hace que cualquier explicación técnica, por veraz que sea, sea mucho más difícil de plantear ...
nickpish

3
Encuentro que explicar que lo que funciona para el cliente de correo electrónico de los clientes no es una ayuda universal. Por ejemplo, ese par de pantalones se adapta a su cuerpo , pero el número de cuerpos que no encaja? Puede apuntar a algo específico, pero no puede apuntar al universo. Por supuesto, las imágenes alojadas pueden responder, pero en realidad nunca forman parte del correo electrónico. Es dudoso que su cliente quiera hacer algo más que simplemente adjuntar la imagen a sus correos electrónicos, lo que nunca funcionará.
Scott

Derecha. He pasado / perdido demasiado tiempo en esto como es. Dado que el logotipo en cuestión es principalmente texto, la mejor solución que he encontrado es encontrar la fuente "segura para web" más cercana y construir todo en html / css puro sin imágenes. Por supuesto, la fuente no coincide exactamente y como se ha mencionado, quién sabe cuántos destinatarios de correo electrónico serán siempre realmente ver la cosa en absoluto, en cualquier forma que en última instancia lleva ...
nickpish

@ font-face tampoco es confiable en clientes de correo electrónico.
Scott

Respuestas:


8

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/


Gracias por la respuesta y los enlaces, Kaspar; Definitivamente los revisaré. Me hubiera encantado haber abandonado todo hace una semana, pero el cliente no puede comprender completamente las limitaciones técnicas disponibles. Es difícil explicar cómo algo aparentemente tan simple es en realidad profundamente difícil, si no imposible, ja.
Nickpish

44
Por lo general, lanzo cuadros de soporte de E-Mail Client al cliente, que muestran muy bien cuán pobre es el soporte para diferentes cosas. De esa manera, es más fácil demostrar que los recursos humanos se utilizan mejor con algo más: campaignmonitor.com/resources/will-it-work/image-blocking
KSPR

Buen punto: esa tabla es muy útil, gracias.
nickpish

4

Las soluciones técnicas pueden ser:

  1. 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.

  2. 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 ...)


1
Hm, gracias por las sugerencias; con respecto a esto último, ¿se refiere a consultas de medios y está utilizando imágenes de fondo que se intercambian en base a dpi o viewport?
Nickpish

# 1 al que me referí en los comentarios anteriores. Esta es prácticamente la única solución posible. # 2 no funcionará para muchos clientes de correo electrónico: Outlook viene a mi mente de inmediato.
Scott

@nickpish exactamente! Esto se usa en muchos sitios web modernos (en su mayoría móviles), por lo que hay muchos tutoriales disponibles.
Falco

@Scott Sí, tener imágenes alojadas permite la lógica del lado del servidor y, por lo tanto, la capacidad de respuesta :-) Pero como Kaspar mencionó en su respuesta, la mayoría de los Clientes probablemente eliminarán o bloquearán las imágenes por completo, por lo que la última solución sería enviar correos de texto sin formato con un enlace a una copia alojada del correo como "ver un buen correo electrónico en línea"
Falco

@Falco, la solución de consulta de medios es intrigante; Soy un diseñador web muy bien versado. Aunque, como señala Scott, si Outlook no admite consultas de medios en el correo electrónico, desafortunadamente no se puede ir
2014

2

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.


1
En lo que respecta a SVG, la pregunta final en este caso es si es compatible con Outlook, lo que no creo que sea ...
Nickpish

1
@nickpish SVG no funcionará en Outlook, por eso mencioné el mecanismo de reserva. Outlook con mucho gusto admitirá CSS que representa la imagen original en lugar del SVG. Y, por lo que yo sé, nadie tiene gusto de Outlook en iOS (como en, van a utilizarlo si tienen , pero ...).
phyrfox

1
Lo tengo. Definitivamente voy a buscar en el enlace que proporcionó; Esa podría ser la respuesta. Gracias phyrfox
Nickpish

Aunque no debería establecer HighDPI igual a los dispositivos iOS ... Hay cada vez más dispositivos modernos (teléfonos inteligentes, tabletas, computadoras portátiles, computadoras de escritorio) con mayor densidad y escala de iconos, lo que resulta en imágenes borrosas.
Falco

0

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. Salud


0

¡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.


1
Ese es un cliente de correo electrónico de incontables en total. ¿Has probado este método en varios otros clientes de correo electrónico?
Zach Saucier

1
¿Por qué ppi haría algo?
joojaa
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.