๐ฆ plugin-ideal-image
Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder) in the production builds.
Installation
- npm
- Yarn
npm install --save @docusaurus/plugin-ideal-image
yarn add @docusaurus/plugin-ideal-image
Configuration
Modify your docusaurus.config.js
module.exports = {
...
plugins: ['@docusaurus/plugin-ideal-image'],
...
}
Usage
This plugin supports the PNG and JPG formats only.
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')} />
Options
Option | Type | Default | Description |
---|---|---|---|
name | string | ideal-img/[name].[hash:hex:7].[width].[ext] | Filename template for output files. |
sizes | array | original size | Specify all widths you want to use. If a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). |
size | integer | original size | 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) |
min | integer | As an alternative to manually specifying sizes , you can specify min , max and steps , and the sizes will be generated for you. | |
max | integer | See min above | |
steps | integer | 4 | Configure the number of images generated between min and max (inclusive) |
quality | integer | 85 | JPEG compression quality |