Aller au contenu principal
Version: Canary 🚧

📦 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 install --save @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 :

OptionTypePar défautDescription
namestringideal-img/[name].[hash:hex:7].[width].[ext]Modèle du nom de fichier pour les fichiers en sortie.
sizesnumber[]taille originaleSpé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).
sizenumbertaille originaleSpé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)
minnumberComme 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.
maxnumberVoir min ci-dessus
stepsnumber4Configurez le nombre d'images générées entre min et max (inclusif)
qualitynumber85Qualité de compression JPEG
disableInDevbooleantrueVous 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,
},
],
],
};