📦 plugin-ideal-image

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

情報

デフォルトでは、プラグインは**開発中は無効**になっているため、常にフルスケールの画像を表示できます。 理想的な画像の動作をデバッグする場合は、disableInDev オプションを false に設定できます。

インストール

npm

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

Yarn

yarn add @docusaurus/plugin-ideal-image

pnpm

pnpm add @docusaurus/plugin-ideal-image

使用方法

このプラグインはPNGおよびJPG形式のみをサポートしています。

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

// your React code
<Image img={thumbnail} />

// or
<Image img={require('./path/to/img.png')} />

警告

このプラグインは、インポート/ requireされた画像のタイプを変更する Webpackローダー を登録します

• 変更前: string
• 変更後: {preSrc: string, src: import("@theme/IdealImage").SrcImage}

設定

使用可能なフィールド

オプション	タイプ	デフォルト	説明
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	出力ファイルのファイル名テンプレート。
sizes	number[]	元のサイズ	使用したいすべての幅を指定します。指定されたサイズが元の画像の幅を超える場合、元の画像の幅が使用されます（つまり、画像は拡大縮小されません）。
size	number	元のサイズ	使用したい幅を1つ指定します。指定されたサイズが元の画像の幅を超える場合、元の画像の幅が使用されます（つまり、画像は拡大縮小されません）
min	number		sizes を手動で指定する代わりに、min、max、steps を指定することで、サイズが自動的に生成されます。
max	number		上記の min を参照してください
steps	number	4	min と max（両端を含む）の間で生成される画像の数を設定します
quality	number	85	JPEG圧縮品質
disableInDev	boolean	true	これを false に設定することで、開発モードで理想的な画像の動作をテストできます。**ヒント**: ブラウザでネットワークスロットリングを使用して、低速ネットワークをシミュレートします。

設定例

設定例を以下に示します

docusaurus.config.js

export default {
  plugins: [
    [
      '@docusaurus/plugin-ideal-image',
      {
        quality: 70,
        max: 1030, // max resized image's size.
        min: 640, // min resized image's size. if original is lower, use that size.
        steps: 2, // the max number of images generated between min and max (inclusive)
        disableInDev: false,
      },
    ],
  ],
};