はじめに
Next.jsにはnext/imageというImageコンポーネントライブラリが存在します。
これを使うと色々な最適化を行なってくれるのですが、最近あえてこの最適化を無効にするシーンがあったのでTipsとして紹介します。
next/imageとは
next/imageとは、Next.jsに組み込まれている画像コンポーネントで、デフォルトでは自動的に画像の最適化やレスポンシブ対応を行ってくれるライブラリです。
詳しくは以下の記事をご覧ください。
公式ドキュメントはこちらです。
unoptimizedオプションについて
色々な最適化をよしなにやってくれるnext/imageですが、unoptimizedオプションを渡すことで画像の最適化を無効にすることも可能です。
例
import Image from "next/image";
const Component = () => {
return <Image src="/example.jpg" alt="Example Image" unoptimized />;
}
unoptimizedオプションを使うタイミング
next/imageの最適化はGIFを用いる場合はうまく動作しません。
実際にGIFを指定するとアニメーションが動作せず、静止画になってしまいます。
つまり、GIFを使いたい場合はunoptimizedオプションを有効化する必要があります。
また、その他にも
- 元々の画像のサイズが十分に小さい
- SVGを使っている
などの場合でも、あまりnext/imageの最適化の恩恵を受けることができないようです。
まとめ
GIFを使ったアニメーションを行いたい時はnext/imageのunoptimizedオプションを有効にしましょう