Responsive Image

画像を画面サイズに応じて扱いやすくするための Plugin です。

導入

npm install @riebeckite/plugin-responsive-image

Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は riebeckite.config.ts の plugins に登録して利用します。

大きな画像を多く含むサイトで、閲覧環境に合わせた画像配信を行いたい場合に利用します。記事側では通常どおり画像を参照し、Pluginに画像処理を任せる構成にできます。

![[riebeckite-logo-horizontal.png]]

この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。

設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは Plugin System、Plugin を作る場合は Writing a Plugin を参照してください。

1 changesCollapseExpand

From To

	1	`+ # Responsive Image`
	2	`+`
	3	`+ 画像を画面サイズに応じて扱いやすくするための Plugin です。`
	4	`+`
	5	`+ ## 導入`
	6	`+`
	7	+ ```bash
	8	`+ npm install @riebeckite/plugin-responsive-image`
	9	+ ```
	10	`+`
	11	+ Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は `riebeckite.config.ts` の `plugins` に登録して利用します。
	12	`+`
	13	`+ ## 使用例`
	14	`+`
	15	`+ 大きな画像を多く含むサイトで、閲覧環境に合わせた画像配信を行いたい場合に利用します。記事側では通常どおり画像を参照し、Pluginに画像処理を任せる構成にできます。`
	16	`+`
	17	`+ ### ソース`
	18	`+`
	19	+ ```markdown
	20	`+ ![[riebeckite-logo-horizontal.png]]`
	21	+ ```
	22	`+`
	23	`+ ### 実行例`
	24	`+`
	25	`+ ![[riebeckite-logo-horizontal.png]]`
	26	`+`
	27	`+ ## 使いどころ`
	28	`+`
	29	`+ この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。`
	30	`+`
	31	`+ ## 詳細仕様`
	32	`+`
	33	`+ 設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは [Plugin System](../framework/plugin-system.md)、Plugin を作る場合は [Writing a Plugin](./writing-a-plugin.md) を参照してください。`
	34	`+`
	35	`+`