高解像度ディスプレイでの閲覧時に画像関連が非常に粗い

[knokmki612]

現状のdevelopブランチを手元で見ると、画像関連が非常に粗い。 トップのビジュアル、バッジの画像など。まだ仮の状態であればよいがこのまま公開するのであれば、何とかしたい

Originally posted by @Hidetaro7 in https://github.com/npocccties/oku-private/issues/70#issuecomment-1328677667

[knokmki612]

next/image コンポーネントの quality プロパティで最適化時の品質が変更可能です（デフォルトは75）

https://nextjs.org/docs/api-reference/next/image#quality

[Hidetaro7]

画像の品質ではなく、滲んで見えることへの対応をしたいです。（感覚の問題でしょうか）

[knokmki612]

画像のサイズについては基本的にはnext/imageコンポーネントにあらかじめ指定した縦横幅でリサイズされるかと思います

滲んで見える点について、オリジナルの画像の解像度が低いといった問題がないかぎり、画像ソースと表示のサイズが一致していない（引き伸ばされている）ケースはひとまず除外していいと考えます。そうしますと最適化時の品質が要因としては挙げられるかと思ったのですが、他の要因というのは考えられますか。あれば共有いただければと思います

[knokmki612]

オリジナルの画像の解像度が低いといった問題がないかぎり、画像ソースと表示のサイズが一致していない（引き伸ばされている）ケースはひとまず除外していい

高解像度ディスプレイに対応したオリジナルの画像ファイルにはなっていないので、差し替えが必要かもしれません。

• https://github.com/npocccties/chiloportal/blob/develop/frontend/public/top.png
  • 640 x 282
  • オリジナル https://www.figma.com/file/dCE06JShf29eqnvZ4vcE8U/OKUTEP?node-id=731%3A6806&t=XcUvtWbEYfEsed4t-0
• https://github.com/npocccties/chiloportal/blob/develop/frontend/public/top-md.png
  • 946 x 341
  • オリジナル https://www.figma.com/file/dCE06JShf29eqnvZ4vcE8U/OKUTEP?node-id=1189%3A7364&t=XcUvtWbEYfEsed4t-0

Figma から書き出す際に等倍のサイズではなく、2倍のサイズで書き出しするようにすることで対処するとよさそうに思いましたがいかがでしょうか

[Hidetaro7]

2倍のサイズで書き出しするようにすることで対処するとよさそうに思いましたがいかがでしょうか

はい、それでよいと思います。

[knokmki612]

バッジの画像についても同様の対応（より高解像度の画像への差し替え）が必要であれば、別途対応が必要かと思いますのでその点ご留意ください

[Hidetaro7]

画像が眠い。

バッジの画像が今上がっていますが、非常に粗く、ブランドの品質にも影響を感じているので、一度再オープンとします。

私の書き出しと、現状サーバに上がっている画像の品質の差。 高解像度ディスプレイに対応していないようにも見えるので、具体的には解像度不足ということだろうか。