Retinaおよび2xプレースホルダー画像
Retinaディスプレイ用の高DPIプレースホルダー画像を作成。デバイスピクセル比（DPR）、2x/3x画像生成、HiDPIスクリーンでの鮮明なレンダリングのベストプラクティスを解説。
Technical
詳細な説明
Retinaおよび2xプレースホルダー画像
高DPIスクリーン（Apple Retina、Samsung AMOLED、ほとんどの最新スマートフォン）を持つ最新デバイスは、CSSピクセルサイズの2倍または3倍で画像を表示します。
デバイスピクセル比（DPR）の理解
| DPR | CSSピクセルあたりの物理ピクセル | 一般的なデバイス |
|---|---|---|
| 1x | 1:1 | 古いモニター、一部のノートPC |
| 2x | 4:1 (2×2) | MacBook Retina、iPhone、iPad |
| 3x | 9:1 (3×3) | iPhone Pro Max、プレミアムAndroid |
2xプレースホルダー画像の生成方法
2xスクリーンで600×400 CSSディスプレイサイズ用の鮮明なプレースホルダーを作成するには：
- 寸法を2倍に: 1200×800ピクセルで生成
- 半分のサイズで表示: CSSまたはHTML
width/height属性で600×400に制限 - ブラウザのレンダリングエンジンが1200×800画像を600×400 CSSピクセルに縮小し、余分なピクセルデータを鮮明さに使用
実践ガイドライン
- 最低でも常に2xを生成 — モバイルデバイスの85%以上が2x以上のDPRを持つ
- 3xはオプション — 2xと3xの視覚的な違いはほとんどのコンテンツで最小限
- SVGは問題全体を回避 — SVGプレースホルダーはDPRに関係なくネイティブ解像度でレンダリング
ユースケース
モバイルおよび最新ノートPCユーザーをターゲットとするWebサイトやアプリを構築する開発者は、レスポンシブ画像実装がHiDPIスクリーンで鮮明なビジュアルを提供し、1xスクリーンで不必要に大きなダウンロードを行わないことをテストするために2xプレースホルダー画像が必要です。