📦 plugin-ideal-image

Plug-in do Docusaurus para gerar uma imagem ideal (responsivo, carregamento lento e espaço reservado de baixa qualidade) nas compilações de produção.

Instalação

npm

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

Yarn

yarn add @docusaurus/plugin-ideal-image

Configuração

Modifique seu docusaurus.config.js

module.exports = {  ...  plugins: ['@docusaurus/plugin-ideal-image'],  ...}

Utilização

Este plugin suporta apenas os formatos PNG e 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')} />

Opções

Opção	Tipo	Padrão	Descrição
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	Nome do template para arquivos de saída.
sizes	array	tamanho original	Especifique todas as larguras que deseja usar. Se um tamanho específico exceder a largura da imagem original, este último será usado (ou seja, as imagens não serão dimensionadas).
size	integer	tamanho original	Especifique uma largura que deseja usar; se o tamanho especificado exceder a largura da imagem original, a última será usada (ou seja, as imagens não serão aumentadas)
min	integer		Como alternativa à especificação manual de sizes, você pode especificar min, max e steps, e os tamanhos serão gerados para você.
max	integer		Ver min acima
steps	integer	4	Configure o número de imagens geradas entre min e max (inclusive)
quality	integer	85	Qualidade de compressão JPEG