Retina (HiDPI) Sprite Sheets: 2x and 3x Support

Retina Sprite Sheets

Modern devices have high pixel density displays (Retina, HiDPI) where each CSS pixel maps to 2, 3, or even 4 physical pixels. Standard sprite sheets appear blurry on these displays because the browser upscales the image. Retina sprite sheets solve this by providing higher-resolution source images.

The Problem

On a 2x Retina display:

• A 32x32px CSS element occupies 64x64 physical pixels
• A 32x32px image is stretched to fill 64x64 physical pixels
• The stretching causes visible blurriness

The Solution: 2x Sprites

Create sprite sheets at double the resolution and use background-size to scale down:

/* Standard sprite */
.icon {
  width: 32px;
  height: 32px;
  background: url('sprites.png') no-repeat;
}

/* Retina sprite */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .icon {
    background-image: url('sprites@2x.png');
    background-size: 256px 128px; /* Half of actual image dimensions */
  }
}

How background-size Works

The key property is background-size. It tells the browser the display dimensions of the background image:

• sprites.png is 256x128px, displaying at 256x128px (1:1)
• sprites@2x.png is 512x256px, displaying at 256x128px (2:1 scale-down)

This means 2x as many physical pixels of detail packed into the same CSS area. The background-position values remain unchanged because they operate in CSS pixel space.

Naming Convention

sprites.png      — Standard (1x)
sprites@2x.png   — Retina (2x)
sprites@3x.png   — Super Retina (3x)

Creating Retina Sprites

1. Design icons at the highest resolution needed (e.g., 96x96 for 3x of 32x32)
2. Generate the sprite sheet at full resolution
3. Create scaled-down versions for 1x and 2x
4. Use the same grid layout and proportional padding at each resolution

Calculation

Property	1x	2x	3x
Icon design size	32px	64px	96px
Padding	2px	4px	6px
background-size	272px auto	272px auto	272px auto
Actual image width	272px	544px	816px

Note: background-size is always the 1x dimensions because it defines the CSS display size.

Modern Alternative: 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;
}

The image-set() function lets the browser choose the appropriate resolution automatically, similar to srcset for <img> elements.