next optimized images 다운로드 - next optimized images 소스 코드 다운로드

? 다음 최적화 이미지

버전 3이오고 있습니다! 많은 새로운 기능과 버그 수정이있는 완전한 다시 쓰기를 소개합니다. 다가오는 주요 버전을 개발하고 테스트하는 데 도움이하려면 Canary Branch에서 설치 지침 및 새로운 기능에 대한 자세한 정보를 확인하십시오. (RFC 문제)

Next.js Projects ( jpeg , png , svg , webp 및 gif )에 사용되는 이미지를 자동으로 최적화합니다.

이미지 크기는 종종 20-60%로 줄어들 수 있지만 next-optimized-images 하는 유일한 것은 아닙니다.

빌드 중에 이미지를 최적화하여 이미지 크기를 줄입니다
진보적 인 이미지를 제공하여 로딩 속도를 향상시킵니다 (지원하는 형식)
HTTP 요청 및 추가 왕복을 저장하기 위해 작은 이미지를 상인
컨텐츠 해시를 파일 이름에 추가하여 이미지가 CDN 레벨과 브라우저에서 오랫동안 캐싱 될 수 있습니다.
오랜 시간 동안 여러 빌드를 통해 동일한 이미지 URL
파일 별 핸들링/설정에 대한 쿼리 매개 변수를 제공합니다
JPEG/PNG 이미지는 훨씬 더 작은 크기를 위해 즉시 webp 로 변환 할 수 있습니다.
동일한 아이콘을 여러 번 사용할 때 더 나은 성능을 위해 SVG sprites 사용할 수 있습니다 (예 : 목록에서)
게으른로드 이미지를 통해 이미지를 크기를 조정 하거나 다른 자리 표시자를 생성 할 수 있습니다.

설치

 npm install next-optimized-images

Node> = 8은 버전 2에 필요합니다. 이전 노드 버전을 지원 해야하는 경우 다음 최적화 된 이미지의 버전 1을 사용할 수 있습니다.

다음.js 구성 파일에서 플러그인을 활성화합니다.

 // next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;

module . exports = withPlugins ( [
  [ optimizedImages , {
    /* config for next-optimized-images */
  } ] ,

  // your other plugins here

] ) ;

사용 가능한 모든 옵션은 구성 섹션을 참조하십시오.

켈 버전 2에서 이미지는 더 이상 상자에서 최적화되지 않습니다. 이 플러그인 외에 필요한 최적화 패키지를 설치해야합니다. 이렇게하면 사용하지 않는 큰 최적화 라이브러리를 다운로드하지 않습니다. 모든 선택적 최적화 패키지의 표를 확인하십시오.

위의 예는 많은 플러그인을 사용할 때 더 깨끗한 API에 차세대 플러그 인을 사용합니다. 더 자세한 예는 readme를 참조하십시오. next-optimized-images 표준 플러그인 API 와도 작동합니다.

 // next.config.js
const withOptimizedImages = require ( 'next-optimized-images' ) ;

module . exports = withOptimizedImages ( {
  /* config for next-optimized-images */

  // your config for other plugins or the general next.js here...
} ) ;

최적화 패키지

버전 2부터 시작 하여이 플러그인 외에 프로젝트에 필요한 최적화 패키지를 설치해야합니다. next-optimized-images 지원되는 모든 패키지를 감지하여 사용합니다.

따라서 NPM 으로이 패키지를 설치하면됩니다. 그 후에는 추가 단계가 필요하지 않습니다.

다음과 같은 최적화 패키지를 사용할 수 있으며 지원됩니다.

