: Email signature hell--How to include a logo image and have it stay sharp? I found a couple useful threads on this forum with respect to the issues posed by (displaying) images in email signatures--

@Voss6371140

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!

Vote Up Vote Down

@Odierno310

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

Vote Up Vote Down

@Kaufman565

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.

Vote Up Vote Down

@Becky351

Technical solutions could be:


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

Vote Up Vote Down

@Welton168

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:
blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/

Vote Up Vote Down