๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ
๋ฒ„์ „: 2.4.3

๐Ÿ“ฆ plugin-ideal-image

์•„์ฃผ ์ด์ƒ์ ์ธ ์ด๋ฏธ์ง€(๋ฐ˜์‘ํ˜•, ์ง€์—ฐ ๋กœ๋”ฉ, ์ €ํ™”์งˆ ํ”Œ๋ ˆ์ด์Šคํ™€๋”)๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ํ”Œ๋Ÿฌ๊ทธ์ธ์ž…๋‹ˆ๋‹ค.

์ •๋ณด

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 install --save @docusaurus/plugin-ideal-image

Usageโ€‹

ํ•ด๋‹น ํ”Œ๋Ÿฌ๊ทธ์ธ์€ PNG, GIF, 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โ€‹

์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ํ•„๋“œ

์˜ต์…˜ํƒ€์ž…๊ธฐ๋ณธ๊ฐ’์„ค๋ช…
namestringideal-img/[name].[hash:hex:7].[width].[ext]๋งŒ๋“ค์–ด์งˆ ํŒŒ์ผ์„ ์œ„ํ•œ ํŒŒ์ผ๋ช… ํ…œํ”Œ๋ฆฟ
sizesnumber[]original size์›ํ•˜๋Š” ๋ชจ๋“  ๋„ˆ๋น„๊ฐ’์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์„ค์ •ํ•œ ํฌ๊ธฐ๊ฐ€ ์›๋ณธ ์ด๋ฏธ์ง€ ๋„ˆ๋น„๋ณด๋‹ค ํฌ๋‹ค๋ฉด ๋‹ค์Œ์— ์„ค์ •ํ•œ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค(์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒŒ ๋งŒ๋“ค์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค).
sizenumberoriginal size์›ํ•˜๋Š” ๋„ˆ๋น„๊ฐ’์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์„ค์ •ํ•œ ํฌ๊ธฐ๊ฐ€ ์›๋ณธ ์ด๋ฏธ์ง€ ๋„ˆ๋น„๋ณด๋‹ค ํฌ๋‹ค๋ฉด ๋‹ค์Œ์— ์„ค์ •ํ•œ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค(์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒŒ ๋งŒ๋“ค์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค).
minnumberundefinedAs an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you.
maxnumberundefinedSee min above
stepsnumber4Configure the number of images generated between min and max (inclusive)
qualitynumber85JPEG ์••์ถ• ์ˆ˜์ค€์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
disableInDevbooleantrueYou 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โ€‹

๋‹ค์Œ์€ ์„ค์ • ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค:

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,
},
],
],
};