📦 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.

설치

npm

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

Yarn

yarn add @docusaurus/plugin-ideal-image

pnpm

pnpm add @docusaurus/plugin-ideal-image

Bun

bun add @docusaurus/plugin-ideal-image

사용법

해당 플러그인은 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')} />

참고

When plugin-ideal-image is installed, importing a supported image file no longer returns a plain URL string. Instead, it returns an object with the shape: { preSrc: string, src: { src: string, width: number, height: number } }.

If you need to use the image in a standard <img> tag, access it like this:

<img
  src={image.src.src}
  width={image.src.width}
  height={image.src.height}
  alt="description"
/>

To avoid dealing with this object shape directly, it is recommended to use the \<Image> component provided by this plugin instead.

경고

This plugin registers a Webpack loader that changes the type of imported/require images:

• Before: string
• After: {preSrc: string, src: import("@theme/IdealImage").SrcImage}

For pnpm users

Starting with pnpm 10, running pnpm install won't run dependency install scripts by default. You'll need additional pnpm configuration (issue) for our sharp image resizing dependency to install correctly, such as:

package.json

{
  "pnpm": {
    "onlyBuiltDependencies": ["fsevents"]
  }
}

설정

설정할 수 있는 필드

옵션	타입	기본값	설명
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	만들어질 파일을 위한 파일명 템플릿
sizes	number[]	original size	원하는 모든 너비값을 설정합니다. 설정한 크기가 원본 이미지 너비보다 크다면 다음에 설정한 이미지 크기를 사용합니다(이미지 크기를 크게 만들지는 않습니다).
size	number	original size	원하는 너비값을 설정합니다. 설정한 크기가 원본 이미지 너비보다 크다면 다음에 설정한 이미지 크기를 사용합니다(이미지 크기를 크게 만들지는 않습니다).
min	number		As an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you.
max	number		See min above
steps	number	4	Configure the number of images generated between min and max (inclusive)
quality	number	85	JPEG 압축 수준을 설정합니다.
disableInDev	boolean	true	You can test ideal image behavior in dev mode by setting this to false. Tip: use network throttling in your browser to simulate slow networks.

설정 예시

다음은 설정 예시입니다:

docusaurus.config.js

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