🐈

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} />

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

まとめ

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

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

Discussion