HiDPI displays are the future, so it’s a good idea to include 2x images in themes and admin area modifications going forward. It’s actually really easy to do, and will only get easier as more browsers and operating systems begin to support it.
At the time of this writing, the audience is limited mostly to Safari 6 and Chrome Canary 21 on a Retina Macbook Pro, or Safari on a Retina iPad/iPhone, but that’s no excuse to not be thinking ahead. We’ve already updated much of the WordPress.com and VIP admin areas, and WordPress core icons are quickly being updated also.
For now, the following approach works really well. It applies only the CSS rules it needs, without duplicating too much effort.
#your-image {
background-image: url('/path/to/image.jpg');
background-position: XPOSpx YPOSpx;
background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
#your-image {
background-image: url('/path/to/image-2x.jpg');
background-size: 1xWIDTHpx 1xHEIGHTpx;
}
}
The first bit sets the 1x background image, position, and forces no-repeat (which you may or may-not need.) The second bit only applies to a pixel-ratio of 1.5 or greater, switches the image to a 2x variant, and sets the background-size to the 1x images height and width. These rules are what allow the image to scale down if need-be.
The only caveat to this approach is the end-user downloading both the 1x and 2x images. Short term, we might have a cookie available to identify the device’s pixel ratio. This only helps inline images (or ones loaded via PHP) and not ones loaded via CSS. Long term, browser support will improve and no hacks will be necessary.
If you need help identifying non-2x images, check out this page in the Mac Development Library. OS X comes with a flag to make all non-2x images show up in an annoying pink hue. It’s really annoying, which is great motivation to update things. Normal 1x scaled images are already pretty annoying, so I haven’t used it in day-to-day retina’izing. That said, it’s a great tool if you want to audit images without looking at the file system and going down the list.
Speaking of the file system, it’s a great idea to crunch the 2x images as much as possible to keep their file-sizes down. Adobe apps make this really easy with the Save for Web option, which you should already be familiar with.
One final tip for the designers and illustrators. Images that are specifically designed with 2x in mind are what will really make your sites and admin area modifications look polished and refined. Simply resizing an image or using a doubled-up version will yield the same ugly results as trying to make a 16px favicon out of a 128px PNG. In other words, make sure to design themes with twice the dimensions of a normal site, so your images are already 2x ready.
That about wraps this up. No doubt we’ll need to revise this as technologies and approaches change. Let us know if something better comes along, and we’re happy to include it here.
WordPress VIP Lobby 