如果你用过Next.js，那么很可能邂逅过Next Image组件。此图像优化解决方案不仅支持webp和avif等现代格式，还可以针对不同屏幕尺寸生成量身定制的多个版本。
要想获得这种魔力，只需将以下代码添加到页面：
import Image from 'next/image';export default function Page() { return ( <Image src="/profile.png" width={500} height={500} alt="Picture of the author" /> );}不过，就像其他任何魔法一样，只有打好坚实的基础，才能熟练的运用自如。
在本文中，我们将探讨Next Image的工作原理，并澄清一些常见误解。
next/image的底层架构主要由三个组件组成：
生成的URL如下：
/_next/image?url=/images/example.jpg&w=640&q=75这样编码的URL接受两个参数：w（宽度）和q（质量）。我们发现没有h（高度）属性，这个我们稍后讨论。
Next Image API用作图像代理，类似于IPX。它执行以下任务：
Next Image根据特定条件使用不同的图像优化库：Sharp或Squoosh。
Sharp是一个快速高效的图像优化node.js模块，利用原生的libvips库。
Squoosh是一个完全基于节点的图像优化解决方案。有点慢，但不需要在计算机上安装任何其他库。
因此，一般Sharp用于生产环境，而在本地环境中默认使用Squoosh。
p.s.我建议在本地环境中也使用Sharp。虽然Sharp和Squoosh优化图像的方式非常相似，但与Squoosh相比，Sharp的压缩算法会导致颜色下降。这可能会导致生产环境和本地环境之间视觉行为的差异，尤其是在尝试将图像的背景颜色与页面背景匹配时。
了解了next/image背后的主要架构后，让我们一起辨别一些常见的误解，以便更有效地利用它。
开发人员中有个常见的误解是next/image可以裁剪图像。之所以会出现这种混淆，是因为宽度、高度和填充属性可以传递给组件，从而给人一种图像已被裁剪的印象。
实际上，情况并非如此。
Next Image组件主要将宽度和高度用来分配给img标记，以防止布局偏移。
KkK28资讯网——每日最新资讯28at.com
为什么呢？
KkK28资讯网——每日最新资讯28at.com
对于next/image，有两种方法可用于加载本地图像：
import Image from 'next/image';import profileImg from './profile.jpg';export default function Page() { return ( <> {/* Using absolute path */} <Image src="/profile.png" width={500} height={500} alt="Picture of the author" /> {/* Using imported image via relative path */} <Image src={profileImg} alt="Picture of the author" /> </> );}在处理示例、教程甚至开源项目中的本地图像时，使用绝对路径很普遍。
可以看到，除了自动宽度/高度分配之外没有显着差异。
但是，有区别。
当你通过绝对路径从公用文件夹访问图像时，Next.js遵循目标服务器的缓存策略，默认情况下，是30天的缓存策略而不是public,max-age=31536000,immutable。
对图像资源使用30天缓存策略会显著降低Lighthouse分数。
next/image组件接受sizes属性，类似于html img sizes属性。
但是，它也执行一些独特的操作。
sizes属性与srcset协同工作，接受应激活的浏览器条件和图像宽度列表。
以下是图片使用sizes的示例：
<img srcset="/img/html/vangogh-sm.jpg 120w, /img/html/vangogh.jpg 193w, /img/html/vangogh-lg.jpg 278w" sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px">让我们深入了解细节以便理解得更透彻。当你使用Next Image而不指定sizes属性时，srcset将包含两个URL：一个用于标准版本（x1），另一个用于Retina版本（x2）。
通过这样的设置，在Retina设备上使用时，浏览器将始终选择Retina版本。这种偏好是由于在srcset中使用了1x和2x语法而产生的。
<img srcset=" /_next/image?url=%2Fimages%2Fexample.jpg&w=640&q=75 1x, /_next/image?url=%2Fimages%2Fexample.jpg&w=1080&q=75 2x "/>浏览器将其解释为：加载这个URL为2x像素密度，另一个URL为1x像素密度。
因此，如果桌面上的图像版本小于移动设备或平板电脑上的图像版本，则浏览器将始终使用默认的Next Image语法加载较大的版本。
然而，不幸的是，这可能会导致性能欠佳并降低Lighthouse分数。
但是，有一种方法可以指示浏览器根据合适的宽度加载图像。不是向srcset URL提供1x、2x参数，而是指定图像的宽度。
例如，浏览器中如果有以下说明：
<img srcset=" /_next/image?url=%2Fimages%2Fexample.jpg&w=640&q=75 640w, /_next/image?url=%2Fimages%2Fexample.jpg&w=1080&q=75 1080w "/>在这种情况下，浏览器会为页面上使用的当前尺寸选择最合适的图像。
如果移动图片的宽度为600px（Retina为1200px），则将选择1080w版本。
同时，如果桌面图像仅使用300px（Retina为600px），浏览器会选择 640w。
此方法的优点在于加载最适合当前屏幕尺寸的图像，通过减小图像大小来提高性能。
下面让我们使用100vw技巧将此策略应用于Next Image。
虽然你不能直接指示Next Image在URL附近使用width（w）参数而非像素密度（1x）选项，但可以应用从Next Image的编码方式生成的解决方法：
为了说明这一点，一起来看看100vw生成的代码：
<img sizes="100vw" srcset=" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=3840&q=75 3840w " src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=3840&q=75"/>如果sizes中包含px值（例如(max-width: 1024px) 800px, 300px），则URL列表进一步扩展，达到默认配置16。
理想情况下，我更愿意为特定图像生成4个URL，类似于其他框架，而不是使用许多不必要的选项来膨胀HTML，且这些选项中可能没有一个适合我的需求。
关键点：要用更多版本填充srcset以获得在各种分辨率下更好的性能，你可以简单地将sizes设置为100vw。
此技巧强制创建8个不同尺寸——从640px开始的URL。
但是，由于此方法很容易增大HTML大小 - 特别是如果添加了额外的imageSizes或deviceSizes的话，因此慎用此方法。
我个人认为对于需要在许多不同地方使用具有不同图像比例的大型项目，这种生成平均大小版本的方法很多时候是有益的。
这些版本可以满足大多数方案，更频繁地访问缓存，同时保持易用性。
Next Image简化了图像管理并有着显著优势，它提供类似于第三方解决方案的高级裁剪和精确调整大小等附加功能。
同时有专门的组件可进行微调。
我特别喜欢它的自动化方法——生成0.25x、0.5x、1x和2x宽度的四个图像版本。
本文链接：http://www.28at.com/showinfo-26-82364-0.html教你如何玩转Next Image
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
