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创建多个版本。重要 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-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
