Downsample (vs) 2X for retina images?

[Rugg]

Hello everyone,

I’m looking at 2 different methods for displaying Hi-Res icons (png) for retina displays. Both methods work properly, but I’m curious if there is a preferred practice for this.

EDIT: I’m leaning towards the second method because it will guarantee 1:1 pixel mapping as apposed to downsampling calculated by the browser.

Method 01 One image (80×80) downsampled to (40×40) using background-size property

.icon {
      background:  url(icon80.png);
      background-size:  40px 40px;
 }

Method 02 Two images (40×40) and (80×80) using min-device-pixel-ratio property to target retina screens.

.icon {
      background:  url(icon40.png);
      background-size:  40px 40px;
 }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

     .icon { background:  url(icon80.png); }

 }

Suggestions are welcome. Thank You.

[Ed]

Downsampling isn’t ideal, because it means users on a non-high DPI screen have to download an image twice the size they’ll view it at.

That means it’s slower for them and essentially you’re punishing them for not having a non-high DPI display… Don’t do that.

[Author]

Posts