メインコンテンツまでスキップ

KurocoFilesの画像をNuxt Image / next/imageで最適化できますか？

KurocoFilesで配信している画像の最適化方法は、ご利用のフレームワークとホスティング環境によって異なります。

Next.jsをご利用の場合​

KurocoFrontを利用する場合​

KurocoFrontは静的ファイルのホスティングのみサポートしており、サーバーサイドでの画像処理には対応していません。そのため、Next.jsの画像最適化機能（/_next/image）は利用できません。対応方法は以下のいずれかです。

  • <img>タグを直接使用する
  • next.config.jsでunoptimized: trueを設定し、<Image>コンポーネントの最適化処理を無効にしたまま使用する
  • カスタムローダーを設定し、<Image>コンポーネントからKurocoFilesの画像動的変換を利用する
next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

<img>タグを直接使用する場合とunoptimized: trueを設定する場合は、画像がKurocoFilesから直接配信されます。ブラウザがWebPに対応している場合、KurocoFilesがWebP形式に変換して配信します。ただし、srcsetによる画面幅に応じた画像の出し分けは行われません。

カスタムローダーでレスポンシブ対応する​

srcsetによる画面幅に応じた画像の出し分けが必要な場合は、カスタムローダーを設定します。カスタムローダーは<Image>コンポーネントが生成する各画像URLにwidthパラメータを付与し、KurocoFilesの画像の動的変換でリサイズします。output: 'export'による静的エクスポートと併用できます。

next.config.js
module.exports = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './src/lib/kurocoImageLoader.js',
  },
};
src/lib/kurocoImageLoader.js
'use client';

export default function kurocoImageLoader({ src, width, quality }) {
  // KurocoFiles以外の画像はそのまま返す
  if (!/^https:\/\/[^/]+\.kuroco-img\.app\//.test(src)) {
    return src;
  }
  const url = new URL(src);
  url.searchParams.set('width', String(width));
  if (quality) {
    url.searchParams.set('quality', String(quality));
  }
  return url.toString();
}

この設定では、<Image>コンポーネントが以下のようなsrcsetを出力します。

<img srcset="https://sample.g.kuroco-img.app/v=1717413612/files/topics/sample.jpg?width=640 640w,
             https://sample.g.kuroco-img.app/v=1717413612/files/topics/sample.jpg?width=750 750w,
             ...">
備考

KurocoFilesの画像動的変換は、デフォルトでは元画像より大きいサイズに拡大しません。元画像の幅を超えるwidthが指定された場合は、元画像の大きさのまま配信されます。詳細はenableを参照してください。

サーバーサイド処理が可能なホスティングサービスを利用する場合​

VercelやNetlifyなど、サーバーサイド処理が可能な環境ではnext/imageをそのまま利用でき、レスポンシブ対応やフォーマット変換をホスティングサービス側に任せられます。

ただし、kuroco-imgドメインなど外部ドメインの画像はnext.config.jsのremotePatternsに明示的に追加しないと<Image>コンポーネントでエラーになります。

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.g.kuroco-img.app',
      },
    ],
  },
};

remotePatternsに追加した場合、Next.js（ホスティングサービス）がKurocoFilesから元画像を取得し、リサイズやフォーマット変換を行います。srcにwidthなどの画像の動的変換のパラメータを付与した場合は、KurocoFilesで変換された画像をNext.js側でさらに変換します。

画像の変換をKurocoFilesのみで行いたい場合は、この環境でもカスタムローダーを利用できます。その場合、next.config.jsのoutput: 'export'の指定は不要です。カスタムローダーを使用する場合、画像はKurocoFilesから直接配信され、ホスティングサービスの画像最適化機能は使用されません。

Nuxt.jsをご利用の場合​

Nuxt Image（@nuxt/image）を使用する場合は、Fastly Providerを設定することでKurocoFilesのFastly画像変換を<NuxtImg>コンポーネントから直接活用できます。

baseURLには、APIのレスポンスに含まれる画像URLのドメイン（https://xxxx.g.kuroco-img.app）を指定します。

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'fastly',
    fastly: {
      baseURL: 'https://sample.g.kuroco-img.app',
    },
  },
});
pages/index.vue
<template>
  <NuxtImg src="/files/topics/sample.jpg" width="640" quality="80" />
</template>

<NuxtImg>コンポーネントに指定したwidthやqualityは、同名のクエリパラメータとして画像URLに付与されます。上記の例では、srcにhttps://sample.g.kuroco-img.app/files/topics/sample.jpg?width=640&quality=80が出力されます。また、srcsetには高解像度ディスプレイ向けにwidth=1280を指定したURLも出力されます。srcには、APIから取得したhttps://から始まる画像URLをそのまま指定することもできます。

指定できるパラメータは画像の動的変換についてを参照してください。

関連ドキュメント​

サポート

お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。

フォームから問い合わせをする
Slackコミュニティに参加する