MBP Retinaだけ2倍の画像を出すみたいなのをCSSだけで出し分ける

Retina ディスプレイ用に 2 倍の画像出すとき、 Media Queries でこういう感じに書くと思う。

// デバイスにかかわらず Retina のときに出す
@media
(-webkit-min-device-pixel-ratio: 2),
(            min-resolution: 2dppx) {
    #azunyan {
        background-image: url('images/[email protected]');
    }
}

↑ これだとデバイスにかかわらず Retina のとき 2 倍の画像になるけど、スマートフォンとか 3G 回線で巨大な画像を読み込むのは重くてつらい感じになると思う。

そこで、

• ぜんぶの Retina デバイスで出す
• タブレット以上のとき出す
• MacBookPro Retina のときだけ出す

の 3 パターンの Media Queries を用意することで、画像を読み込むファイルサイズの節約ができる。 CSS だけで出し分けできたっぽい。こういう感じで書いた。

// デバイスにかかわらず Retina のときに出す
@media
(-webkit-min-device-pixel-ratio: 2),
(            min-resolution: 2dppx) {
    #azunyan {
        background-image: url('images/[email protected]');
    }
}

// iPad 以上のときに出す（スマートフォンには出ない）
@media
(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px),
(            min-resolution: 2dppx) and (min-device-width: 768px) {
    #azunyan {
        background-image: url('images/[email protected]');
    }
}

// MBP Retina のときだけに出す
@media
(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
(            min-resolution: 2dppx) and (min-device-width: 1025px) {
    #azunyan {
        background-image: url('images/[email protected]');
    }
}

使いどころとしては、レスポンシブデザインのサイトで有用だと思う。スマホでも PC でもサイズが変わらない画像（ロゴとか）は全部の Retina デバイスで出すのがよい。一方、写真とか、ちょっと大きめの画像はレスポンシブデザインにするときスマホの幅（300px くらい）に縮めると思う。そのような、元の画像で充分高解像度な場合はわざわざスマホで @2x にする必要はないから MBP Retina のときだけ @2x の画像を適用したらいいと思う。