next img
1.0.0
特征
sharp优化WebP和后备图像loading="lazy" ）<Picture />组件简化了用法默认情况下， Next-IMG配置为使用：
768px的1断点所有这些设置和更多设置都可以在您的next.config.js或单个图像导入中更改。
由Humaans开发和使用。
默认情况下，Next.js或WebPack对优化图像无济于事。这意味着使用图像CDN或根本不优化图像的自定义配置或脚本，手工处理图像。 Next-IMG提供了为您的下一个项目添加图像的替代精简方法。它结合了next.js插件，自定义的webpack加载程序和一个反应组件，以最佳方式制作图像的方式几乎与键入<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 ：
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 Directory内部的临时缓存中。
查看更多用法示例。
默认插件配置选项：
{
// 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压缩选项的尖锐文档。
导入图像时，您可以使用查询参数自定义优化：
320px宽的图像，只需在此处指定320 ，该插件将根据densities配置生成任何必要的较大版本。1x和2x的图像尺寸，如果您只想产生每个大小的图像，或者1x,2x,3x等，则指定1x 。如果您想要更多的密度。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 Prop提供单个图像时，每个大小将配置为使用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，并且您将向大多数现代浏览器提供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优化插件添加到管道中。这样，用户可以控制如何更加格拉努阿。?sizes=100vw,50vw,900px转换为像素，这将允许动态类型的导入依赖于您的设计系统和图像的相对尺寸，例如，如果CSS表示“ 50VW”，则您无需手动完成该计算。require()它们。
