Next.js Imageコンポーネント widthとheightの指定による変化

① 親要素指定なし・子要素width=300・height=300

レスポンシブに対応している。
どの画像も、ブラウザで100%表示ではガビガビしている。
拡大すると、【600px】～がきれいに見えるが、ある一定の大きさ以上にならない。

Obsidian 【50px】

Obsidian 50px

Obsidian 【150px】

Obsidian 150px

Obsidian 【300px】

Obsidian 300px

Obsidian 【500px】

Obsidian 500px

Obsidian 【600px】

Obsidian 600px

Obsidian 【1000px】

Obsidian 1000px

Obsidian 【1200px】

Obsidian 1200px

Obsidian 【1500px】

Obsidian 1500px

Obsidian 【2000px】

Obsidian 2000px

② 親要素 w-[300px] h-[300px]・子要素 width=300・height=300

どの画像も、ブラウザで100%表示ではガビガビしている。①と同じ結果になる
拡大すると一定の大きさまではきれいだが、それ以上は全てガビっている。

Obsidian 【50px】

Obsidian 50px

Obsidian 【150px】

Obsidian 150px

Obsidian 【300px】

Obsidian 300px

Obsidian 【500px】

Obsidian 500px

Obsidian 【600px】

Obsidian 600px

Obsidian 【1000px】

Obsidian 1000px

Obsidian 【1200px】

Obsidian 1200px

Obsidian 【1500px】

Obsidian 1500px

Obsidian 【2000px】

Obsidian 2000px

③ 親要素 w-[300px] h-[300px]・子要素 width=600・height=600

Obsidian 【600px】～【2000px】きれいに表示される。
拡大すると一定の大きさまではきれいだが、それ以上は全てガビっている。

Obsidian 【50px】

Obsidian 50px

Obsidian 【150px】

Obsidian 150px

Obsidian 【300px】

Obsidian 300px

Obsidian 【500px】

Obsidian 500px

Obsidian 【600px】

Obsidian 600px

Obsidian 【1000px】

Obsidian 1000px

Obsidian 【1200px】

Obsidian 1200px

Obsidian 【1500px】

Obsidian 1500px

Obsidian 【2000px】

Obsidian 2000px

④ 親要素 w-[300px] h-[300px]・子要素 fill

Obsidian 【600px】～【2000px】きれいに表示される。
拡大すればするほど、高解像度の画像が美しい

Obsidian 【50px】

Obsidian 50px

Obsidian 【150px】

Obsidian 150px

Obsidian 【300px】

Obsidian 300px

Obsidian 【500px】

Obsidian 500px

Obsidian 【600px】

Obsidian 600px

Obsidian 【1000px】

Obsidian 1000px

Obsidian 【1200px】

Obsidian 1200px

Obsidian 【1500px】

Obsidian 1500px

Obsidian 【2000px】

Obsidian 2000px

まとめ

用途親要素子要素画像サイズ
静的なWEBサイトw-[●px] h-[▲px] ← と同サイズ ← の２倍サイズ
ユーザーが画像を登録する場合w-[●px] h-[▲px] ← と同サイズユーザーが指定
高画質が求められる場合w-[●px] h-[▲px]fill可能な限り大きな画像（1200px ~ 2000px）