Is using the css3 'background-size' property sufficient for retina display?

Question

To be as succinct with styles as possible, I'd rather not use a media query stylesheet that is included if my page is viewed with a double-pixel-density device such as the iPhone 4.

That being said, would it be ok if I just did something like this?

.icon-1 {
  background-image: url('my-image-64px.png');  // This image is 64 x 64
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px 32px;
}

Would this work across the board without any drawbacks? Or should I do some sort of a media query for devices with a certain pixel density?

Answer 1

Yes it would. The only drawback is downloading an image that is much larger than it needs to be on non-retina displays. I would recommend that you have non retina images for everything in the main stylesheet (with background size set for all images), and include a retina stylesheet as necessary that overrides all image urls with links to retina sized images.

It's a bit more work, but people on slow edge cellular connections will thank you.

Oh, and your way will also downsample your image for you, which may or not be ok. If you have 1px wide lines (for example) in the image, it may not downsize in a way that you find pleasing. But for most types of images, it will probably be acceptable.

Answer 2

To answer your "media query for devices with certain pixel density", the answer is yes:

media='only screen and (-webkit-min-device-pixel-ratio: 2)