​译者 | 布加迪

审校 | 孙淑娟

图片是任何网站或应用程序的重要组成部分，它们有助于使内容更吸引人、外观更漂亮。然而，如果图片没有得到适当优化，它们也会减慢网站或应用程序的运行速度。

为何要优化图片？

优化图片之所以很重要，有以下几个原因：

• 有助于缩短网站或应用程序的加载时间。
• 可以减少客户端需要下载的数据量，从而节省带宽成本。
• 有助于提升网站或应用程序的整体性能。

如何优化Next.js网站中的图片？

有几种方法可以优化Next.js网站中的图片。一种方法是使用Image组件。该组件可自动优化图片以提升性能。

优化图片的另一种方法是使用内置的图片处理功能。Next.js可以自动调整大小、压缩和优化图片，以提升性能。

最后，您可以使用第三方库，比如react-optimized-image。这个库提供了各种图片优化功能。

使用Image组件

Image组件是优化Next.js网站中图片的最简单方法。若想使用它，只需从next/image包导入该组件。

一旦您导入了组件，就可以像使用React中的任何其他组件一样使用它。Image组件有几个道具（prop），您可以用来控制它如何渲染图片。

import Image from 'next/image'
export default function MyImage() {
return (
<Image
src="/my-image.jpg"
width="200"
height="200"
quality="100"
alt="My image"
/>
)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

在该例中，Image组件渲染的图片宽度为200px，高度为200px。您也可以使用CSS或Tailwind之类的框架，为您的应用程序和图片设置样式。

Image组件所需的一些道具是width、height、src和alt。src道具是您想要使用的图片的URL。可以使用width和height道具来设置图片的宽度和高度（以像素为单位）。alt道具是图片的替代文本。

Image组件的一些可选道具是布局、加载器、占位符和优先级。布局道具指定图片的布局。您可以使用加载器道具来指定自定义的图片加载器。占位符道具指定自定义的图片占位符。优先级道具指定图片的优先级。

使用Image组件的一些好处如下：

• 提升性能：使用Image组件的主要好处之一是提升性能。该组件可自动优化图片以提升性能。
• 自动调整图片大小：使用Image组件的另一个好处是自动调整图片大小。该组件可以自动调整图片大小，以适应道具的宽度和高度。
• 自动压缩图片：Image组件还可以自动压缩图片，以减少文件大小。
• 支持延迟加载：Image组件还支持延迟加载。这意味着它只会加载在屏幕上可见的图片。

使用第三方库

如果您需要对图片优化做更进一步的控制，可以使用react-optimized-image之类的第三方库。这个库提供众多图片优化功能。

react-optimized-image的一些功能包括如下：

• 优化客户端和服务器端图片：react-optimized-image可以优化客户端和服务器端图片。这意味着图片针对性能和文件大小进行了优化。
• 自动调整图片大小：react-optimized-image可以自动调整图片的大小，以适合宽度和高度道具。
• 自动压缩图片：react-optimized-image还可以自动压缩图片，以减少文件大小。
• 支持延迟加载：react-optimization-image还支持延迟加载。这意味着它只会加载在屏幕上可见的图片。
• 支持多种图片格式：react-optimization-image支持多种图片格式，包括JPEG、PNG和WebP。

若要使用react-optimization-image，只需使用npm安装该库。

一旦安装了该库，就可以将其导入到项目中。

import Img from 'react-optimized-image'
export default function NextImg() {
return (
<Img
src="/my-image.jpg"
sizes={[400, 800]}
alt="My image"
/>
)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

您还可以将SVG文件与react-optimized-image结合使用。

import {Svg} from 'react-optimized-image'
export default function NextImg() {
return (
<Svg
src="/my-image.svg"
className=“filled-red”
/>
)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

该例使用className道具为SVG指定类别名。您可以使用该类别名，用CSS为SVG设置样式，或者使用JavaScript与它进行交互。

react-optimized-image还提供了相比内置的图片优化功能更好的另几个优点。

相比内置功能，使用软件包的一个好处是它可以自动生成不同大小的图片。这意味着您不必为同一个图片创建不同的版本。

另一个好处是它可以自动为用户的设备提供适当大小的图片。这意味着拥有高分辨率屏幕的设备将获得高分辨率图片，而拥有低分辨率屏幕的设备将获得低分辨率图片。

最后，react-optimized-image是一个完全开源的项目。这意味着如果您需要特定的特性或错误修正版，可以为该库贡献代码。

您应该使用哪种方法？

那么，您应该使用哪种方法来优化Next.js网站中的图片？

如果您需要基本的图片优化，可以使用内置的图片处理功能。这是开始优化图片的最简单方法。

如果您需要对图片优化进行进一步的控制，可以使用react-optimized-image之类的第三方库。这个库提供了更高级的图片优化功能。

如果您需要获得最好的性能，可以结合使用内置的图片处理功能和第三方库，这可以集两者之众长。但是不建议初学者使用这种方法，因为它需要更多的设置。

利用优化的图片来改进SEO

通过优化网站或应用程序上的图片，您可以改进搜索引擎优化（SEO）。谷歌的算法考虑到了网站和应用程序的加载速度。如果您的网站或应用程序加载缓慢，这将对SEO产生负面影响。

图片优化后，您可以缩短网站或应用程序的加载时间，这可以改进SEO。此外，您还可以添加开放式图片协议，以获得更好的性能。

原文标题：​​Maximize Image Quality With Next.js​​，作者：Imran Alam