next/image

NextJS

next/image

image optimizationを利用する場合はnext/imageを使用する必要があります

（cssでbackground-imageにする場合は画像最適化されません）

publicディレクトリに画像ファイルを配置します

import Image from 'next/image';

export default function Home() {
    return (
        <Image
            src="/sample.jpg"  <--- public/sample.jpgが参照されます（ビルド時もこれでOK）
            alt=""
            width={1000}  <--- 数値で指定する必要があります（100%とかはダメ）
            height={373}  <--- width,heightプロパティは必須です
            layout="responsive"  <--- 親要素の幅に合わせて画像がアスペクト比を保ったまま縮小します（※1）
    );
}

※1 … layoutプロパティがないと画像のアスペクト比が保てなくなります

layout=”intrinstic”にすると画像の元のアスペクト比を保ったまま、レスポンシブします

image optimization

next.jsではビルド時に画像を圧縮して最適化(optimize)してくれます

ビルドして生成されたimgタグを見てみると、

/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcat.3166d87a.jpeg&w=1080&q=75

これをURLデコードすると
/_next/image?url=/_next/static/media/cat.3166d87a.jpeg&w=1080&q=75

となっています

&w=1080&q=75　… wは画像の横幅、qは画像のクオリティを示しています（qはデフォルトで75%）

このwとqがimage optimize機能です

CSS

div {
    bacground: url("/sample.jpg");  <--- pubic/sample.jpgが参照されます（ビルド時もこれでOK）
}
BACK