A client had asked me to design some graphics for use in an e-mail signature. Soon after I delivered the graphics, I was told “they look terrible”. That’s definitely not what any designer wants to hear. Unfortunately it is hard to improve until you understand just what is so terrible. When I asked the follow-up questions, I was told it was because the graphics were blurry. Now at least I had enough information to research the real problem.

I finally learned the client had just installed some new Macs with “retina” displays. That is just one of Apple’s fancy names for a screen with a very high resolution. If these monitors display the graphics at the size used on a regular screen, the graphics are very small and hard to see. To compensate, the operating system or the application will scale the graphics to a larger size. The graphics themselves are not blurry as designed, it is the scaling that causes them to look blurry. In the graphic shown above right, you’ll see three variations of a Facebook icon. On the left, it is 48×48 pixels. The middle displays the same 48×48 pixel icon scaled to 96×96 pixels as on a Retina display. The rightmost icon is also 96×96 pixels but it was output to 96×96 so it looks much better.

Note that the MacOS has built-in features for controlling how scaling is used in various situations. Windows 8 also has these type of features with Windows 10 getting even more scaling features. It is also a more common feature in popular software. So the situation is improving, but that improvement hasn’t come to e-mail yet.

For this specific situation, I could create the same graphics with a higher number of pixels. This means the graphics have a larger file size and that isn’t good for e-mail. It also means they will look really big on typical screens. But the worst part is that the graphics would still be scaled and look blurry. Another potential solution would be to use CSS (cascading style sheet) formatting to take the larger graphic and scale it to a smaller size. While this would theoretically work, many e-mail clients ignore CSS formatting.

The best answer today is simply to ignore the issue as the number of people with the higher-resolution screens is fairly small. As that number increases, the operating systems and applications running on those computers will improve.

Another potential solution is for graphics to be vector based so they can scale to the exact size needed. A great idea, but there is no perfect vector format to use for Web graphics and definitely not for e-mail. SVG is popular, but far from universal.

For Web graphics, ideas have been proposed that allow multiple resolutions of a bitmap to be supplied and the correct size will be chosen based on the screen viewing the graphic. This situation is likely to be improved greatly in the next year, but there is no perfect solution today. It also wouldn’t address e-mail which was the problem in this case.