ImageコンポーネントにてSVG画像はunoptimized属性をつける

結論

• Next.jsでImageコンポーネントを使用する際はunoptimized属性を付与しよう。

実装

       <Image
         src={}
         alt={''}
         width={24}
         height={24}
         loading="lazy"
         decoding="async"
         unoptimized
        />

特徴

• Imageコンポーネントは画像自動的にリサイズしたりしてくれます。unoptimized属性を付与することでキャンセルすることができます。

背景

• SVGの画像はベクター画像でありピクセルベースの画像とは異なり、解像度に依存しません。そのため、自動リサイズによる最適化の恩恵を受けにくいです。
• そもそもSVG画像はファイルサイズが小さいのでファイルサイズの削減効果がほとんどありません。

参考記事