next/imageのprops
src
width
height
fill
画像のサイズが統一でないときに有用
親をrelative/fixed/absoluteのいずれかにする必要がある
width/heightの指定は不要
legacy時代はpropsとして用意されていた
loader
sizes
quality
priority
placeholder
onLoadingComplete
onLoad
onError
loading
blurDataURL
↓legacy時代のもの
src
width, height
layoutやsizesの指定によって、指定するものが異なる
layout="intrinsic"かlayout="fixed"のとき
描画後の画像のwidth/heightを指定する
画像の大きさに影響する
layout="responsive"かlayout="fill"のとき
オリジナルの画像のwidth/heightを指定する
画像の比率に影響する
layout="fill"のとき
指定不要
layout
demoもある
intrinsic
defualt
widthが viewportよりも
小さい場合はviewportに合わせて小さくなる
大きい場合は width の値に設定される
responsive
viewport 幅に依存して画像幅が変化する
親要素にdisplay: blockを指定する必要がある
widthが変わるごとに新しい画像をfetchしてきている
loaderと組み合わせる必要がある
この場合、sizeも指定すべき
fill
幅を、親のDOMのheight,widthに合わせる
この場合、width, heightの指定は不要
fixed
viewport の幅によらず、設定された width, height の画像を表示
企業ロゴなど常に一定の大きさを保ちたいものに対して使用するなど
loader
sizes
defaultで100vw
ほんとは画面幅を1度でかくしたら、小さく戻したときも、画像サイズはでかくてままで良いんだけどなmrsekut.icon
layout="intrinsic"かlayout="fixed"のとき
指定は不要
layout="responsive"かlayout="fill"のとき
指定する
quality
画質
1~100の数値
1が最低
defaultは75
priority
true の場合は、ページ遷移時にpreload
LCPに関わるものはpreloadすると良い
defualtはfalse
loading
遅延ロードするかどうか
"lazy" | "eager"
lazyの場合は、画像がviewportに近づくとloadされる
defaultはlazy
unoptimized
最適化するかどうか
defaultはfalse
trueにすると、next/imageの効果を無視する感じになる
objectFit={"contain"}
objectPosition={"50% 50%;"}
placeholder
画像のloading時のplaceholder
blur
empty
default
onLoadingComplete
loading
読み込みのタイミング
lazy
default
viewportに入ったら読み込む
eager
blurDataURL
placeholder="blur"のときに指定する
remoteの画像を出すときはこんな風にするなど
bundle sizeでかくない？
これはgetStaticPropsなどserver側で実行する
blurDataURL={"/_next/image?url=${img.picUrl}&w=16&q=1"}でもできるはするが、Lighthouseの点数が下がる
lazyBoundary
loading="lazy"のときに、viewportからどのぐらいの距離で読み込むか
たぶん。違うかもmrsekut.icon
lazyRoot
scrollできるものがnestしているときに、lazyBoundaryを指定するときに使う