Skip to main content

📦 plugin-ideal-image

ほぼ理想的な画像（レスポンシブ・遅延ロード・低品質のプレースホルダ）を生成するDocusaurusプラグインです。

情報

デフォルトでは、開発環境ではプラグインが無効化されているため、常にフルサイズの画像を表示できるようになっています。 ideal image（理想的な画像）の動作をデバッグしたい場合は、disableInDevオプションをfalseに設定することができます。

インストール​

npm install --save @docusaurus/plugin-ideal-image

使い方​

本プラグインはPNG・JPG形式のみに対応しています。

import Image from '@theme/IdealImage';
import thumbnail from './path/to/img.png';

// Reactコード
<Image img={thumbnail} />

// または
<Image img={require('./path/to/img.png')} />
警告

このプラグインは、import/requireされた画像の型を次のように変更するWebpackローダを登録します。

  • 使用前：string
  • 使用後：{preSrc: string, src: import("@theme/IdealImage").SrcImage}
pnpm利用者へ

pnpm 10以降では、pnpm installを実行してもデフォルトでは依存関係のインストールスクリプトが実行されなくなりました。 sharpの画像リサイズ依存関係を正しくインストールするには、次のような追加のpnpm設定が必要です（関連issue）。

package.json
{
  "pnpm": {
    "onlyBuiltDependencies": ["fsevents"]
  }
}

設定​

Accepted fields:

オプションTypeDefault説明
namestringideal-img/[name].[hash:hex:7].[width].[ext]出力ファイル用のファイル名テンプレート。
sizesnumber[]元のサイズ使用するすべての幅を指定します。 If a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up).
sizenumber元のサイズSpecify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
minnumberAs an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you.
maxnumber上記のminを参照
stepsnumber4minとmaxの間（両者含む）で生成される画像の数を設定
qualitynumber85JPEG圧縮品質
disableInDevbooleantrueこれをfalseに設定することで、開発モードでのideal image（理想的な画像）動作をテストできます。 ヒント：ブラウザでネットワーク帯域制限を使用すれば、遅いネットワークを模倣できます。

Example configuration​

設定例は以下のようになります。

docusaurus.config.js
export default {
  plugins: [
    [
      '@docusaurus/plugin-ideal-image',
      {
        quality: 70,
        max: 1030, // リサイズ後画像の最大サイズ
        min: 640, // リサイズ後画像の最小サイズ。 元画像の方が小さい場合はそれを利用。
        steps: 2, // 最大・最小の間（両者も含む）に生成される画像の最大数
        disableInDev: false,
      },
    ],
  ],
};