🐈
Nextjs 🐕 next/imageのqualityの数値いじってみた!
Next.jsのnext/imageは、画質をコンポーネントごとに設定できる。
詳しくは公式を!
実際どんなもんか気になったので調べてみた。
コードの書き方
quality={}に値を設定する。
1〜100の間で設定する(100が最高画質)
デフォルトは75
import Image from 'next/image'
<Image src="..." quality={1} width={900} height={500} />
1から100まで指定してみる。
1番上の猫がデフォルト。
quality={1}、quality={10}、quality={20}・・・quality={100}
で並べてみた。
quality={1} は画質落ちてるのがわかる。
import Image from "next/image";
export default function IndexPage() {
return (
<>
<Image src="/cat.jpg" alt="cat" width={900} height={500} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={1} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={10} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={20} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={30} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={40} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={50} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={60} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={70} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={80} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={90} />
<Image src="/cat.jpg" alt="cat" width={900} height={500} quality={100} />
<>
);
}
画像のサイズ
デフォルトだと、56.3kb
- quality={1} 11.8kb
- quality={100} 507kb
まとめ
ほかのオプションも調べてみたい。
Discussion