Retina Display Email Signature

Question

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?

Answer 1

Use SVG images.

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

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?

Answer 2

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.

Answer 3

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.

Answer 4

Follow Geoff Graham's guide on SVG support in HTML emails.
https://css-tricks.com/a-guide-on-svg-support-in-email/

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;
}