Skip to main content
Version: 2.0.0-beta.10 🚧

πŸ“¦ 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 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