Retina（HiDPI）スプライトシート：2xと3xサポート

Retinaスプライトシート

モダンデバイスは高ピクセル密度ディスプレイ（Retina、HiDPI）を持ち、各CSSピクセルが2、3、または4つの物理ピクセルに対応します。標準スプライトシートはブラウザが画像をアップスケールするため、これらのディスプレイではぼやけて表示されます。

問題

2x Retinaディスプレイでは：

• 32x32pxのCSS要素は64x64物理ピクセルを占める
• 32x32pxの画像は64x64物理ピクセルに引き伸ばされる
• 引き伸ばしにより目に見えるぼやけが発生

解決策：2xスプライト

2倍の解像度でスプライトシートを作成し、background-sizeでスケールダウン：

/* 標準スプライト */
.icon {
  width: 32px;
  height: 32px;
  background: url('sprites.png') no-repeat;
}

/* Retinaスプライト */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .icon {
    background-image: url('sprites@2x.png');
    background-size: 256px 128px; /* 実際の画像サイズの半分 */
  }
}

background-sizeの動作

キープロパティはbackground-sizeです。背景画像の表示サイズをブラウザに指示します：

• sprites.pngは256x128pxで、256x128pxで表示（1:1）
• sprites@2x.pngは512x256pxで、256x128pxで表示（2:1スケールダウン）

同じCSSエリアに2倍の物理ピクセルの詳細が詰め込まれます。background-position値はCSSピクセル空間で動作するため変更不要です。

モダンな代替：image-set()

.icon {
  background-image: image-set(
    url('sprites.png') 1x,
    url('sprites@2x.png') 2x,
    url('sprites@3x.png') 3x
  );
  background-size: 256px 128px;
}

image-set()関数により、<img>のsrcsetと同様にブラウザが適切な解像度を自動選択できます。