최적화 패키지	설명	프로젝트 링크
`imagemin-mozjpeg`	JPEG 이미지를 최적화합니다.	링크
`imagemin-optipng`	PNG 이미지를 최적화합니다.	링크
`imagemin-pngquant`	PNG 이미지를 최적화하기위한 대안.	링크
`imagemin-gifsicle`	GIF 이미지를 최적화합니다.	링크
`imagemin-svgo`	SVG 이미지와 아이콘을 최적화합니다.	링크
`svg-sprite-loader`	더 나은 성능을 위해 SVG 스프라이트를 사용할 수있는 가능성을 추가합니다. 자세한 내용은 스프라이트 섹션을 읽으십시오.	링크
`webp-loader`	Webp Images를 최적화하고 JPEG/PNG 이미지를 즉시 Webp (Webp Resource Query)로 변환 할 수 있습니다.	링크
`lqip-loader`	품질이 낮은 이미지 자리 표시자를 생성하고 이미지의 지배적 인 색상 (LQIP 리소스 쿼리)을 추출 할 수 있습니다.	링크
`responsive-loader`	즉석에서 이미지를 조정하고 `srcset` 위해 여러 버전을 만들 수 있습니다. 중요 : `jimp` (노드 구현, 느린) 또는 `sharp` (이진, 더 빠른)를 추가로 설치해야합니다.	링크
`image-trace-loader`	원본 이미지 (트레이스 리소스 쿼리)를로드하는 동안 자리 표시 자로 사용할 수있는 SVG 이미지 개요를 생성합니다.	링크

예 : 프로젝트에 JPG, PNG 및 SVG 이미지가있는 경우 실행해야합니다.
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo

모든 옵션 패키지를 설치하려면 실행하십시오.

npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader

켈 기본적으로 이미지는 개발 빌드가 아닌 생산 빌드 에만 최적화됩니다. 그러나 이것은 optimizeImagesInDev 구성으로 변경 될 수 있습니다.

빌드/배포 설정에 따라이를 DevDependencies로 설치하는 것도 가능합니다. 프로젝트를 구축 할 때 패키지를 사용할 수 있는지 확인하십시오.

버전 2.5이므로 ico 파일도 선택적으로 지원되지만 handleImages 구성에서 활성화되어야합니다.

용법

이제 React 구성 요소에서 직접 이미지를 가져 오거나 요구할 수 있습니다.

 import React from 'react' ;

export default ( ) => (
  < div >
    < img src = { require ( './images/my-image.jpg' ) } />
    < img src = { require ( './images/my-small-image.png' ) } />
    < img src = { require ( './images/my-icon.svg' ) } />
  </ div >
) ;

/**
 * Results in:
 *
 * <div>
 *   <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 *   <img src="data:image/png;base64,..." />
 *   <img src="/_next/static/images/my-icon-572812a2b04ed76f93f05bf57563c35d.svg" />
 * </div>
 */

개발 환경에서 빌드 시간을 줄이기 위해 이미지가 기본적으로 생산에서만 최적화되도록하십시오.

CSS 모듈을 사용하는 경우이 패키지는 이미지를 감지하고 CSS/SASS/Less Files의 url() 값으로 최적화했습니다.

 .Header {
  background-image : url ( ' ./images/my-image.jpg ' );
}

/* *
 * Results in:
 *
 * .Header {
 *   background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
 * }
 */

파일이 이미지를 인화하는 한계 아래에 있으면 require(...) 은 Base64 Data-URI ( data:image/jpeg;base64,... )를 반환합니다.

그렇지 않으면 next-optimized-images 이미지가 Next.js의 정적 폴더에 복사되며 require(...) 은이 경우 이미지로 경로를 반환합니다 ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg ).

src 속성의 이미지 또는 url() 값의 CSS 파일에서 두 변형을 직접 사용할 수 있습니다.

쿼리 매개 변수

Flow 또는 Eslint-Plugin-Import를 사용하고 있고 쿼리 매개 변수와 관련된 몇 가지 문제가있는 경우 @ELEITH가 게시 한 솔루션을 확인하십시오.

파일을 참조하거나 Base64 Data-URI를 받고 싶지 않은 경우가 있지만 실제로 원시 파일을 HTML에 직접 포함시키려는 경우가 있습니다. 특히 SVG의 경우 이미지의 src 속성에있는 경우 CSS로 스타일을 지정할 수 없기 때문입니다.

따라서 이미지를 가져올 때 쿼리 매개 변수로 지정할 수있는 추가 옵션이 있습니다.

