📦 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
- Yarn
- pnpm
npm install --save @docusaurus/plugin-ideal-image
yarn add @docusaurus/plugin-ideal-image
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 l'originale est plus petite, utiliser cette taille.
steps: 2, // le nombre maximum d'images générées entre min et max (inclus)
disableInDev: false,
},
],
],
};