要点：縮小時の線消失や色にじみの原因にも。 本ページでは、現場での判断軸/実装/検証までをまとめます。
定義
サブピクセルレンダリングは見た目の再現性/可読性を左右するスタイル設計です。画像/フォント/密度との総合設計が必要です。
なぜ重要か
端末差・密度差でにじみ/消失が起きます。補間/解像度の選択が可読性を左右します。
実務での活用（判断基準付き）
- 密度と補間の組合せで可読性を担保。
- image-set/unicode-rangeで無駄な配布を回避。
- 最小線幅/strokeで縮小時の視認性を確保。
実装例
/* ドット絵はにじみを回避 */
.pixelart { image-rendering: pixelated; }
/* Retina向け背景 */
.hero { background-image: image-set("bg@1x.webp" 1x, "bg@2x.webp" 2x); }
検証と失敗例
- 計測軸: 拡大縮小の視覚破綻・フォント/画像切替の閾値・Retina表示での可読性。
- 失敗例: 補間ミスマッチでにじみ / unicode-range過多でリクエスト爆発。
- 判断軸: 主要端末でUIの線/文字が鮮明・帯域/描画コストが最小。
チェックリスト
- デバイス密度と補間の選択が画像種別に適合しているか
- image-set/unicode-rangeで無駄なアセットを配らないか
- Retina最小線幅やstrokeで可読性を担保したか
- 縮小/拡大時ににじみ/破綻が起きないことを比較確認したか