?include : 원시 파일 포함 직접 (SVG 아이콘에 유용함)
?webp : JPEG/PNG 이미지를 즉석에서 Webp로 변환
?inline : 이미지를 인화하는 강제 (Data-Uri)
?url : 작은 이미지에 대한 URL 강제 (Data-URI 대신)
?original : 원본 이미지를 사용하고 최적화하지 마십시오.
?lqip : 품질이 낮은 이미지 자리 표시자를 생성합니다
?lqip-colors : 이미지의 지배적 인 색상을 추출하십시오
?trace : 추적 윤곽선을 자리 표시 자로로드하여 사용하십시오
?resize : 이미지 크기를 조정하십시오
?sprite : SVG 스프라이트를 사용하십시오

?포함하다

이미지는 이제 데이터 루리 또는 파일에 대한 참조없이 HTML에 직접 포함됩니다.

위에서 설명한 바와 같이, 이것은 SVG에 유용하므로 CSS로 스타일을 지정할 수 있습니다.

 import React from 'react' ;

export default ( ) => (
  < div dangerouslySetInnerHTML = { { __html : require ( './images/my-icon.svg?include' ) } } />
) ;

/**
 * Results in:
 *
 * <div>
 *   <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
 *     <path d="M8 0C3.589 0 0 3.589 0 8s3.589 ..." style="filled-opacity:1" fill-rule="evenodd">
 *     </path>
 *   </svg>
 * </div>
 */

이미지는 콘텐츠에 직접 포함되어 있어도 여전히 최적화됩니다 (그러나 기본적으로 생산에서만).

? 웹

옵션 최적화 패키지 webp-loader ( npm install webp-loader )가 필요합니다.

Webp는 훨씬 더 좋고 작은 이미지 형식이지만 아직 일반적인 것은 아니며 개발자는 종종 JPEG/PNG 이미지 만받습니다.

이 ?webp Query 매개 변수가 지정되면 next-optimized-images JPEG/PNG 이미지를 새로운 웹p 형식으로 자동 변환합니다.

아직 Webp를 지원하지 않는 브라우저의 경우 <picture> 태그를 사용하여 폴백을 제공 할 수도 있습니다.

 import React from 'react' ;

export default ( ) => (
  < picture >
    < source srcSet = { require ( './images/my-image.jpg?webp' ) } type = "image/webp" />
    < source srcSet = { require ( './images/my-image.jpg' ) } type = "image/jpeg" />
    < img src = { require ( './images/my-image.jpg' ) } />
  </ picture >
) ;

/**
 * Results in:
 * <picture>
 *   <source srcset="/_next/static/images/my-image-d6816ecc28862cf6f725b29b1d6aab5e.jpg.webp" type="image/webp" />
 *   <source srcset="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" type="image/jpeg" />
 *   <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 * </picture>
 */

? 인라인

파일 크기가 해당 한계 아래에있는 경우 파일을 참조하는 대신 컨텐츠에서 직접 데이터 오리로 포함하는 이미지를 인화하는 데 대한 제한을 지정할 수 있습니다.

일반적으로 너무 높은 한도를 지정하고 싶지 않지만 여전히 더 큰 이미지를 인화하려는 경우가있을 수 있습니다.

이 경우 글로벌 한계를 더 높은 값으로 설정할 필요는 없지만 ?inline 쿼리 옵션을 사용하여 단일 이미지에 대한 예외를 추가 할 수 있습니다.

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?inline' ) } />
) ;

/**
 * Results in:
 *
 * <img src="data:image/png;base64,..." />
 *
 * Even if the image size is above the defined limit.
 */

인라인은 정확히이 가져 오기에만 적용되므로 ?inline 옵션없이 이미지를 두 번째로 가져 오면 한계 위에있는 경우 일반적으로 파일로 참조됩니다.

? url

Inlining에 대한 정의 된 한계보다 작은 이미지가 있으면 일반적으로 자동으로 인쇄됩니다. 특정 작은 파일이 인쇄되기를 원하지 않으면 인라인 한계에 관계없이 ?url 쿼리 파라를 사용하여 항상 이미지 URL을 되 찾을 수 있습니다.

이 옵션을 많이 사용하는 경우 인라인을 완전히 비활성화하고 단일 파일의 ?inline 매개 변수를 사용하는 것이 합리적 일 수 있습니다.

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?url' ) } />
) ;

/**
 * Results in:
 *
 * <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 *
 * Even if the image size is below the defined inlining limit.
 */

