Nextjs 🐕 next/imageのqualityの数値いじってみた！

Next.jsのnext/imageは、画質をコンポーネントごとに設定できる。

詳しくは公式を！
https://nextjs.org/docs/api-reference/next/image

実際どんなもんか気になったので調べてみた。

コードの書き方

quality={}に値を設定する。
1〜100の間で設定する（100が最高画質）
デフォルトは75

import Image from 'next/image'

<Image src="..." quality={1} width={900} height={500} />

１から100まで指定してみる。

１番上の猫がデフォルト。
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

まとめ

ほかのオプションも調べてみたい。

https://zenn.dev/catnose99/articles/883f7dbbe21632a5254e#next%2Fimageを使うときに知っておきたいこと