Next.js で output: "export" でも画像最適化をしたい（next-export-optimize-imagesを使う） #QiitaEngineerFesta2024

この記事の概要

以前の記事でnext-image-export-optimizerを紹介してみました。

よく似たライブラリである next-export-optimize-images も使ってみたので、ライブラリ選定の備忘録がてら記事にしました。

使い勝手などを next-image-export-optimizer と比較もしています。

環境

主要なものだけ記載します。

依存関係	バージョン
next	14.2.3
next-export-optimize-images	4.5.0
react	18.3.1
typescript	5.4.5

この記事で話題にするのは next-export-optimize-images です。

公式ドキュメント

リポジトリの README とは別に、ドキュメント用のサイトがあります。
README を読むのでも良いのですが、こうやって別でまとまっている方が分かりやすいのでありがたいです。
検索もできるので、目当ての設定を探しやすかったです。

インストールとセットアップ

コマンドを叩きます。

npm install -D next-export-optimize-images

次にnext.config.jsを編集します。
公式ドキュメントではrequireを使っていましたが、2024 年 6 月 9 日現在のcreate-next-appではnext.config.mjsが生成されたため、ここではimportを使っています。

next.config.mjs

+ import withExportImages from "next-export-optimize-images";

  /** @type {import('next').NextConfig} */
- const nextConfig = {
+ const nextConfig = withExportImages({
    output: "export",
- };
+ });

  export default nextConfig;

またpackage.jsonのスクリプトも書き換えます。

package.json

  "scripts": {
-   "build": "next build",
+   "build": "next build && next-export-optimize-images",
  }

これにより、ビルド時に複数の画像が書き出されます。

書き出されるサイズは[...nextConfig.images.deviceSizes, ...nextConfig.images.imageSizes] ¹と記載がありました。
つまり、何もしなければ Next.js のデフォルト値である16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840²に準じるようです。

next-image-export-optimizer の記事では「枚数が少なくてもビルド時間が遅いので、サイズを間引いた方が良いかもしれない」と記載しました。
同じ枚数で比較すると next-export-optimize-images の方が確実に早かった³ので、枚数が少ないうちはサイズを間引かなくても良いかもしれません。

Picture コンポーネントの扱い

ドキュメントで最初に紹介されているのはnext-export-optimize-images/imageなのですが、next/imageと比べると画像の圧縮率が小さかったです。

またnext-image-export-optimizerは設定無しで webp へ変換されていたのですが、next-export-optimize-images/imageは元ファイルの拡張子を維持しているため、結果的にサイズの大きな画像を出していました。

ただnext-export-optimize-images/pictureを使えば webp も元の拡張子のファイルも両方を配信できますし、画像サイズも同様に小さくなっていました。

自分が使うのであれば、デフォルトでnext-export-optimize-images/pictureを使うかもしれません。

開発環境での挙動

一応記載するだけですが、開発環境では画像の最適化はされていません。

（ビルド時に最適化した画像を書き出すのですから当たり前といえば当たり前な気もしますが）

結局どちらのライブラリを使うか

小さなテスト環境だけでの判断ですが next-export-optimize-images を使いそうです。

next-image-export-optimizer は、publicディレクトリ（= git の管理下）に画像が生成されたり、一度ビルドしないとコンソールにエラーが出たりと、わずかながら使いづらかったです。

next-export-optimize-images にはそういった引っ掛かりがなかったのに加え、画像の生成が速いです。

ビルド時間が伸びると色々な大変さが生まれますから、速いのはシンプルに嬉しいです。

https://github.com/dc7290/next-export-optimize-images/blob/415e9054dff8f02ef50032d8ba04917182be12c6/src/loader/index.ts#L35 ↩
https://github.com/vercel/next.js/blob/73e4895dfaeb5ac2f8efba90171140272f527b14/packages/next/src/shared/lib/image-config.ts#L104-L105 ↩
私が試した条件では、next-image-export-optimizer では 10 秒かかっていたのが next-export-optimize-images では 0.5 秒ほどでした。 ↩