Next.jsのImageコンポーネントで画像が荒く見える主な原因は以下の通り：

1. 表示サイズと元画像サイズの不一致

   • 元画像が大きすぎる場合、大幅な縮小により細部が潰れる
   • 例：1920x850pxの画像を600x300pxで表示

2. デフォルトのquality設定

   • Next.jsのデフォルトquality値は75
   • スクリーンショットのような細かいテキストには不十分

3. 解決方法

   • quality属性を95に設定
   • 表示サイズに適した元画像サイズに調整
   • Retinaディスプレイを考慮した2倍解像度の準備

実装例:

// 修正前
<Image
  src="/img/screenshot.png"
  width={600}
  height={300}
/>

// 修正後
<Image
  src="/img/screenshot.png"
  width={1200}
  height={600}
  quality={95}
/>