High-pixel density displays are becoming more and more common, but an increase in pixels per inch can make small images look fuzzy and unfocused. Fabio has a simple way to avoid using ugly images in emails:
Double the size of the image, and then constrain its width with either CSS or the width attribute on the img tag. The result is an image that maintains its sharpness on new device screens and works across many email clients.
Here's what our blog update header looks like with 24x24px icons and a 150x40px logo, viewed on a Retina display:
Here's the same header, with the image sizes doubled to 48x48 and 300x80, and constrained to their original sizes on the code side. Much clearer:
|