인라인은 정확히이 가져 오기에 대해서만 비활성화되므로 ?url 옵션없이 이미지를 두 번째로 가져 오면 한계 아래에 있으면 다시 감소됩니다.

?원래의

이미지는 최적화되지 않고 그대로 사용되지 않습니다. 이미지가 이미 최적화 된 이미지 (예 : 내보내기 중)를 알고 있으므로이 쿼리 매개 변수를 사용하는 것이 합리적이므로 두 번째로 다시 최적화되지 않습니다.

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?original' ) } />
) ;

이것은 또한 ?url 또는 ?inline 리소스 쿼리 (예 ?original&inline )와 결합 할 수 있습니다.

? LQIP

옵션 패키지 lqip-loader ( npm install lqip-loader )가 필요합니다.

이 리소스 쿼리를 사용하면 매우 작은 (약 10x7 픽셀) 이미지가 생성됩니다. 그런 다음 실제 이미지가로드 될 때 까지이 이미지를 자리 표시 자로 표시 할 수 있습니다.

일반적 으로이 작은 이미지를 Medium.com 과 마찬가지로 실제 이미지와 같은 크기로 확장합니다. 크롬에서 스트레칭 이미지를 더 잘 보이게하려면이 솔루션을 확인하고 이미지에 블러 필터를 추가하십시오.

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;

/**
 * Replaces the src with a tiny image in base64.
 */

? lqip-colors

옵션 패키지 lqip-loader ( npm install lqip-loader )가 필요합니다.

이 리소스 쿼리는 이미지의 지배적 인 색상의 16 진수 값이있는 배열 을 반환합니다. Google 사진 검색 과 같이 실제 이미지가로드 될 때까지 (예 : 배경으로) 자리 표시 자로 사용할 수 있습니다.

반환 된 색상의 수는 다를 수 있으며 이미지의 다른 색상에 따라 다릅니다.

 import React from 'react' ;

export default ( ) => (
  < div style = { { backgroundColor : require ( './images/my-image.jpg?lqip-colors' ) [ 0 ] } } > ... </ div >
) ;

/**
 * require('./images/my-image.jpg?lqip-colors')
 *
 * returns for example
 *
 * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']
 */

?추적하다

옵션 패키지 image-trace-loader ( npm install image-trace-loader )가 필요합니다.

?trace 자원 쿼리를 사용하면 원본 이미지를로드하면서 자리 표시 자로 사용할 수있는 SVG 이미지 개요를 생성 할 수 있습니다.

 import React from 'react' ;
import MyImage from './images/my-image.jpg?trace' ;

export default ( ) => (
  < div >
    < img src = { MyImage . trace } />   { /* <-- SVG trace */ }
    < img src = { MyImage . src } />     { /* <-- Normal image which you want to lazy load */ }
  </ div >
) ;

/**
 * Results in:
 *
 * <div>
 *  <img src="data:image/svg+xml,...">
 *  <img src="/_next/static/images/image-trace-85bf5c58ce3d91fbbf54aa03c44ab747.jpg">
 * </div>
 */

require('./images/my-image.jpg?trace') 트레이스 ( trace )를 포함하는 객체를 상감 된 SVG로 반환하고 최적화되는 정상 이미지 ( src )를 반환합니다.

트레이스는 일반 이미지와 정확히 같은 너비와 높이를 갖습니다.

로더의 옵션은 플러그인 구성에서 설정할 수 있습니다.

? 크기를 조정하십시오

옵션 패키지 responsive-loader ( npm install responsive-loader ) 및 jimp (노드 구현, 느린) 또는 sharp (바이너리, 더 빠른)가 필요합니다.

?resize 후에는 이미지 크기를 조정하고 전체 소스 세트를 만들 수있는 responsive-loader 의 다른 쿼리를 추가 할 수 있습니다.

 import React from 'react' ;

const oneSize = require ( './images/my-image.jpg?resize&size=300' ) ;
const multipleSizes = require ( './images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000' ) ;

export default ( ) => (
  < div >
    { /* Single image: */ }
    < img src = { oneSize . src } />

    { /* Source set with multiple sizes: */ }
    < img srcSet = { multipleSizes . srcSet } src = { multipleSizes . src } />
  </ div >
) ;

