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.

  • 6
    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
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 at 9:43
  • @font-face is unreliable in email clients as well.
    – Scott
    Commented Aug 11, 2014 at 9:45

5 Answers 5


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:


  • 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
    Commented Aug 11, 2014 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
    – KSPR
    Commented Aug 11, 2014 at 10:08
  • Good point-- that chart is very helpful, thanks.
    – nickpish
    Commented Aug 11, 2014 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...)

  • 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
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 at 11:34
  • @nickpish exactly! This is used on many modern Websites (mostly mobile) so there are many tutorials around.
    – Falco
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 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.

  • 1
    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
    Commented Aug 11, 2014 at 21:01
  • 1
    @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
    Commented Aug 11, 2014 at 21:30
  • 1
    Got it-- I'll definitely look into the link you provided; that could be the answer. Thanks phyrfox.
    – nickpish
    Commented Aug 11, 2014 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
    Commented Aug 12, 2014 at 8:34

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


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!

  • 1
    That's one email client out of countless in total. Have you tested this method in multiple other email clients? Commented Mar 16, 2017 at 4:11
  • 1
    Why would ppi do anything?
    – joojaa
    Commented Mar 16, 2017 at 7:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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