📦 plugin-ideal-image

Plugin Docusaurus pour générer une image presque idéale (réactive, chargement différé et placeholder de basse qualité).

info

By default, the plugin is inactive in development so you could always view full-scale images. If you want to debug the ideal image behavior, you could set the disableInDev option to false.

Installation

npm

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

Yarn

yarn add @docusaurus/plugin-ideal-image

pnpm

pnpm add @docusaurus/plugin-ideal-image

Utilisation

Ce plugin ne supporte que les formats PNG et 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')} />

Configuration

Champs acceptés :

Option	Type	Par défaut	Description
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	Modèle du nom de fichier pour les fichiers en sortie.
sizes	number[]	original size	Spécifiez toutes les largeurs que vous voulez utiliser. Si une taille spécifiée dépasse la largeur de l'image originale, celle-ci sera utilisée (c'est-à-dire que les images ne seront pas redimensionnées).
size	number	original size	Spécifiez une largeur que vous voulez utiliser. Si la taille spécifiée dépasse la largeur de l'image originale, celle-ci sera utilisée (c'est-à-dire que les images ne seront pas redimensionnées)
min	number	undefined	As an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you.
max	number	undefined	See min above
steps	number	4	Configure the number of images generated between min and max (inclusive)
quality	number	85	Qualité de compression JPEG
disableInDev	boolean	true	You can test ideal image behavior in dev mode by setting this to false. Tip: use network throttling in your browser to simulate slow networks.

Example configuration

Voici un exemple de configuration :

docusaurus.config.js

module.exports = {
  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,
      },
    ],
  ],
};