size 또는 sizes 매개 변수 만 사용되면 ?resize 파라를 생략 할 수 있습니다 (예 : my-image.jpg?size=300 ). 그러나 responsive-loader 의 다른 모든 매개 변수에는 필요합니다.

또한 responsive 형 속성 ( next.config.js 파일)에서 글로벌 구성을 설정하고 예를 들어 이미지에 대해 하나를 지정하지 않을 때 생성되는 기본 크기 (예 : my-image.jpg?resize )를 정의 할 수 있습니다.

?요정

옵션 최적화 패키지 imagemin-svgo 및 svg-sprite-loader ( npm install imagemin-svgo svg-sprite-loader ).

SVG를 스타일링하거나 애니메이션 해야하는 경우, 포함하는 것이 잘못된 옵션 일 수 있습니다. 특히 목록 항목 등의 SVG를 사용할 때 많은 DOM 요소가 끝나기 때문에 SVG-Sprite-Loader를 사용하여 페이지에서 SVG 스프라이트를 자동으로 렌더링하고 주입하는 ?sprite 사용할 수 있습니다.

 import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;

export default ( ) => (
  < div >
    my page..
    < MyIcon />
  </ div >
) ;

수입 스프라이트로 전달 된 모든 소품은 <svg> 요소에 적용되므로 <MyIcon className="icon-class" /> 로 정상적으로 클래스를 추가 할 수 있습니다.

자신의 구성 요소를 구축하려면 svg-sprite-loader 객체도 노출됩니다.

 import React from 'react' ;
import icon from './icons/icon.svg?sprite' ;

export default ( ) => (
  < div >
    my page..
    < svg viewBox = { icon . viewBox } >
      < use xlinkHref = { `# ${ icon . id } ` } />
    </ svg >
  </ div >
) ;

서버 측 렌더링을 위해이 작업을 수행하려면 _document.jsx 파일에 이러한 변경 사항을 추가해야합니다 (아직이 파일이없는 경우 여기를 읽으십시오).

 // ./pages/_document.js
import Document , { Head , Main , NextScript } from 'next/document' ;
import sprite from 'svg-sprite-loader/runtime/sprite.build' ;

export default class MyDocument extends Document {
  static async getInitialProps ( ctx ) {
    const initialProps = await Document . getInitialProps ( ctx ) ;
    const spriteContent = sprite . stringify ( ) ;

    return {
      spriteContent ,
      ... initialProps ,
    } ;
  }

  render ( ) {
    return (
      < html >
        < Head > { /* your head if needed */ } </ Head >
        < body >
          < div dangerouslySetInnerHTML = { { __html : this . props . spriteContent } } />
          < Main />
          < NextScript />
        </ body >
      </ html >
    ) ;
  }
}

구성

이 플러그인은 mozjpeg, optipng, gifsicle 및 svgo를 기반으로 한 후드 아래에서 IMG-Loader를 사용합니다.

대부분의 경우 이러한 최적화기의 기본 옵션은 충분해야하지만 원하는 경우 사용 가능한 모든 옵션을 덮어 쓸 수 있습니다.

핸들링

유형 : string[]
기본값 : ['jpeg', 'png', 'svg', 'webp', 'gif']

next-optimized-images 이러한 모든 파일 유형에 대한 웹 팩 로더를 등록합니다. 예를 들어 다른 플러그인 또는 사용자 정의 로더 규칙이 있기 때문에 차기 최적화 이미지에서 처리하는이 중 하나를 원하지 않으면 배열에서 제거하십시오.

처리중인 이미지가 자동으로 최적화된다는 의미는 아닙니다. 해당 이미지에 필요한 최적화 패키지도 설치해야합니다. 자세한 내용은 최적화 패키지 섹션을 읽으십시오.

이미지가 처리되지만 최적화되지 않으면 원본 이미지가 빌드에 사용 및 복사됩니다.

버전 2.5이므로 ico 파일도 지원되지만 거꾸로 호환 되려면 수동으로 활성화해야합니다. handleImages 배열에 'ico' 추가하면 플러그인도 ico 파일을 처리합니다.

inlineimagelimit

유형 : number
기본값 : 8192

