Inferno de assinatura de e-mail - Como incluir uma imagem de logotipo e mantê-la nítida?

Encontrei alguns tópicos úteis neste fórum com relação aos problemas colocados (exibindo) imagens nas assinaturas de email - aqui , por exemplo - e pesquisei por toda a web, mas ainda não encontrei uma boa solução que lida suficientemente com o problema. Um cliente meu gostaria que o logotipo de sua empresa fosse incluído na assinatura de seus e-mails, e os problemas que encontrei podem ser resumidos da seguinte forma:

1. Posso exportar uma versão rasterizada do logotipo da AI no tamanho real, e ela ficará nítida na área de trabalho, mas com pixels / desfocados nos displays de alta densidade (por exemplo, "retina"), como o iPhone.
2. Conforme sugerido no tópico que referenciei, posso exportar o logotipo de 2 a 3 vezes o tamanho real exibido para direcionar as telas de alta densidade, mas o logotipo ficará macio em telas de não-densidade quando for reduzido . Esse é um problema específico nesse caso, pois o logotipo contém texto, que parece terrível quando justaposto com o texto real no navegador / cliente de email.
3. Eu considerei .svgcomo uma opção, mas aparentemente o suporte não é ótimo; e, neste caso, estou assumindo que a grande maioria dos usuários que leem o email deste cliente estará usando o Outlook, portanto, algo que só é renderizado corretamente no iOS / webkit / etc não é uma opção viável.

Estou perdido neste momento e me pergunto se existe alguma outra opção possível por aí. Não tenho certeza, por exemplo, se é possível implementar uma imagem de alta densidade com fallback de baixa resolução em uma assinatura de email?

Todas as sugestões / idéias aqui são muito apreciadas. É quase cômico o quão difícil essa tarefa acabou sendo.

Se eu fosse você, abandonaria a idéia. O manuseio de contratações é o menor dos seus problemas, porque simplesmente não há suporte no E-Mails.

Mas os problemas começam mais cedo. A maioria dos clientes de email retira as imagens e adiciona um botão onde o usuário pode ativar as imagens. Todo esse barulho por apenas um logotipo é muito complicado.

Gostaria apenas de escrever o sig com texto simples e é isso.

Mas talvez você não queira desistir, então isso pode ser algo para o seu

Ou use esta técnica:

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

As soluções técnicas podem ser:

1. Hospede a imagem em um servidor e apenas incorpore uma <img>tag ao endereço. O servidor pode usar as meta-informações da solicitação HTTP, que buscarão a imagem e fornecerão o tamanho certo para o dispositivo.

2. Faça o mesmo com o CSS sensível ao tamanho da tela (mas não sei o quão bom é o suporte para isso em vários clientes de email). Mas, basicamente, você pode anexar as duas imagens ao email e usar CSS para vários tamanhos de exibição para exibir o imagem correta (e você pode até especificar uma imagem especial para impressão ...)

Hoje, muitos clientes de correio oferecem suporte ao SVG (Scalable Vector Graphics). Para esses clientes, mostre um SVG. É garantido que não será destruído pela escala, porque se parece com um programa de computador (por exemplo, desenhe um círculo e, em seguida, desenhe uma linha conectada a esse círculo a 120 e 240 graus, etc), para que o processador processe corretamente uma imagem não embaçada software de suporte interno.

Há uma variedade de técnicas de fallback se você se preocupa com clientes mais antigos, mas precisará determinar quais fallbacks, se houver, se importam (por exemplo, quais clientes de e-mail estão preocupados em mostrar a assinatura). Pessoalmente, eu escolheria um método que proporcionasse cobertura quase universal com o mínimo de esforço, em vez de tentar uma cobertura complicada de 100% ou nenhuma cobertura - existe um bom que suporta tudo, exceto o Android 2.3, o que provavelmente é raro e tem apenas quatro linhas de código.

Por outro lado, os seletores de mídia CSS provavelmente também devem funcionar. Se a resolução da tela for menor que, digamos, 800 pixels de largura, use o PNG ou JPEG usado hoje, caso contrário, use um SVG. Estou bastante certo de que qualquer dispositivo "retina display" suportaria SVG, ou pelo menos a maioria seria.

Post muito antigo, mas desde que eu estava lutando com o mesmo problema por horas e resolvi resolvê-lo, vou descrever como o fiz. O problema que eu enfrentei foi que o logotipo da empresa que eu exibia bem em monitores de desktop (mesmo em HD). Mas parecia embaçado / distorcido quando visto em um telefone com tela retina. A imagem que obtive do cliente era exatamente igual ao tamanho solicitado. O problema (estritamente para desenvolvedores :) com telas de retina é que elas têm quatro vezes mais pixels em uma área de unidade que as telas padrão. Então, o que você precisa é de uma imagem com o dobro do tamanho desejado na tela. Por exemplo, se você deseja que seu logotipo tenha largura e altura de 124x48, crie uma imagem de 248x28. O que isso faz é, ele dobra a resolução da imagem e quadruplica o número de pixels. Em seguida, use HTML para forçar sua nova imagem a ser exibida na metade de sua nova largura, ou seja,<img src=”your_image.jpg” width=”124” />. Isso deve resolver qualquer pixelização ou desfocagem da imagem. Felicidades

Eu tenho esse mesmo problema! Super frustrante, mas finalmente achei que usar uma prancheta de 120px (altura) por 300px (largura), por exemplo, no Illustrator e depois exportar para telas como PNG 8 com uma resolução de 96 ppi, funciona bem para assinaturas do Outlook da Microsoft!