Zenn
Open5

Next.jsについていろいろまとめる

メモ
gaKnightgaKnight

next/image

画像の最適化

画像サイズ: 通信されるの画像サイズと実際に表示される画像サイズがあっていない
拡張子: 軽量な拡張子の画像が使われていない
タイミング: viewport 外の画像を読み込んでいる

props

// <Image>コンポーネントの引数
<Image
  src={`/river.jpg`} // ソースファイル, string
  width={420} // 表示幅, number
  height={280} // 表示高さ, number
  quality={75} // 画質, number
  priority={false} // 表示の優先度, boolean
  loading={"lazy"} // 遅延ロードするかどうか, "lazy" | "eager"
  unoptimized={false} // 最適化するかどうか, boolean
  layout={"fixed"} // レイアウト, "fill" | "fixed" | "intrinsic" | "responsive"
  objectFit={"contain"} // layout='fill'の場合のobject-fit
  objectPosition={"50% 50%;"} // layout='fill'の場合のobject-position
/>

参考
https://www.forcia.com/blog/001561.html