next optimized images
v2.6.1
版本3即將到來！它引入了一個完整的重寫，其中包含許多新功能和錯誤編織。如果您想幫助開發和測試即將到來的主要版本，請查看Canary分支機構以獲取安裝說明以及有關新功能的更多信息。 （RFC問題）
自動優化Next.js項目中使用的圖像（ jpeg ， png ， svg ， webp和gif ）。
圖像尺寸通常可以在20-60％之間降低，但這並不是next-optimized-images的唯一事情：
webp以較小的尺寸SVG sprites進行更好的性能（例如，在列表中） npm install next-optimized-images
版本2所需的節點> = 8。如果您需要支持較舊的節點版本，則仍然可以使用Next-Tirimized-Images版本1。
在您的next.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
] ) ;有關所有可用選項，請參見“配置”部分。
上面的示例在使用許多插件時使用了近來的複合 - plugins作為清潔API，請參閱其讀數，以獲取更詳細的示例。 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 Sprites來表現更好的性能的可能性。閱讀“精靈”部分以獲取更多信息。 | 關聯 |
webp-loader | 優化WebP映像，並可以將JPEG/PNG圖像轉換為即時的WebP（WebP資源查詢）。 | 關聯 |
lqip-loader | 產生低質量的圖像佔位符，並可以提取圖像的主要顏色（LQIP資源查詢） | 關聯 |
responsive-loader | 可以隨時調整圖像大小，並為srcset創建多個版本。重要 | 關聯 |
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-loaderoptimizeImagesInDev配置來更改。
根據您的構建/部署設置，也可以將其安裝為DevDections。只需確保在構建項目時可用包裝即可。
由於版本2.5，還可以選擇支持ico文件，但需要在handleImages Config中啟用。
您現在可以在您的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/SILS文件中的url()值中優化它們：
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/如果文件以低於映像的限制，則require(...)返回基本64 data-uri（ data:image/jpeg;base64,... ）。
否則， /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg next-optimized-images將您的圖像將您的圖像複製到Next.js的靜態文件夾中require(...)
您可以直接在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 Sprites 現在，該圖像將直接包含在您的HTML中，而無需數據-URI或對您的文件引用。
如上所述，這對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查詢參數”，則指定next-optimized-images會自動將JPEG/PNG圖像轉換為新的WebP格式。
對於尚未支持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查詢參數”始終恢復圖像URL，而不管內聯限制如何。
如果您經常使用此選項，則完全禁用inlinging並使用?inline param”中的單個文件，這也很有意義。
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-loader（npm install lqip-loader）
使用此資源查詢時，會創建一個很小的（約10x7像素）圖像。然後，您可以將此圖像顯示為佔位符，直到實際（大）圖像加載為止。
通常，您將像Mided.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-loader（npm install lqip-loader）
此資源查詢將返回帶有圖像主要顏色的十六進制值的數組。您也可以將其用作佔位符，直到像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 ）的對象，該對像也被優化，該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 param”（例如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動畫？包括可能是錯誤的選項，因為這最終以許多DOM元素為單位，尤其是在列表項目中使用SVG等。在這種情況下，您可以使用Svg-sprite- ?sprite使用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為所有這些文件類型註冊WebPack加載程序。如果您不希望其中一個由下一步優化的圖像處理，因為您可以使用另一個插件或自定義加載程序規則，只需將其從數組中刪除即可。
請注意，要處理的圖像並不意味著它也會自動優化。還必須安裝該圖像所需的優化軟件包。請閱讀“優化軟件包”部分以獲取更多信息。
如果處理圖像但未進行優化，則意味著原始圖像將被用於構建和復制。
由於版本2.5，也支持ico文件，但要向後兼容，則需要手動啟用它們。通過將'ico'添加到handleImages數組中，該插件還將處理ico文件。
類型： number
默認值： 8192
較小的文件將通過URL-LOADER與Data-uRI一起單行。此數字定義了最大文件大小（以字節為單位），以使圖像被嵌入。如果圖像更大，它將被複製到下一步的靜態文件夾中。
在兩種情況下，圖像都將得到優化。
要完全禁用映像內置，請將此值設置為-1 。然後，您將始終收回圖像URL。
類型： string
默認： 'images'
內部/static/在構建過程中將復製到圖像的文件夾名稱。
類型： string
默認值： `/_next/static/${imagesFolder}/`
應用於圖像URL的公共路徑。這可用於從S3等雲存儲服務中提供優化的圖像。
從版本2上，默認情況下，Next-Overtimized-Images使用Next.js的assetPrefx配置，但是您可以用imagesPublicPath特別適合圖像覆蓋它。
類型： string
默認值： `static/${imagesFolder}/`
應該用於圖像的輸出路徑。這可以用來具有自定義輸出文件夾。
類型： string
默認值： '[name]-[hash].[ext]'
優化圖像的文件名。確保保留[hash]部分，以便如果內容更改，它們會收到新的文件名。
類型： boolean
默認值： false
當圖像即時轉換為WebP時， .webp被附加到文件名上。例如， test.png成為test.png.webp 。如果您只想擁有一個諸如test.webp之類的文件名擴展名，則可以將此選項設置為true 。
類型： boolean
默認值： false
對於更快的開發構建和HMR，在開發模式下運行時，默認情況下不會優化圖像。在生產中，無論這種設置如何，圖像始終將得到優化。
需要可選的優化軟件包
imagemin-mozjpeg（npm install imagemin-mozjpeg）
類型： object
預設: {}
Mozjpeg用於優化JPEG圖像。您可以在此處指定它的選項。如果省略此選項，則使用mozjpeg的默認選項。
需要可選的優化軟件包
imagemin-optipng（npm install imagemin-optipng）
類型： object
預設: {}
Optipng默認情況下用於優化PNG圖像。您可以在此處指定它的選項。如果省略此選項，則使用optipng的默認選項。
需要可選的優化軟件包
imagemin-pngquant（npm install imagemin-pngquant）
類型： object
預設: {}
PNGQUANT是優化PNG圖像的另一種方法。如果省略此選項，則使用pngquant的默認選項。
需要可選的優化包裝件
imagemin-gifsicle（npm install imagemin-gifsicle）
類型： object
預設:
{
interlaced : true ,
optimizationLevel : 3 ,
} Gifsicle用於優化GIF圖像。您可以在此處指定它的選項。如果省略此選項，則使用gifsicle的默認選項。
需要可選的優化軟件包
imagemin-svgo（npm install imagemin-svgo）
類型： object
預設: {}
SVGO用於優化SVG圖像和圖標。您可以在此處指定它的選項。如果省略此選項，則使用svgo的默認選項。
單個SVGO插件可以在插件數組中被禁用/啟用：
{
svgo : {
plugins : [
{ removeComments : false }
]
}
} 需要可選的優化軟件包
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圖像，並將其他格式轉換為WebP。您可以在此處指定它的選項。如果您省略此選項，則使用imagemin-webp的默認選項。
需要可選的包裝
image-trace-loader（npm install image-trace-loader）
類型： object
預設: {}
將image-trace-loader用於?trace資源查詢”時，您可以在此對像中定義圖像跟踪加載程序的所有選項。如果省略此選項，則使用image-trace-loader的默認選項。
需要可選的優化軟件包
responsive-loader（npm install responsive-loader）
類型： object
預設: {}
可以在此處定義responsive-loader的配置。
需要可選的優化軟件包
responsive-loader（npm install responsive-loader）
類型： string
默認值： 'img-loader'
默認情況下，img-loader處理大多數請求。但是，如果您經常使用responsive-loader ，並且不想向每個需要添加?resize Query參數”，則可以將此值設置為'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 ,
} ,
} ] ,
] ) ; next.config.js文件中有許多插件時麻省理工學院©Cyril Wanner
