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 */
height: 100% !important;
width: 100% !important;
/* Hide this everywhere, except for those that can’t read this code */