Designing For Very High Resolution Screens – No Perfect Answers

February 24, 2015

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.

Scaled IconsI 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.

Post Discussion


Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like…

Business Improvement 2020

Boosting Your Business in the New Year and New Decade

How did you promote your business when 2010 rolled over on the calendar? Did you even have a business ten years ago? Maybe you were part of a different business. The same questions could be asked about where things stood even a year ago. Let's...

Read More

Seamless Textures Unleashed

Seamless Textures Unleashed Now on Facebook

Over the years, we've had a number of Web sites in different areas that were all managed on the Graphics Unleashed Facebook page. Two months ago we rolled out a separate Facebook page for Vehicle Templates Unleashed. Now we have created a...

Read More

Tech Disasters

Week of Tech Disasters and Solutions

The local weather was spectacular a couple of weeks ago and I wanted to take a day off to have some fun. So I planned a day of scuba diving that Friday to end the week on a high note. The diving went well, but the day before was the beginning of...

Read More

Foster D. Coburn III

Foster D. Coburn III built his first Web site in 1995 and he has been working exclusively in WordPress since 2013. He has used the Divi theme exclusively since 2015. Earlier in his career he was the author of 13 best-selling books on CorelDRAW and has been a contributor to numerous technology and graphics-related magazines. Foster has taken many projects, including this Web site, from the early design stage through to a finished piece. He has been a featured speaker at many graphics conferences.

Recent Posts

Pro WordPress Help

Graphics Unleashed Donations

Personal Info

Donation Total: $5