📦 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

Par défaut, le plugin est inactif en développement pour que vous puissiez toujours voir des images à grande échelle. Si vous voulez déboguer le comportement d'image idéal, vous pouvez définir l'option disableInDev à 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';

// votre code React
<Image img={thumbnail} />

// ou
<Image img={require('./path/to/img.png')} />

attention

Ce plugin enregistre un chargeur Webpack qui change le type des images qui sont import/require :

• Avant : string
• Après : {preSrc: string, src: import("@theme/IdealImage").SrcImage}

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[]	taille originale	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	taille originale	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		Comme alternative à la spécification manuelle des sizes, vous pouvez spécifier min, max et steps, et les tailles seront générées pour vous.
max	number		Voir min ci-dessus
steps	number	4	Configurez le nombre d'images générées entre min et max (inclusif)
quality	number	85	Qualité de compression JPEG
disableInDev	boolean	true	Vous pouvez tester le comportement idéal de l'image en mode dev en mettant cette valeur à false. Astuce : utilisez la limitation du réseau dans votre navigateur pour simuler des réseaux lents.

Exemple de configuration

Voici un exemple de configuration :

docusaurus.config.js

export default {
  plugins: [
    [
      '@docusaurus/plugin-ideal-image',
      {
        quality: 70,
        max: 1030, // taille maximale de l'image redimensionnée.
        min: 640, // taille minimale de l'image redimensionnée. si celle de l'original est inférieure, utilisez cette taille.
        steps: 2, // le nombre maximum d'images générées entre min et max (inclus)
        disableInDev: false,
      },
    ],
  ],
};