Retina Displays, High-Res Background Images

Retina displays, high-res background images

Do I need to double the size of the .box div to 400px by 400px to
match the new high res background image

No, but you do need to set the background-size property to match the original dimensions:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/box-bg@2x.png') no-repeat top left;
        background-size: 200px 200px;
    }
}

---

EDIT

To add a little more to this answer, here is the retina detection query I tend to use:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

- Source

NB. This min--moz-device-pixel-ratio: is not a typo. It is a well documented bug in certain versions of Firefox and should be written like this in order to support older versions (prior to Firefox 16).
- Source

---

As @LiamNewmarch mentioned in the comments below, you can include the background-size in your shorthand background declaration like so:

.box{
    background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}

However, I personally would not advise using the shorthand form as it is not supported in iOS <= 6 or Android making it unreliable in most situations.

Create background image for retina and non-retina displays

you don't need js for that, you can use css Media queries for retina:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

}

Media queries for iphone and ipad example

Serving high res images to retina display

Why setting for Retina

iPhone 4s, iPhone 5, iPad3, iPad4, Macbook 15", Macbook 13" all use Retina display.

Android also support high resolution display, as well as Windows 8(Lumia 920) as mentioned by @JamWaffles.

Adding high resolution support is good for user experience but it definitely add load for developer, as well as bandwidth for mobile. Somebody don't suggest doing that.(Peter-Paul Koch, see the bottom "further reading")

Breifing

There are two methods to implement this function. One is Javascript and the other is CSS. All current solutions are for Retina, but could extend to Android high resolution easily.

CSS solution is about Media Query and -webkit-min-device-pixel-ratio or -webkit-device-pixel-ratio

• Simple to use.
• Apply to all browsers.
• Disadvantage: Good for background. Harder for <img> tag

Javascript solution is about window.devicePixelRatio property.

• Advantage: Javascript could manipulate image source. So, if you are going to serve direct image instead of background, better to use Javascript
• Could not apply to all browsers but current support is good enough. See below for list.
• Need a bit more setting.

CSS Solution

For normal images, say an icon

.sample-icon {
    background-image: url("../images/sample-icon.png");
    background-size: 36px 36px;
}

For Retina, add those below

@media only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
    (min-resolution: 192dpi) /* Everyone else */ {
    .sample-icon {
        background-image: url("../images/sample-icon-highres.png");
        background-size: 18px 18px;
}

You can use min-resolution: 2dppx to replace min-resolution: 192dpi, for those who don't want to remember numbers

Note the difference:

1. Two different icons, one normal, one high res. High res icon is double size than normal one.
2. The background size. The later is half. But you need test it in your real use.

Resource:
+ http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
+ http://view.jquerymobile.com/master/demos/widgets/buttons/#CustomIcons

Javascript Solution

Use window.devicePixelRatio property to detect resolution.

if (window.devicePixelRatio >= 2) {
  alert("This is a Retina screen");
  //Do something to manipulate image url attribute
  //for example add `@2x-` before all image urls
}

Browser Support

Safari, Android WebKit, Chrome 22+ and on Android, Opera Mobile, BlackBerry WebKit, QQ, Palm WebKit,
Ref: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

For Android

Android device use 1.5 as high resolution instead of 2 in Retina.
http://developer.android.com/guide/webapps/targeting.html --#Targeting Device Density with CSS, #Targeting Device Density with JavaScript

Further Good Reading

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
"I’m not a big fan of serving special retina images because it makes the web too heavy — especially over a mobile connection. Nonetheless people will do it." -- Peter-Paul Koch

Update 2013-04-18 Update jQuery mobile link

Are both standard and high-resolution images loaded on retina displays when using css media selectors?

Only the high-res image is used in the final page. First the entire CSS style sheet is loaded, then the browser determines what it actually needs to display. The @media query referencing the high-res image will override the original instance of .icon for retina devices.

Retina Display background-size: cover

Make the images approximately the resolution of the device. You will likely want to adjust a bit for browser/webclip chrome so the final image size will be a bit different.

See Custom Icon and Image Creation Guidelines for more information.

Additional Background

Retina display devices have a devicePixelRation of 2 - which is the ration of physical pixels to device independent pixels. From quirks mode:

Dips are the abstract pixels that are used to feed information to the
width/height media queries and the meta viewport device-width. They
are best explained by taking a look at the difference between retina
and non-retina devices.

Taking the iPad as an example, if you were to set the viewport to device-width you would end up with (Safari always uses DIPS - see quirksmode):

               DIPS        Physical
               --------   ---------
non-retina:    768x1024    768x1024
    retina:    768x1024   1536x2048

You layout your markup based on DIPS but use images based on the physical pixels (x2 in the case of retinal displays).

Another way to look at this is: since the rule of thumb for retina is 2x the size of an non-retina image, use 2x (768x1024) for retina or: 1536x2048

Also, beware of the real-estate taken up by browser chrome. For example, the status bar takes up 20px from the overall screen.

Setting a Cover image responsive on high density displays

You can create a media query in CSS to manualy configure the background-image on retina displays (or other high-resolution screens).

See CSS-tricks.

Mediaquery retina displays:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

And more furute proof:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { ... }

---

Questions:

• What are media queries?
• What is DPI?
• What is device pixel ratio?

---

Also see this post for a same question/answer.

Replacing background image for higher quality one if user is on retina device

You can use the css media query

   device-pixel-ratio,
   min--moz-device-pixel-ratio,
   -o-min-device-pixel-ratio,
   -Webkit-min-device-pixel-ratio {
     …
   }

---

Related Topics