High resolution displays such as iPhone's Retina display and MacBook Pro with Retina display are already in web race. I personally feel that we should start making websites compatible for Retina displays as well.
Till now I knew the best way to optimise website graphics for high resolutions display as follows:
(min-device-pixel-ratio : 1.5)
With browsers prefixes of course. But I bet there are very few people who knows about image-set() function proposed in CSS4 specs and already supported in -webkit based browsers. It works as follows:
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
This syntax surely gives the hassle free code, now I am just waiting for this syntax to get in action across all browsers.