Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
5  
It's a fool's errand - but clients are often unaware or impossible to convince. You can not control the user's email client. Many users (such as myself) only view plain text emails, therefore no matter what you do, it's just an image attachment and pointless. –  Scott Aug 11 at 9:32
    
Very true; and 'tis fool's errand indeed. Unfortunately I get the "but I've seen email signature logos that look sharp" response, thereby making any technical explanation, however truthful, that much more difficult to pose... –  nickpish Aug 11 at 9:35
3  
I find explaining that what works for the clients email client is not universal helps. For example, that pair of pants fits your body but how many bodies do they not fit? You can target something specific, but you can't target the universe. Of course hosted images can be responsive, but those are never actually part of the email themselves. It's doubtful your client wants to do anything more than just attached the image to his/her emails - which will never work. –  Scott Aug 11 at 9:39
    
Right. I've spent/wasted way too much time on this as it is. Given that the logo in question is mostly text, the best solution I've come up with is finding the closest "web safe" font and building the whole thing in pure html/css with no images at all. Of course, the font doesn't exactly match and as you mentioned, who knows how many email recipients will ever actually see the thing at all, in whatever form it ultimately takes... –  nickpish Aug 11 at 9:43
    
@font-face is unreliable in email clients as well. –  Scott Aug 11 at 9:45

3 Answers 3

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/

share|improve this answer
    
Thanks for the response and links, Kaspar; I'll definitely check them out. I would have loved to have abandoned the whole thing a week ago, but the client can't fully grasp the technical limitations at hand. It's difficult explaining how something seemingly so simple is in actuality profoundly difficult if not impossible, ha. –  nickpish Aug 11 at 9:01
4  
I usually throw E-Mail Client support charts at the client, which show very nice how poor support for different things are. That way it's easier to show that human resources are better used with something else: campaignmonitor.com/resources/will-it-work/image-blocking –  Kaspar Aug 11 at 10:08
    
Good point-- that chart is very helpful, thanks. –  nickpish Aug 11 at 10:22

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

share|improve this answer
1  
Hm, thanks for the suggestions; with respect to the latter, are you referring to media queries and using background images that swap based on dpi or viewport? –  nickpish Aug 11 at 10:05
    
#1 I referred to in comments above. This is pretty much the only possible solution. #2 won't work for many e-mail clients - Outlook comes to mind immediately. –  Scott Aug 11 at 11:34
    
@nickpish exactly! This is used on many modern Websites (mostly mobile) so there are many tutorials around. –  Falco Aug 11 at 13:18
    
@Scott Yes - having hosted images allows for server side logic and thus responsiveness :-) But as Kaspar mentioned in his answer most Clients will probably strip out or block images altogether, so the last solution would probably be sending plaintext mails with a link to a hosted copy of the mail as "view nice styled email online" –  Falco Aug 11 at 13:21
    
@Falco the media query solution is an intriguing one; I'm a web designer so pretty well versed. Although as Scott points out, if Outlook doesn't support media queries in email it's a no-go unfortunately –  nickpish Aug 11 at 21:00

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.

share|improve this answer
    
as far as SVG is concerned, the ultimate question in this case is whether it's supported by Outlook, which I don't think it is.. –  nickpish Aug 11 at 21:01
    
@nickpish SVG won't work in Outlook, that's why I mentioned the fallback mechanism. Outlook will gladly support CSS that renders the original image in place of the SVG. And, as far as I'm aware, nobody likes Outlook on iOS (as in, they'll use it if they have to, but...). –  phyrfox Aug 11 at 21:30
    
Got it-- I'll definitely look into the link you provided; that could be the answer. Thanks phyrfox. –  nickpish Aug 11 at 21:35
    
Although you shoudn't set HighDPI equal to iOS devices... There are more and more modern devices (Smartphones, tablets, laptops, desktops) with higher density and icon scaling, resulting in blurry images! –  Falco Aug 12 at 8:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.