CMSの画像を静的サイト（SSG）で表示する3つの方法

ContentfulやWordPressなどのCMSを利用して静的サイト（SSG）を構築する際、意外と悩むポイントが画像の表示方法です。

CMS側に画像用のリソースを提供していることもありますが（例：res.example.com/123456/images/sample.jpeg）、帯域制限ありでアクセスが多いと画像が表示されなくなったり、画像配信元とパス（URL）が違うことで都合が悪いこともあったりします。

また、WordPressをバックエンドとしてだけ使う場合、画像の配信元がそのドメインになってしまうので（例：blog.example.com/wp-content/uploads/2023/12/sample.jpeg）、故意にその構成にしている場合は別として、スマートさに欠ける側面もあります。

そのため、サイト構成や規模によってどの形での画像配信が最適か判断する必要があるのですが、主に3つの方法があるので、簡単な順にご紹介します。

外部リソースを利用する

Headless CMSの代表格であるContentfulや日本製のMicroCMSを始め、サービスとして提供されているCMSを使う場合は、画像用のリソースも利用することができるため便利ですが、画像の表示はリソースを大量に消費するため、何らかの制限を設けているCMSがほとんどです。そのため、無料プランで規模が大きいサイトを稼働させる場合は後述する他の方法を利用するのがベターです。

一方、自分でホスティングするタイプのStrapiやWordPressをCMSとして利用する場合、上記のような制限はありませんが、アップロード容量や帯域がホスティングサービス（レンタルサーバー）に依存するため、料金が安くてスペックが弱いサーバーだと、画像がアップロードできない、表示に時間がかかるなど、また違った問題が発生する可能性があります。

そのため、どちらにしても外部リソースから直接画像を配信するのは避けた方が無難です。

WordPressには便利なプラグインもある

WordPressにはCloudinaryのプラグインがあるのですが、これは同名のサービスをWordPress上で簡単に利用できるようにしたものです。無料で使えます。

このプラグインは、WordPressの管理画面上でアップロードした画像をCloudinaryの画像リソースに変換して配信してくれるため、静的サイト側でもCloudinaryのリソースを利用することができます。

拡張機能（モジュール）を利用する

いくつかの静的サイトジェネレーターには、外部リソースの画像をビルド時にダウンロードして静的サイトに含めてくれる拡張機能があります。

Gatsby.jsのgatsby-plugin-image、Nuxt.jsの@nuxt/image、Astroの@astrojs/imageなどがそうです。Next.jsにもnext/imageの機能がありますが、静的サイト自身に画像を含めることはできません。

そのため、利用する静的サイトジェネレーターに指定がない場合は、Gatsby.js、Nuxt.js、Astroのいずれかを利用すると画像周りで苦労しません。

Gatsby.jsに関しては、開発時に画像をローカルにキャッシュしてくれる気の利いた仕様になっているのでおすすめです。

ビルド時に外部リソースの画像を静的生成する

静的サイトジェネレーターにモジュールがない場合やカスタマイズしたい場合、手間はかかりますが、自分で同様の機能を実装することもできます。

例えば、執筆時点でNuxt3のモジュールには画像の静的生成がないのですが、リリースが待てず同様の機能を自作した経緯があります。

一連の流れは画像を静的生成する方法でサンプルコードと共に詳しくご紹介しているので、ぜひご覧ください。