Skip to main content
Version: 2.0.0-alpha.75

📦 plugin-ideal-image

Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder) in the production builds.

Installation#

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

Configuration#

Modify your docusaurus.config.js

module.exports = {
...
+ plugins: ['@docusaurus/plugin-ideal-image'],
...
}

Usage#

This plugin supports the PNG, GIF 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#

OptionTypeDefaultDescription
namestringideal-img/[name].[hash:hex:7].[width].[ext]Filename template for output files.
sizesarrayoriginal sizeSpecify 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).
sizeintegeroriginal sizeSpecify 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)
minintegerAs an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you.
maxintegerSee min above
stepsinteger4Configure the number of images generated between min and max (inclusive)
qualityinteger85JPEG compression quality
Last updated on by Sébastien Lorber