このサイトは転送量を可能な限り少なくし、快適に閲覧していただくことを目的としてほとんど画像を用いていません（私の画力が崩壊しているからってわけじゃないよ！）。しかしながら画像を使いたいときはどうしても存在するため、快適性を失わずに画像を掲載するために、ビルド時に画像を圧縮することを思いつきました。
詳細なことについてはAboutページを見ていただくとして、このサイトを構築しているMillerというソフトウェアは「Nuxt/Content」に強く依存しています。そのためNuxt.jsのコンポーネントを用いてどうにかできないかを考えてみました。
結論
- ビルド時に圧縮するのは無理
- Cloudflareに2000円/月払えばどうにかなるっぽい
nuxt-optimized-images
optimize
- optimize something to make something as good as it can be; to use something in the best possible way
- (computing) to change data, software, etc. in order to make it work more efficiently or to make it suitable for a particular purpose
というわけで「Optimize」という単語には最適化という訳が充てられることが多いです。Nuxt.jsで画像を最適化するライブラリはないのかと検索した結果、nuxt-optimized-imagesという、あまりにも名前がそのまますぎるライブラリを発見しました。これ単体では動作せず、
- sharp
- imagemin-mozjpeg
- imagemin-pngquant
- imagemin-gifsicle
- imagemin-svgo
- webp-loader
- responsive-loader
などといったそれぞれの画像フォーマットに対応するライブラリを入れる必要があるとのことです。
ところがこれをインストールしても、Nuxt/Contentで変換したMarkdownファイルから読み込まれている画像は最適化されていませんでした。これはどうしてでしょうか。
実はNuxt/Contentのバージョン1系列では、技術的問題からassetからデータを読み込むことが出来なくなってしまっていました（#693）。そのためビルド時に解決するという方向性で改善することは難しいと判断しました。
Cloudflareにどうにかしてもらえるか？
このサイトはかつて触れた通り、Cloudflare Pagesという太っ腹サービスを用いて運営されています。そのためCloudflareのサービスを便利に使うことができます。
Cloudflareのドメイン設定ページには「Speed」という欄があり、その中の「最適化」を押すと、様々な最適化ソリューションについての設定が可能となります。このサイトでも「Auto Minify」がオンになっており、ただでさえ少ないHTML/CSS/JavaScriptファイルがさらに最適化されています。
しかし、画像についての設定項目である「Image Resizing」と「Polish」については、「Proへのアップグレード」というボタンしか存在しません。つまり有料顧客向けのサービスということです。Proは月2000円もするので、広告を掲載していない現在の状況だとさすがに支払うことは難しいものとなってしまいます。
なお、Cloudflare Imagesというサービスもあるのですが、これはAPIを用いる形なので、画像を適当に掲載したら圧縮してもらえるという類のサービスではないことから除外しました。
まとめ
以上から、画像を適当に放り込んで自動で最適化することは難しいと判断しました。当分は放り込む前にmozjpegなどで最適化しつつ、必要以上に画像を掲載しないという運用をしていこうと考えています。
また、この記事を執筆している途中に、Nuxt.jsサイドから「Nuxt Image」というモジュールが出ていることに気づきました。バージョンが0.7.0（執筆時点）のため、正式リリースされたら触っていこうと思います。
関連リンク
- nuxt-optimized-images - npm
- Cloudflareヘルプ
