🐈

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

2021/08/16に公開

Next.js

React

tech

Next.jsの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

まとめ

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

コードの書き方

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

画像のサイズ

まとめ

Discussion