Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
    
Why is (inline) css not an option? – Yisela Apr 22 '13 at 21:11
    
"CSS is not an option." = then you can't target retina directly. – DA01 Apr 22 '13 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. – Derek Apr 23 '13 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 Apr 26 '13 at 22:39
    
You simply can not do this so it works everywhere. Email clients suck. – joojaa Apr 1 at 20:41
up vote 5 down vote accepted

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?

share|improve this answer
    
HTML emails are a living hell, most email clients don't even do CSS floats or background images... Here's a guy's test of SVG in HTML email (follow link then click through arrows). It only worked in Thunderbird, Apple stuff and Android 4.0 - didn't work in anything else. – user568458 Apr 29 '13 at 16:39
    
Alas, SVG no longer works in gmail since they implemented a transcoding proxy. – Beni Cherniavsky-Paskin Nov 3 '14 at 19:28

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.

share|improve this answer
    
Yeah, when creating signatures with gmail, inline CSS is not an option. If there is any sort of workaround, please let me know. – Joe Isaacson Apr 22 '13 at 22:41
    
@JoeIsaacson You can create gmail HTML signatures (video). Also, have you seen this SO question? Check the fist answer. – Yisela Apr 22 '13 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.

share|improve this answer

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;
}
share|improve this answer
    
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! – Kurt Apr 1 at 21:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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