: Retina Display Email Signature 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

@Martha945

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.

Vote Up Vote Down

@Fox8063795

Follow Geoff Graham's guide on SVG support in HTML emails. 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;
}

Vote Up Vote Down

@Carla748

Use SVG images.
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?

Vote Up Vote Down

@Radia289

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.

Vote Up Vote Down