img タグではなく next/image を使う理由は何ですか。
配信ファイルの最適化、画面外の遅延読み込み、そしてレイアウトシフトの防止です。幅と高さを与えることで表示領域が先に確保され、読み込み完了時のずれが起きなくなります。
面接官が見ているのは最適化の中身を言えるか。
よくある答えと、面談でどう見られるか
- サイズと形式の最適化、遅延読み込み、レイアウトシフトの防止
3点そろっています。代償（サーバー側の処理コスト）まで言えるとなお良いです。 - 画像が自動で圧縮されるため
間違いではありませんが、それだけだと弱いです。遅延読み込みとレイアウトシフト防止まで挙げられると説明として完成します。 - Next.js では img タグが使えないため
使えます。使えるうえで、最適化のために next/image を選ぶという話です。 - 外部ドメインの画像を安全に扱えるため
外部ドメインは設定で明示的に許可する必要があり、むしろ手間が増える側面です。利点として先に挙げるものではありません。
面接官は何を見ているか
- サイズ最適化や形式変換に触れた
- 遅延読み込みに触れた
- レイアウトシフトの防止に触れられればなお良い
模範解答
主に3つです。
1つは配信するファイルの最適化で、表示サイズに合わせたリサイズと、対応ブラウザには軽い形式での配信が自動で行われます。元画像が巨大なままでも、送られるのは必要なサイズになります。
2つ目は遅延読み込みです。画面外の画像は最初に読み込まれません。
3つ目はレイアウトシフトの防止です。幅と高さを与えるので、読み込み前から場所が確保され、画像が入った瞬間に下の要素がずれる現象を防げます。
代償もあります。最適化処理はサーバー側の仕事なので、自前ホスティングでは CPU とストレージを使います。外部ドメインの画像を扱う場合は設定で許可も要ります。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
観点をすべて押さえられた場合
自前サーバーで運用していて、画像最適化が重い。どうしますか。一部しか触れられなかった場合
レイアウトシフトとは何が起きている状態ですか。触れられなかった場合
レイアウトシフトとは何が起きている状態ですか。