Email signature hell--How to include a logo image and have it stay sharp?

Question

I found a couple useful threads on this forum with respect to the issues posed by (displaying) images in email signatures-- here, for example-- and I've searched all over the web, but still have not found a good solution that sufficiently addresses the problem. A client of mine would simply like his company's logo included in the signature of his emails, and the issues I've encountered can be summarized as follows:

1. I can export a rasterized version of the logo from AI at actual size, and it will look sharp on the desktop but pixelated/blurry on hi-density (e.g. "retina") displays such as the iPhone.
2. As suggested in the thread I referenced, I can export the logo at 2-3 times the actual, displayed size to target the hi-density displays, but the logo will then look soft on non-hi-density displays when it is scaled down. This is a particular problem in this instance as the logo contains text, which looks terrible when juxtaposed with actual text in the browser/email client.
3. I've considered .svg as an option, but apparently the support is not great; and in this case I'm assuming the vast majority of the users reading this client's email will be using Outlook, so something that only renders properly in iOS/webkit/etc is not a viable option.

I'm at a loss at this point and wondering if there is any other possible option out there. I'm not sure, for instance, if it's possible to implement a hi-density image with lo-res fallback in an email signature?

Any suggestions/insights here are much appreciated. It's bordering on comical how difficult this task has turned out to be.

Answer 1

If I were you I'd abandon the Idea. Hires handling is the least of your problems, because there is simply no support within E-Mails.

But the problems start earlier. Most email clients strip out images and add a button where the user can activate the images. All this fuss for just a logo is just too much of a hassle.

I would just write the sig with plaintext and thats it.

But maybe you don't want to give up so this could be something for your

Or use this technique:

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

Answer 2

Technical solutions could be:

1. Host the Image on a server and just embed an <img> tag with the address. The Server could use the meta-information of the HTTP-Request which will fetch the image and deliver the right image size for the device.

2. Do the same with display-size aware CSS (But I don't know how good the support for this is in various E-Mail Clients) But essentially you can append both images to the mail and use CSS for various display sizes to display the right image (and you can even specify a special image for printing...)

Answer 3

Many mail clients today support SVG (Scalable Vector Graphics). For those clients, show an SVG. It's guaranteed not to be destroyed by scaling, because it reads like a computer program (e.g. draw a circle, then draw a line connected to that circle at 120 and 240 degrees, etc), so the processor will correctly render a non-blurry image inside supporting software.

There's a variety of fallback techniques if you care about older clients, but you'll need to determine which fallbacks, if any, you care about (e.g. which email clients you're concerned about showing the signature in). I'd personally choose a method that gave nearly universal cover with minimal effort rather than trying a complicated 100% coverage or no coverage-- there's a nice one that supports all but Android 2.3, which is probably rare, and is but four lines of code.

On the other hand, CSS media selectors should probably work, too. If the screen resolution is less than, say 800 pixels wide, use the PNG or JPEG you use today, otherwise use an SVG. I'm fairly certain that any "retina display" devices would support SVG, or at least the majority would.

Answer 4

Really old post but since i was struggling with the same issue for hours and just happened to solve it, I am gonna describe how i did it. The issue I faced was that the company logo I had displayed fine in desktop monitors (even HD). But it looked blurry/fuzzy when seen on a retina display phone. The image I got from the client was exactly equal to the the size the asked for. The problem (strictly for devs :) with retina displays is that they have four times more pixels in a unit area than standard screens. So what you need is an image of twice the size that you want on the screen. For example, if you want your logo to be 124x48 width and height, create an image of 248x28. What this does is, it doubles the image resolution and quadruples the number of pixels. Then use HTML to force your new image to display at half its new width i.e <img src=”your_image.jpg” width=”124” />. Doing this should solve any image pixelation or blurring. Cheers

Answer 5

I had this same problem! Super frustrating, but I finally found that using a 120px (height) by 300px (width) artboard, for example, in Illustrator then exporting for screens as a PNG 8 with a resolution of 96 ppi works well for Microsoft outlook signatures!