We all use 72 DPI as a defacto standard when creating web graphics (actually, “PPI” is the more appropriate acronym but rarely used). This used to be the actual resolution of monitors, but slowly over the years this has ceased to be the case. Take my iMac. The screen, straight across horizontally, is 22.5″ and has 1920 pixels. That actually comes out to about 85 pixels per inch, not 72. When we design and test website all on the same computer/monitor, everything looks fine, just like we designed it. But when we hop over to a different computer that has a different resolution, there can be dramatic differences!
When viewing a design on a monitor with a higher resolution the design will look smaller.
When viewing a design on a monitor with a lower resolution the design will look bigger.
Say I design a nice website that is 800px wide on my 85 PPI monitor. Then I view the same exact design on a monitor with 100 PPI. Those same 800px take up less physical inch-age on the higher resolution monitor because the pixels are literally smaller. There are more of them packed into that same inch as on my original monitor. The same is true in reverse, if I were to go look on a 72 PPI monitor the design would appear to grow.
This is no longer fantasy or speculation. Reader Denzil Rowe pointed me to a recent article on Apple Insider where Apple is talking about how this issue is coming to the operating system itself. It’s not only the web that faces these problems, but literally anything that appears on your monitor.
Some new Macs are shipping with monitors above 100 PPI. The difference between 100 PPI and 72 PPI is quite dramatic. Anything that is borderline-too-small when looking at a design on a 72 PPI monitor will likely be totally unreadably small on a 100 PPI display.
So what is the solution? Short term, just be aware of the difference and don’t design things too small if you are still on an older 72 PPI monitor. Long term, resolution independence.
Dave Hyatt wrote extensively on the subject a few years back.
The natural way to solve this “high DPI†problem is to automatically magnify content so that it remains readable and easily viewable by the user. It’s not enough of course to simply pick a pleasing default, since the preferences of individuals may vary widely … The full solution to this problem therefore is to allow your user interface to scale, with the scale factor being configurable by the user. This means that Web content has to be zoomable, with the entire page properly scaling based off the magnification chosen by the user.
In other words, zooming is part of the solution, and we’ve seen this as a trend in all recent versions of major browsers. The problem with zooming, as is abundantly clear the first time you ever do it, is that images look like crap when you zoom them larger than they were created.
SVG (Scaleable Vector Graphics), is the likely contender for an image format that will help us battle scaling problems. But with new formats arises all the typical problems. Will all browsers support it, and in the same way? Does the CSS spec need to change to accommodate it? How will it degrade? And on and on.
Dave’s article shows code samples of how we might have a “high resolution” version of our sites for browsers that support it:
div {
background: url(tiger-low.png);
background: url(tiger-high.png) (100px 100px);
}
The future is upon us! Although it feels like it will still be a while before the mainstream web is ready for day-to-day designers to be worrying about this stuff.
On a related note, did you know that pixels in CSS aren’t necessarily equal to a screen pixel?
Loading ...