How to Place a Logo in Your Email Signature that Remains Sharp on a Retina Display.



Making a logo in your email signature look crisp on Retina screens and across all email clients should be simple, right? Not so much.

What might be considered a simple task like placing your logo in your email signature becomes a bit trickier when you realize it appears pixelated and blurry on Retina screens. After some research, trial and error and then more research we finally discovered a solution that works. Since we couldn't find this solution anywhere else on the internet we decided to post it ourselves. Hopefully this benefits the well being of everyone else who's currently pulling their hair out over this seemingly minute detail.

One thing to note is that this solution requires you to be using an email client that allows you to insert HTML code into your email signature.

So here goes...

  • Step 1: Determine the size you want your logo to appear in your email.
  • Step 2: Save your logo as a JPG or PNG at twice the size you want it displayed. For example, if you want your logo to display at 200 pixels wide x 50 pixels high, then save it out at 400 pixels wide x 100 pixels high. This will allow for a higher pixel density on Retina screens.
  • Step 3: Place your logo file online so you can link to it. Sample link: http://www.yourwebsite.com/yourlogo.png
  • Step 4: Using some simple code tell the email clients at what size to display your logo.
    Code: <img src="http://www.yourwebsite.com/yourlogo.png" style="width: 200px; max-width: 200px;" width="200">

Note: Do NOT specify the height, it should scale automatically. Also notice we did NOT put "px" after the last 200. When using HTML attributes, opposed to styles, you don't include the "px".

Because different email clients interpret HTML differently the code appears redundant but in our experience it's all necessary to make your logo display properly across multiple platforms.

We've tested this in MacMail (Desktop & Mobile), PostBox, Outlook & Gmail and it works perfectly. None of the other solutions we found on other websites worked across all email clients. We hope this helps anyone else that's dealing with this problem!

And while this may appear to be a small problem to some we feel like crisp graphics are essential to looking your best for current and potential clients!