Safari and retina images

Every iOS app developer, and last time Mac OS X app developer, knows that it's not enough to prepare image in one resolution. Now we need 4 times greater (2 times for every dimension) images that can be displayed on Retina displays. But what about websites? These devices also display websites and most of them just doesn't look perfect. And that's right, they also should have 2 version of every image. How to set them? The solution is quite simple. We have to set alternate image using -webkit-image-set function. The following code shows an example that says everything:

.aClass {
    background: url(image.png);
    background: -webkit-image-set(url(image.png) 1x, url
(image_2x.png) 2x);

}

It's really important to define background the traditional way, because not every webbrowser recognize -webkit-image-set function.

To work with retina images more productively, it's good to use a tool to resize images automatically. I recommend Sizes app, because it alows you to use different suffix (like _2x) instead of @2x and makes image resizing really simple.

More details you can find in Safari Development Library.