?譯者 | 布加迪

審校 | 孫淑娟

圖片是任何網(wǎng)站或應(yīng)用程序的重要組成部分，它們有助于使內(nèi)容更吸引人、外觀更漂亮。然而，如果圖片沒有得到適當(dāng)優(yōu)化，它們也會減慢網(wǎng)站或應(yīng)用程序的運行速度。

為何要優(yōu)化圖片？

優(yōu)化圖片之所以很重要，有以下幾個原因：

• 有助于縮短網(wǎng)站或應(yīng)用程序的加載時間。
• 可以減少客戶端需要下載的數(shù)據(jù)量，從而節(jié)省帶寬成本。
• 有助于提升網(wǎng)站或應(yīng)用程序的整體性能。

如何優(yōu)化Next.js網(wǎng)站中的圖片？

有幾種方法可以優(yōu)化Next.js網(wǎng)站中的圖片。一種方法是使用Image組件。該組件可自動優(yōu)化圖片以提升性能。

優(yōu)化圖片的另一種方法是使用內(nèi)置的圖片處理功能。Next.js可以自動調(diào)整大小、壓縮和優(yōu)化圖片，以提升性能。

最后，您可以使用第三方庫，比如react-optimized-image。這個庫提供了各種圖片優(yōu)化功能。

使用Image組件

Image組件是優(yōu)化Next.js網(wǎng)站中圖片的最簡單方法。若想使用它，只需從next/image包導(dǎo)入該組件。

一旦您導(dǎo)入了組件，就可以像使用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"
/>
)
}

在該例中，Image組件渲染的圖片寬度為200px，高度為200px。您也可以使用CSS或Tailwind之類的框架，為您的應(yīng)用程序和圖片設(shè)置樣式。

Image組件所需的一些道具是width、height、src和alt。src道具是您想要使用的圖片的URL。可以使用width和height道具來設(shè)置圖片的寬度和高度（以像素為單位）。alt道具是圖片的替代文本。

Image組件的一些可選道具是布局、加載器、占位符和優(yōu)先級。布局道具指定圖片的布局。您可以使用加載器道具來指定自定義的圖片加載器。占位符道具指定自定義的圖片占位符。優(yōu)先級道具指定圖片的優(yōu)先級。

使用Image組件的一些好處如下：

• 提升性能：使用Image組件的主要好處之一是提升性能。該組件可自動優(yōu)化圖片以提升性能。
• 自動調(diào)整圖片大小：使用Image組件的另一個好處是自動調(diào)整圖片大小。該組件可以自動調(diào)整圖片大小，以適應(yīng)道具的寬度和高度。
• 自動壓縮圖片：Image組件還可以自動壓縮圖片，以減少文件大小。
• 支持延遲加載：Image組件還支持延遲加載。這意味著它只會加載在屏幕上可見的圖片。

使用第三方庫

如果您需要對圖片優(yōu)化做更進(jìn)一步的控制，可以使用react-optimized-image之類的第三方庫。這個庫提供眾多圖片優(yōu)化功能。

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

• 優(yōu)化客戶端和服務(wù)器端圖片：react-optimized-image可以優(yōu)化客戶端和服務(wù)器端圖片。這意味著圖片針對性能和文件大小進(jìn)行了優(yōu)化。
• 自動調(diào)整圖片大小：react-optimized-image可以自動調(diào)整圖片的大小，以適合寬度和高度道具。
• 自動壓縮圖片：react-optimized-image還可以自動壓縮圖片，以減少文件大小。
• 支持延遲加載：react-optimization-image還支持延遲加載。這意味著它只會加載在屏幕上可見的圖片。
• 支持多種圖片格式：react-optimization-image支持多種圖片格式，包括JPEG、PNG和WebP。

若要使用react-optimization-image，只需使用npm安裝該庫。

一旦安裝了該庫，就可以將其導(dǎo)入到項目中。

import Img from 'react-optimized-image'
export default function NextImg() {
return (
<Img
src="/my-image.jpg"
sizes={[400, 800]}
alt="My image"
/>
)
}

您還可以將SVG文件與react-optimized-image結(jié)合使用。

import {Svg} from 'react-optimized-image'
export default function NextImg() {
return (
<Svg
src="/my-image.svg"
className=“filled-red”
/>
)
}

該例使用className道具為SVG指定類別名。您可以使用該類別名，用CSS為SVG設(shè)置樣式，或者使用JavaScript與它進(jìn)行交互。

react-optimized-image還提供了相比內(nèi)置的圖片優(yōu)化功能更好的另幾個優(yōu)點。

相比內(nèi)置功能，使用軟件包的一個好處是它可以自動生成不同大小的圖片。這意味著您不必為同一個圖片創(chuàng)建不同的版本。

另一個好處是它可以自動為用戶的設(shè)備提供適當(dāng)大小的圖片。這意味著擁有高分辨率屏幕的設(shè)備將獲得高分辨率圖片，而擁有低分辨率屏幕的設(shè)備將獲得低分辨率圖片。

最后，react-optimized-image是一個完全開源的項目。這意味著如果您需要特定的特性或錯誤修正版，可以為該庫貢獻(xiàn)代碼。

您應(yīng)該使用哪種方法？

那么，您應(yīng)該使用哪種方法來優(yōu)化Next.js網(wǎng)站中的圖片？

如果您需要基本的圖片優(yōu)化，可以使用內(nèi)置的圖片處理功能。這是開始優(yōu)化圖片的最簡單方法。

如果您需要對圖片優(yōu)化進(jìn)行進(jìn)一步的控制，可以使用react-optimized-image之類的第三方庫。這個庫提供了更高級的圖片優(yōu)化功能。

如果您需要獲得最好的性能，可以結(jié)合使用內(nèi)置的圖片處理功能和第三方庫，這可以集兩者之眾長。但是不建議初學(xué)者使用這種方法，因為它需要更多的設(shè)置。

利用優(yōu)化的圖片來改進(jìn)SEO

通過優(yōu)化網(wǎng)站或應(yīng)用程序上的圖片，您可以改進(jìn)搜索引擎優(yōu)化（SEO）。谷歌的算法考慮到了網(wǎng)站和應(yīng)用程序的加載速度。如果您的網(wǎng)站或應(yīng)用程序加載緩慢，這將對SEO產(chǎn)生負(fù)面影響。

圖片優(yōu)化后，您可以縮短網(wǎng)站或應(yīng)用程序的加載時間，這可以改進(jìn)SEO。此外，您還可以添加開放式圖片協(xié)議，以獲得更好的性能。

原文標(biāo)題：??Maximize Image Quality With Next.js??，作者：Imran Alam