?譯者 | 布加迪

審校 | 孫淑娟

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

為何要優化圖片？

優化圖片之所以很重要，有以下幾個原因：

• 有助于縮短網站或應用程序的加載時間。
• 可以減少客戶端需要下載的數據量，從而節省帶寬成本。
• 有助于提升網站或應用程序的整體性能。

如何優化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"
/>
)
}

在該例中，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"
/>
)
}

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

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

該例使用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