📦 plugin-ideal-image

제품 빌드 시 가장 최적의 이미지(반응형, 지연된 로딩, 이미지 자리 표시자)를 만들어주는 도큐사우루스 플러그인입니다.

설치

npm

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

Yarn

yarn add @docusaurus/plugin-ideal-image

설정

docusaurus.config.js 파일을 수정합니다.

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

사용법

해당 플러그인은 PNG, GIF, JPG 포맷만 지원합니다.

import Image from '@theme/IdealImage';import thumbnail from './path/to/img.png';
// 리액트 코드<Image img={thumbnail} />
// 또는 아래와 같은 코드<Image img={require('./path/to/img.png')} />

옵션

옵션	타입	기본값	설명
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	만들어질 파일을 위한 파일명 템플릿
sizes	array	원본 크기	원하는 모든 너비값을 설정합니다. 설정한 크기가 원본 이미지 너비보다 크다면 다음에 설정한 이미지 크기를 사용합니다(이미지 크기를 크게 만들지는 않습니다).
size	integer	원본 크기	원하는 너비값을 설정합니다. 설정한 크기가 원본 이미지 너비보다 크다면 다음에 설정한 이미지 크기를 사용합니다(이미지 크기를 크게 만들지는 않습니다).
min	integer		직접 sizes 값을 설정하지 않고 min, max, steps 값만 설정해서 자동으로 크기가 정해지도록 합니다.
max	integer		min 설명을 참고하세요.
steps	integer	4	min, max 값을 (포함한) 값 사이에 만들 이미지 숫자를 설정합니다.
quality	integer	85	JPEG 압축 수준을 설정합니다.