더 작은 파일에는 URL-Loader의 Data-URI가 인쇄됩니다. 이 숫자는 이미지의 최대 파일 크기 (바이트)를 감소시키는 것을 정의합니다. 이미지가 더 크면 다음의 정적 폴더에 복사됩니다.

두 경우 모두 이미지가 최적화됩니다.

이미지 수감을 완전히 비활성화하려면이 값을 -1 로 설정하십시오. 그러면 항상 이미지 URL을 되 찾을 수 있습니다.

ImagesFolder

유형 : string
기본값 : 'images'

폴더 이름 내부 /static/ 에서 이미지가 빌드 중에 복사 될 수 있습니다.

imagespublicpath

유형 : string
기본값 : `/_next/static/${imagesFolder}/`

이미지 URL에 사용되어야하는 공개 경로. 이것은 S3와 같은 클라우드 스토리지 서비스에서 최적화 된 이미지를 제공하는 데 사용할 수 있습니다.

Next-Opmenized-Images는 버전 2 ON에서 Next.js의 assetPrefx 구성을 기본적으로 사용하지만 이미지에 대해 imagesPublicPath 로 덮어 쓸 수 있습니다.

imagesOutputPath

유형 : string
기본값 : `static/${imagesFolder}/`

이미지에 사용해야하는 출력 경로. 사용자 정의 출력 폴더가있는 데 사용할 수 있습니다.

imagesName

유형 : string
기본값 : '[name]-[hash].[ext]'

최적화 된 이미지의 파일 이름. 컨텐츠가 변경되면 새 파일 이름을 받도록 [hash] 부품을 유지하십시오.

removeoriginalextension

유형 : boolean
기본값 : false

이미지가 즉석에서 Webp로 변환되면 .webp 파일 이름에 추가되었습니다. 예를 들어, test.png test.png.webp 되었습니다. test.webp 와 같은 파일 이름 확장자가 하나만 사용하려면이 옵션을 true 로 설정할 수 있습니다.

OptimizeImagesIndev

유형 : boolean
기본값 : false

더 빠른 개발 빌드 및 HMR의 경우 개발 모드에서 실행할 때 이미지가 기본적으로 최적화되지 않습니다. 생산에서 이미지는이 설정에 관계없이 항상 최적화됩니다.

Mozjpeg

옵션 최적화 패키지 imagemin-mozjpeg ( npm install imagemin-mozjpeg )가 필요합니다.

유형 : object
기본: {}

Mozjpeg는 JPEG 이미지를 최적화하는 데 사용됩니다. 여기에서 옵션을 지정할 수 있습니다. 이 옵션을 생략하면 mozjpeg 의 기본 옵션이 사용됩니다.

optipng

옵션 최적화 패키지 imagemin-optipng 가 필요합니다 ( npm install imagemin-optipng ).

유형 : object
기본: {}

OPTIPNG는 기본적으로 PNG 이미지를 최적화하는 데 사용됩니다. 여기에서 옵션을 지정할 수 있습니다. 이 옵션을 생략하면 optipng 의 기본 옵션이 사용됩니다.

pngquant

옵션 최적화 패키지 imagemin-pngquant 필요합니다 ( npm install imagemin-pngquant )

유형 : object
기본: {}

pngquant는 PNG 이미지를 최적화하는 대안적인 방법입니다. 이 옵션을 생략하면 pngquant 의 기본 옵션이 사용됩니다.

gifsicle

옵션 최적화 패키지 imagemin-gifsicle ( npm install imagemin-gifsicle )이 필요합니다.

유형 : object
기본:

 {
    interlaced : true ,
    optimizationLevel : 3 ,
}

Gifsicle은 GIF 이미지를 최적화하는 데 사용됩니다. 여기에서 옵션을 지정할 수 있습니다. 이 옵션을 생략하면 gifsicle 의 기본 옵션이 사용됩니다.

svgo

선택적 최적화 패키지 imagemin-svgo ( npm install imagemin-svgo )가 필요합니다.

유형 : object
기본: {}

SVGO는 SVG 이미지 및 아이콘을 최적화하는 데 사용됩니다. 여기에서 옵션을 지정할 수 있습니다. 이 옵션을 생략하면 svgo 의 기본 옵션이 사용됩니다.

