Apple's MacBook Pro with Retina display in a glass case at the Worldwide Developers Conference. Photo: Jon Philips/Wired

The high-resolution web isn’t just for iPads anymore.

Apple is bringing high-resolution screens to the laptop world with the debut of the new MacBook Pro. With over 5 million pixels on the screen, Apple’s rebirthed workhorse, announced Monday at WWDC, offers double the screen resolution of most laptops.

That’s awesome news for anyone upgrading to a new laptop, but like the high-resolution iPads before it, the arrival of the Retina-equipped MacBook Pro is sure to cause some new dilemmas for web developers who’d like to offer a better experience for high-resolution screens.

These screens aren’t going to break the web; pixels are doubled, so Retina’d visitors will see the same layout in the same physical dimensions as non-high-res visitors. But the increased pixel density means you can serve up sharper, better-looking graphics. And there is a small downside — ordinary graphics, particularly icons and logos, can look fuzzy on high-resolution screens.

There are a couple of solutions to this problem. You can use icon-fonts instead of image sprites. Most fonts will scale and render crisply on both high-res and traditional screens. Another tactic is to switch your icons and logos to SVG files. After all, SVG stands for Scalable Vector Graphics, which is pretty much exactly what the doctor ordered for high-res screens. The main problem with the SVG format is that not every web browser supports it. Most modern browsers do — the pain points are Internet Explorer 8 and below, and Android 2.3 and below. How much that affects your site will depend on your audience. Check your visitor stats and choose accordingly.

Icon fonts and SVG offer future-friendly solutions, but if you just want a quick fix to make your site’s logo look sharp on high-res screens there’s a third way: using media queries to swap in bigger images. To make this work, just create a version of your logo that’s twice as big and use a media query to target high-res screens.

Suppose you have your logo in a tag with the class “logo” and the actual size you want the image to appear at is 100px by 100px. Start by creating a copy of your logo that’s 200px by 200px.

Next, here’s what you’d add to your stylesheet to target high-res displays:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .logo {
        background: url(/path/to/my/highreslogo.png) no-repeat;
        background-size: 100px 100px;
        /* rest of your styles... */
    }
}

The key to this code is the background-size rule, which tells the browser to scale the image down. The other thing to note is that all browsers currently require a prefix in the media query, and Opera requires the ratio be expressed as a fraction. The one caveat to this approach is that the high-res MacBook will apparently offer some options for how its plethora of pixels are used. You may want to experiment with different min-device-pixel-ratio options to see which works best in the various display settings.

So, there are three ways to handle graphics served out of your stylesheet, but what about good old inline images served up with an <img> tag? Well, that’s more complicated, and in fact there is no ideal solution yet. The WHATWG and the W3C are working on standardizing a solution, but all we have right now are some (often clever and useful) hacks, each with its own pluses and minuses.

For a primer on serving up different images based on screen size, see our earlier write-up on responsive images. It’s also worth reading up on Adaptive Images.

If you’re worried about legacy sites suddenly looking very bad, fear not. They won’t look any worse than they do on the most recent iPad. The sky isn’t falling, it’s just getting bigger. Sure, your images might be a little less than crystal-clear on Retina displays — particularly logos and icons, while photos will generally look fine — but layouts and structure will continue to render as they always have.