現代のウェブ開発では、幅記述子（w）の方が圧倒的に多く使われています。
幅記述子（w）が主流
- レスポンシブデザインに最適
- ビューポートサイズとピクセル密度の両方に対応
- ブラウザが自動的に最適な画像を選択
<!-- 一般的な使い方（w） -->
<img
src="image-800.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 600px) 100vw, 50vw"
alt="レスポンシブ画像"
>
ピクセル密度記述子（x）
- 固定サイズの画像（ロゴ、アイコンなど）で使用
- よりシンプルだが柔軟性に欠ける
<!-- 固定サイズの場合（x） -->
<img
src="logo.png"
srcset="
logo.png 1x,
logo@2x.png 2x,
logo@3x.png 3x
"
alt="ロゴ"
>
使い分けの目安
- wを使う：レスポンシブなコンテンツ画像（記事の写真、ヒーローイメージなど）
- xを使う：固定サイズのUI要素（アイコン、ロゴなど）
実務では、レスポンシブデザインが主流のため、w記述子が8〜9割程度を占めると考えられます💪💪