I just got my brand-new Macbook Pro with Retina Display last friday… and it is awesome! It comes after about 9 months of life-support for my old, 2007 MBP, which included bolting the hinges back together and baking the motherboard to re-solder the GPU.

One of the new macbook’s most impressionable features is, of course, its retina display: pixels are truly indistinguishable, even on high-contrast diagonal lines. This wonderful new era of High-DPI screens comes with a cost, though. Because Apple (ingeniously) uses pixel-doubling (and pixel scaling at non-default resolutions) to give familiar screen real estate, most web images look pixelated. Seeing as I am both an in-house and freelance web developer, I decided I needed my sites fixed straight-away! The problem was: I don’t particularly like any of the available solutions (all designed for iOS). The only one I found particularly clever was Retina.js, but even there, I avoid client-side preprocessors like “LESS CSS” and am not a fan of all the extra HTTP requests.

It seems certain that the new, ultra-high-resolution internet is going to be heavily dependant on things like SVG, <canvas>, and robust CSS; at the same time, raster images aren’t going anywhere. To deal with those, we should really get used to hand-coding multiple versions where and when they are necessary. My immediate answer (take it or leave it!) that I used for BioLogos is very simple:

For <img/>’s

In each image tag, I added a data-2x-src attribute with the URL of a double-resolution image. For example:

[html]
// notice the use Apple’s standard "@2x" notation
// make sure you have height and width set!</pre>
<img src="/images/logo.png" alt="Logo" width="325" height="73" data-2x-src="[email protected]" />
<pre>
[/html]

Then, I added some jQuery:

[js]
// replaces ‘src’ with ‘data-2x-src’
$(function(){
if(window.devicePixelRatio > 1.5) $(‘img[data-2x-src]’).each(function(){$(this).attr(‘src’,$(this).attr(‘data-2x-src’));});
});
[/js]

For CSS Backgrounds

There are two strategies here:

  1. Best Option: If you can get an SVG version of your image, just use that!
  2. If you can’t, then add the high-res version behind a media query in CSS:

[css]
#logo {
background-image: url(‘/images/logo.png’);
/* make sure this is the size of the original image */
background-size: 200px 100px; -webkit-background-size: 200px 100px; -moz-background-size: 200px 100px; -o-background-size: 200px 100px;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url(‘[email protected]’);
}
}
[/css]
And here’s the before/after:

…eventually I’ll get around to retinafying this blog, my most neglected project that ever went live!