Retina and 2x Placeholder Images

Retina and 2x Placeholder Images

Modern devices with high-DPI (dots per inch) screens — Apple Retina, Samsung AMOLED, and most modern smartphones — display images at 2x or 3x the CSS pixel size. Without high-resolution images, placeholders (and final images) appear blurry on these screens.

Understanding Device Pixel Ratio (DPR)

The device pixel ratio is the number of physical pixels per CSS pixel:

DPR	Physical Pixels per CSS Pixel	Common Devices
1x	1:1	Older monitors, some laptops
2x	4:1 (2×2)	MacBook Retina, iPhone, iPad, most phones
3x	9:1 (3×3)	iPhone Pro Max, premium Android

How to Generate 2x Placeholder Images

To create a sharp placeholder for a 600×400 CSS display size on a 2x screen:

1. Multiply dimensions by 2: Generate at 1200×800 pixels
2. Display at half size: Use CSS or HTML width/height attributes to constrain to 600×400
3. The browser's rendering engine scales the 1200×800 image down to fit 600×400 CSS pixels, using the extra pixel data for sharpness

Common Retina Size Pairs

Display Size (CSS)	1x Image	2x Image	3x Image
150×150 (avatar)	150×150	300×300	450×450
300×250 (ad)	300×250	600×500	900×750
600×400 (card)	600×400	1200×800	1800×1200
1200×630 (OG)	1200×630	2400×1260	N/A

Implementation with srcset

<img
  src="placeholder-600x400.png"
  srcset="
    placeholder-600x400.png 1x,
    placeholder-1200x800.png 2x,
    placeholder-1800x1200.png 3x
  "
  width="600"
  height="400"
  alt="Placeholder"
/>

Practical Guidelines

• Always generate 2x at minimum — Over 85% of mobile devices have 2x+ DPR
• 3x is optional — The visual difference between 2x and 3x is minimal for most content. Only create 3x for critical brand imagery
• SVG avoids the entire problem — SVG placeholders render at native resolution regardless of DPR, making them ideal for simple placeholders
• Consider file size trade-offs — A 2x image contains 4x the pixels, roughly doubling the file size. Use JPEG compression for photographic content to manage sizes