Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

2 Answers 2

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

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

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.