CSS for high-resolution images on mobile and retina displays

My website images look blurry for users with retina displays. (For example, on the Retina MacBook Pro).

How do I serve high-resolution images to visitors with retina displays, but standard-sized images to everyone else, while keeping the image the same apparent size?

Answers


In your HTML, create a <div> like so:

<div class="ninjas-image"></div>

And in your CSS, add:

.ninjas-image {
  background-image: url('ninja-devices.png');
  width: 410px;
  height: 450px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .ninjas-image {
    background-image: url('ninja-devices@2x.png');
    background-size: 410px 450px;
  }
}

The magic here is in the CSS @media query. We have a double-sized image (ninja-devices@2x.png) that we sub-in when the device reports a ‘device pixel ratio’ of 1.5 (144 dpi) or more. Doing it this way allows you to save on bandwidth by delivering the original, smaller image to non-retina devices, and of course it looks great on retina devices.

Note:

This answer was updated in 2016 to reflect best-practice. min-device-pixel-ratio did not make it in to the standard. Instead, min-resolution was added to the standard, but desktop and mobile Safari don't support it at the time of writing, (thus the -webkit-min-device-pixel-ratio fallback). You can check the latest information at: http://caniuse.com/#feat=css-media-resolution.


We've been using the following to handle multiple cases where the ratio is 1.5 or higher - this takes more devices and browsers into account:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {

We have our entire site Retina enabled: http://www.embraceware.com/


Need Your Help

Avro GenericRecord cannot be cast to Java.util.Collection issue

avro

I am quite new at Avro. I got an Exception at line "writer.write (datum, encoder); " in following code when I try to serialized my data.

Return 1 result on multiple line join

sql tsql

I have an orders and order lines table and I want to be able to select a few of the records from the order table into a temp table. This is easy, the hard part is that I want to also select into th...