next img
1.0.0
특징
sharp 사용하여 웹 및 폴백 이미지를 최적화하십시오loading="lazy" )<Picture /> 구성 요소를 사용하여 간소화 된 사용기본적으로 Next-IMG는 사용하도록 구성됩니다.
768px 에서 1 개의 브레이크 포인트 이러한 모든 설정 및 그 이상은 next.config.js 또는 개별 이미지 가져 오기에서 변경할 수 있습니다.
Humaans가 개발하고 사용합니다.
기본적으로 Next.js 또는 Webpack은 이미지 최적화에 많은 도움이되지 않습니다. 이는 사용자 정의 구성 또는 스크립팅, 이미지 CDN을 사용하거나 이미지를 전혀 최적화하지 않는 것을 직접 처리하는 것을 의미합니다. Next-IMG는 Next.js 프로젝트에 이미지를 추가하기위한 대체 간소화 된 접근 방식을 제공합니다. 다음.js 플러그인, 사용자 정의 웹 팩 로더 및 React 구성 요소를 결합하여 <img src='foo.png' /> 입력하는 것만 큼 쉬운 방식으로 이미지를 최적의 방식으로 제공합니다.
요컨대, 다음은 다음을 취합니다.
< Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />가져 오기, 크기가 크기, 최적화, 캐시 (Git Repo에서 지속적으로) 및 다음 HTML을 출력합니다.
< picture >
< source
type =" image/webp "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
sizes =" (max-width: 768px) 375px, 800px "
/>
< source
type =" image/jpeg "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
sizes =" (max-width: 768px) 375px, 800px "
/>
< img
src =" /_next/static/images/[email protected] "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
width =" 375 "
height =" 250 "
alt =" Jellyfish "
/>
</ picture >예를 봅니다.
패키지를 설치하십시오
npm install next-img
next.config.js 에 추가하십시오 .config.js :
const withImg = require ( 'next-img/plugin' )
module . exports = withImg ( {
nextImg : {
breakpoints : [ 768 ] ,
} ,
} ) 응용 프로그램에서 이미지를 가져 와서 <Picture /> 구성 요소를 사용하여 포함하십시오.
import { Picture } from 'next-img'
import jelly from './images/jelly.jpg?sizes=375,800'
export default ( ) => < Picture src = { jelly } />또는 인라인 :
import { Picture } from 'next-img'
export default ( ) => < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } />이 특정 예제는 다음 이미지를 생성합니다.
크기가 크고 최적화 된 이미지는 개발 중에 프로젝트의 루트에있는 resources 디렉토리에 저장됩니다. 즉, 이미지 가져 오기 매개 변수 또는 플러그인 구성을 조정하면 더 이상 프로젝트에서 사용하지 않는 추가 이미지가 생성 될 수 있습니다. 이 경우 next-img 명령을 실행하여 불필요한 이미지를 제거하고 누락 된 이미지를 작성하십시오.
npx next-img
이제 소스 컨트롤에 대한 resources 디렉토리를 확인하여 나중에 개발 및 생산 구축을 위해 재사용하십시오. persistentCache: false 플러그인 구성에서 설정 하여이 기능을 해제 할 수 있습니다.이 경우 이미지는 .next 디렉토리 내부의 임시 캐시에만 저장됩니다.
더 많은 사용 예제를보십시오.
기본 플러그인 구성 옵션 :
{
// global settings for images, can be overriden per image
breakpoints : [ 768 ] ,
densities : [ '1x' , '2x' ] ,
// output image quality configuration
jpeg : {
quality : 80 ,
webp : {
quality : 90 ,
reductionEffort : 6 ,
} ,
} ,
png : {
quality : 100 ,
webp : {
reductionEffort : 6 ,
lossless : true ,
} ,
} ,
// the directory within Next.js build output
imagesDir : 'images' ,
// the output image name template
imagesName : '[name]-[size]@[density]-[hash].[ext]' ,
// advanced - customise the image public path
imagesPublicPath : null ,
// advanced - customise the image output path
imagesOutputPath : null ,
// persistent cache allows for fast deploy and
// development workflow by avoiding reprocessing
// images that were previously processed
persistentCache : true ,
persistentCacheDir : 'resources' ,
// this directory within .next is used in case persistent cache is turned off
cacheDir : path . join ( 'cache' , 'next-img' )
} jpeg/png/webp 압축 옵션에 대한 Sharp Documentation을 참조하십시오.
이미지를 가져 오면 쿼리 매개 변수를 사용하여 최적화를 사용자 정의 할 수 있습니다.
320px 너비의 이미지를 표시하는 경우 여기에 320 지정하면 플러그인이 densities 구성을 기반으로 필요한 더 큰 버전을 생성합니다.1x 및 2x 크기의 이미지가 생성되면 크기 당 하나의 이미지 만 생성하려는 경우 1x 지정하거나 1x,2x,3x 등이 더 많은 경우 더 많은 밀도를 원합니다.jpeg 이미지의 품질 구성 옵션. jpeg->webp 설정은이 매개 변수에 중첩되어야합니다 ?jpeg[webp][quality]=95png 이미지의 품질 구성 옵션. 참고, png->webp 설정 설정은이 매개 변수에 중첩되어야합니다 ?png[webp][lossless]=false&png[webp][nearLossless]=true예 :
import img1 from './images/img.jpg'
import img2 from './images/img.jpg?sizes=375,900'
import img3 from './images/img.jpg?sizes=375,900&densities=1x'
import img4 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x'
import img5 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x&jpeg[quality]=70&jpeg[webp][quality]=70' next-img 에는 React 구성 요소가 포함되어 있으며 포함 이미지를 더 쉽게 만들 수 있습니다.
이 구성 요소에 액세스하는 소품은 다음과 같습니다.
img 태그로 전달됩니다. 이를 통해 alt , loading="lazy" 등과 같은 속성을 사용할 수 있습니다. src 소품을 통해 단일 이미지가 제공되면 HTML sizes attribute 속성을 사용하여 사용 가능한 각 중단 점마다 각 크기가 표시되도록 구성됩니다.
예를 들어, 브레이크 포인트 [375, 768] 및 ?sizes=100,400,800 <Picture> 구성 요소는 다음 sizes 속성을 적용합니다.
(max-width: 375px) 100px,
(max-width: 768px) 400px,
800px
src Prop를 통해 이미지 배열이 제공되면 각 이미지는 HTML media attribute 사용하여 사용 가능한 각 중단 점마다 표시되도록 구성됩니다.
예를 들어, 브레이크 포인트 [375, 768] 및 src=[img1, img2, img3] <Picture> 구성 요소는 다음 media 속성을 적용합니다.
< picture >
< source media =" (max-width: 480px) " sizes =" {{img1 width}} " />
< source media =" (max-width: 768px) " sizes =" {{img2 width}} " />
< source sizes =" {{img3 width}} " />
< img ... />
</ picture > <Picture /> 구성 요소를 사용해야합니까?
사진 구성 요소는 선택 사항입니다. 원하는대로 가져온 이미지 객체를 처리 할 수 있습니다.
이미지를 더 이상 최적화 할 수 없습니까?
예, ImageOptim 또는 기타 도구를 통해 jpg/png 통과하면 ~ 10% -20% 이상의 압축을 얻을 수 있습니다. 이 플러그인은 이미 잘 최적화 된 웹을 출력하고 대부분의 최신 브라우저에 Webp를 제공하므로 폴백 이미지이므로 jpg/png 의 추가 파일 크기를 짜낼 필요가 없습니다. 그러나 사용자 지정 압축 알고리즘이 필요할 수있는 사용 사례가있을 수 있으며 향후이 플러그인에서 임의의 변환에 대한 지원을 추가 할 수 있습니다.
이 프로젝트를 개발하려면 <Picture /> 구성 요소에 대한 감시자를 실행해야합니다.
npm install
npm run watch
예제를 놀이터로 사용할 수 있습니다.
cd example
npm install
next
예제 DIR에서 next-img 명령을 실행하려면 :
node ../bin/next-img
로드맵
jpg->webp 및 png->webp 전환에 대해 다른 구성을 허용하십시오 webp/jpg/png 출력을 끄십시오 ?raw 쿼리 지원 추가 next build 에 직접 연결하여 next-img 명령의 필요성을 제거하십시오. 그리고 앞으로이 프로젝트를 어디에서 찍을 수 있는지에 대한 아이디어는 다음과 같습니다.
imagemin Optimization 플러그인을 파이프 라인에 추가 할 수 있습니다. 이런 식으로 사용자는 이미지를보다 화려하게 최적화하는 방법을 제어 할 수 있습니다.?sizes=100vw,50vw,900px 에서 픽셀에서 픽셀을 픽셀로 변환하면,이를 통해 디자인 시스템에 의존하는 동적 종류의 가져 오기와 이미지의 상대적 크기 조정을 허용합니다.require() .
