Scribd
Upload
0 views

High DPI Monitors, Resolution Independance, The Web, and You CSS-Tricks - CSS-Tricks

The document discusses the challenges of designing for high DPI monitors, highlighting that traditional 72 DPI standards are becoming outdated as monitors with higher resolutions become common. It emphasizes the need for resolution independence in web design, suggesting that content should be scalable and zoomable to ensure readability across different devices. The article also mentions the potential of SVG as a solution for image scaling issues, while acknowledging the complexities involved in implementing such changes across various browsers.

Uploaded by

480
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

High DPI Monitors, Resolution Independance, The Web, and You CSS-Tricks - CSS-Tricks

The document discusses the challenges of designing for high DPI monitors, highlighting that traditional 72 DPI standards are becoming outdated as monitors with higher resolutions become common. It emphasizes the need for resolution independence in web design, suggesting that content should be scalable and zoomable to ensure readability across different devices. The article also mentions the potential of SVG as a solution for image scaling issues, while acknowledging the complexities involved in implementing such changes across various browsers.

Uploaded by

480
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

High DPI Monitors, Resolution Independance, The Web, and You | C... about:reader?url=https%3A%2F%2Fcss-tricks.com%2Fhigh-dpi-moni...

css-tricks.com

High DPI Monitors, Resolution Independance,


The Web, and You | CSS-Tricks
4-5 minutos

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

1 de 2 11/04/2024, 01:57
High DPI Monitors, Resolution Independance, The Web, and You | C... about:reader?url=https%3A%2F%2Fcss-tricks.com%2Fhigh-dpi-moni...

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?

2 de 2 11/04/2024, 01:57

You might also like