Safari brings high resolution to the Web

Ever used a high resolution screen? I mean high resolution as in “more and smaller pixels stuffed into the same physical area”, not just the raw pixel count—higher DPI (dots per inch). If you are using a reasonably new Wintel laptop chances are that your screen has a higher DPI than the 72 DPI or 96 DPI that used to be the most widely used resolutions.

None of the screens I use on a regular basis are of higher than normal resoulution, so I haven’t given it much thought. But the other day I used a colleague’s new laptop to take a look at a prototype of a website we’re building, and everything was tiny. Sure, increasing text size helps, but only for the text. The images are still tiny.

As screen manufacturers get better and better at squeezing a larger number of pixels into the same physical space, this will only become more obvious, and it’s clearly something web professionals need to keep in mind. But it’s not only about us, it’s also about web browser vendors. They need to provide their users with effective ways of zooming the page, which in its current implementations (Opera, IE7) does not treat images very well. Not as well as they could be treated anyway.

To solve this problem and allow images to actually look better on high DPI screens, the WebKit team at Apple are proposing methods of using higher resolution images only for those devices that can actually take advantage of the extra information. The methods involve either using SVG images or using a combination of pixel-based image formats and the CSS3 property background-size or the ::marker pseudo-element (also CSS3).

To make it easier to offer different DPI images depending on the capabilities of the device being used to view the site, the WebKit team are also proposing an extension to CSS3 Media Queries: the CSS pixel scaling factor.

Dave Hyatt provides more detailed descriptions in High DPI Web Sites and High DPI (Part 2). He has also posted a follow-up article on CSS Units, where he explains how CSS pixels actually work. You may be surprised to learn that a CSS pixel does not equal a device pixel, contrary to what many people (including myself) have made the mistake of believing.

Being able to provide users of high DPI screens with better looking images sounds good, so I’ll be keeping an eye on how this develops.

Posted on June 12, 2006 in Browsers, CSS