플러그인 어레이에서 단일 SVGO 플러그인이 비활성화/활성화 될 수 있습니다.

 {
  svgo : {
    plugins : [
      { removeComments : false }
    ]
  }
}

svgspriteloader

옵션 최적화 패키지 imagemin-svgo 및 svg-sprite-loader ( npm install imagemin-svgo svg-sprite-loader ).

유형 : object
기본:

 {
  runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
}

SVG Sprite 옵션을 사용할 때 svg-sprite-loader 내부적으로 사용됩니다. 이 로더로 전달 된 구성을 여기에서 덮어 쓸 수 있습니다.

웹

옵션 최적화 패키지 webp-loader ( npm install webp-loader )가 필요합니다.

유형 : object
기본: {}

Imagemin-Webp는 웹 사이트 이미지를 최적화하고 다른 형식을 Webp로 변환하는 데 사용됩니다. 여기에서 옵션을 지정할 수 있습니다. 이 옵션을 생략하면 imagemin-webp 의 기본 옵션이 사용됩니다.

imagetrace

옵션 패키지 image-trace-loader ( npm install image-trace-loader )가 필요합니다.

유형 : object
기본: {}

?trace 리소스 쿼리에 image-trace-loader 사용하는 경우이 개체의 이미지 트레이스 로더의 모든 옵션을 정의 할 수 있습니다. 이 옵션을 생략하면 image-trace-loader 의 기본 옵션이 사용됩니다.

반응

옵션 최적화 패키지 responsive-loader ( npm install responsive-loader )이 필요합니다.

유형 : object
기본: {}

responsive-loader 의 구성은 여기에서 정의 될 수 있습니다.

Defaultimageloader

옵션 최적화 패키지 responsive-loader ( npm install responsive-loader )이 필요합니다.

유형 : string
기본값 : 'img-loader'

기본적으로 IMG-Loader는 대부분의 요청을 처리합니다. 그러나 responsive-loader 많이 사용하고 모든 요구에 쿼리 파라를 추가하고 싶지 ?resize 이 값을 'responsive-loader' 로 설정할 수 있습니다.

그 후, responsive-loader 추가 쿼리 매개 변수가 없어도 기본적으로 모든 JPEG 및 PNG 이미지를 처리합니다. 요청이 더 이상 전달되고 수정되지 않기 때문에 next-optimized-images 더 이상 최적화 된 쿼리 매개 변수를 사용할 수 없습니다. 다른 모든 형식 (SVG, Webp 및 GIF)은 이전과 같이 img-loader 와 함께 작동하므로 모든 쿼리 매개 변수를 사용할 수 있습니다.

최적화

유형 : boolean
기본값 : true

최적화 패키지가 설치되어 있지 않으면 이미지가 최적화되지 않습니다. 이 경우 빌드 중에 경고가 콘솔에 기록되어 가능한 오해에 대해 알려줍니다. 이 구성이 의도되어 있고 실제로 이미지를 최적화하기를 원하지 않으면이 값을 false 로 설정할 수 있으며 더 이상 경고를받지 못합니다.

예

여기에 지정된 옵션은 기본값 입니다.

따라서 사용 사례에 충분하다면 다음에 더 짧고 깨끗한 next.config.js 파일을 갖도록 지정할 필요가 없습니다.

 // next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;

module . exports = withPlugins ( [
  [ optimizedImages , {
    // these are the default values so you don't have to provide them if they are good enough for your use-case.
    // but you can overwrite them here with any valid value you want.
    inlineImageLimit : 8192 ,
    imagesFolder : 'images' ,
    imagesName : '[name]-[hash].[ext]' ,
    handleImages : [ 'jpeg' , 'png' , 'svg' , 'webp' , 'gif' ] ,
    removeOriginalExtension : false ,
    optimizeImages : true ,
    optimizeImagesInDev : false ,
    mozjpeg : {
      quality : 80 ,
    } ,
    optipng : {
      optimizationLevel : 3 ,
    } ,
    pngquant : false ,
    gifsicle : {
      interlaced : true ,
      optimizationLevel : 3 ,
    } ,
    svgo : {
      // enable/disable svgo plugins here
    } ,
    webp : {
      preset : 'default' ,
      quality : 75 ,
    } ,
  } ] ,
] ) ;