Our company uses gmail as the email client, and so our signatures are made up of text that can be edited in the text editor and images that have to be hosted on our server.

CSS is not an option.

Any idea on how I can prevent my email icons from showing up as blurry?

  • Why is (inline) css not an option?
    – Yisela
    Commented Apr 22, 2013 at 21:11
  • "CSS is not an option." = then you can't target retina directly.
    – DA01
    Commented Apr 22, 2013 at 22:12
  • 1
    I'm not sure why you(Joe Isaacson) are saying that inline CSS is not an option. I use gmail for work and for personal use, and both allow HTML and inline CSS.
    – user9427
    Commented Apr 23, 2013 at 21:49
  • Sure you need it? I, and many I know, use only Plain text email. Any HTML email is 99% spam. In plain text any image signature is just an annoying attachment.
    – Scott
    Commented Apr 26, 2013 at 22:39
  • You simply can not do this so it works everywhere. Email clients suck.
    – joojaa
    Commented Apr 1, 2016 at 20:41

4 Answers 4


Use SVG images.


Worth noting: SVG isn't supported in older versions of IE (8 and prior). I'm not sure how it renders in crappier email clients, either.

Maybe SVG with PNG fallback, because anything with a Retina display can probably show SVG.

Another option: Don't use an image in the email signature. Why is it a requirement?


To have an image render the same in desktop or retina, you need to have that image saved in double the size. And for this, you need to use css.

So if your is 50px x 100px, you will need to have a 100px x 200px and use:

<img src="icon_blog_100x200.png" style="width:50px; height:100px;" /> 

But because the image will still pixellate if the user zooms, you should probably save it in double or triple the size.

  • Yeah, when creating signatures with gmail, inline CSS is not an option. If there is any sort of workaround, please let me know. Commented Apr 22, 2013 at 22:41
  • @JoeIsaacson You can create gmail HTML signatures (video). Also, have you seen this SO question? Check the fist answer.
    – Yisela
    Commented Apr 22, 2013 at 22:57

Use a double size image and downsize it in the image tag. i.e. for a logo GIF that's 200x100 pixels use:

<img src="logo.gif" width="100" height="50">

The only downside is that non-retina users will be downloading a larger file than they need.


Follow Geoff Graham's guide on SVG support in HTML emails.

It explains using an SVG (which will render sharply on OS X/iOS, as well as many other places) and fallback image for emails, we adopted this in our email signature and it's been successful across the board.

He describes using an svg and a fallback

<!-- Image: SVG --> <img class="showy" width="0" height="0" src="my-image.svg"> <!-- Image: JPG --> <img class="no-showy" src="my-image.jpg">

Combined with the following CSS

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;

/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
  • Can you please add in your own words what is to do? Suppose the given link is broken then your link-only-answer is useless. Welcome to GD.SE!
    – Mensch
    Commented Apr 1, 2016 at 21:28

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.