大家好，我是 ConardLi ，網(wǎng)頁(yè)中的圖片處理一直是 Web 開發(fā)的一大挑戰(zhàn)，今天跟大家來(lái)一起看看 Next.js 中的 Image 組件，我覺(jué)得這個(gè)組件的設(shè)計(jì)有很多值得借鑒的地方，可以作為圖片組件設(shè)計(jì)的優(yōu)秀實(shí)踐。英文原文在這：https://web.dev/image-component/

本文中會(huì)涉及一些網(wǎng)頁(yè)性能指標(biāo)，沒(méi)有了解過(guò)的同學(xué)可以先看一下我這篇文章：

網(wǎng)頁(yè)中的圖像帶來(lái)的主要問(wèn)題和優(yōu)化方向

網(wǎng)頁(yè)中的圖片不僅會(huì)影響網(wǎng)頁(yè)性能，還有可能會(huì)影響業(yè)務(wù)，一個(gè)網(wǎng)頁(yè)中加載的圖片數(shù)量是用戶訪問(wèn)網(wǎng)站的轉(zhuǎn)化率的第二大影響因素。

作為網(wǎng)頁(yè)最佳實(shí)踐檢查中的的一部分， Lighthouse 列出了很多種優(yōu)化圖片加載的建議，比如下面這幾點(diǎn)：

未指定大小的圖片會(huì)降低 CLS

未指定寬高的圖片會(huì)導(dǎo)致布局的不穩(wěn)定并導(dǎo)致布局偏移指標(biāo) ( CLS ) 惡化。在 img 元素上設(shè)置 width 和 height 屬性可以優(yōu)化這個(gè)問(wèn)題，例如：

<img src="flower.jpg" width="360" height="240"> 

寬度和高度應(yīng)該設(shè)置的更接近圖片本身的寬高比。如果差的太多可能導(dǎo)致圖像看起來(lái)失真。

使用 CSS 新增的 aspect-ratio 屬性可以幫你更好的響應(yīng)式的調(diào)整圖片大小。

圖片太大可能影響 LCP

圖像的文件大小越大，下載所需的時(shí)間就越長(zhǎng)。網(wǎng)頁(yè)中的大圖可能是觸發(fā)最大內(nèi)容繪制指標(biāo) ( LCP )的最重要元素。作為網(wǎng)頁(yè)關(guān)鍵內(nèi)容的一部分并且需要很長(zhǎng)時(shí)間下載的圖片肯定會(huì)降低網(wǎng)頁(yè)的 LCP 。

在很多情況下，開發(fā)者可以通過(guò)更好的壓縮或者使用響應(yīng)式圖像來(lái)減小圖片大小。 <img> 元素的 srcset 和 sizes 屬性可以指定不同大小的圖片文件。然后瀏覽器可以根據(jù)屏幕大小和分辨率選擇性加載。

糟糕的圖像壓縮可能影響 LCP

AVIF 或 WebP 等現(xiàn)代圖片格式可以提供比 JPEG 和 PNG 等常用格式更好的壓縮能力。在某些情況下，對(duì)于相同質(zhì)量的圖片，更好的壓縮可以將文件大小減少 25% 到 50% 。這種體積上的減少可以讓下載速度更快，數(shù)據(jù)消耗更少。

加載不必要的圖片可能影響 LCP

加載網(wǎng)頁(yè)時(shí)，用戶在首屏看不到的圖片可以延遲加載，這樣它們就不會(huì)對(duì) LCP 造成影響。

圖片優(yōu)化的主要挑戰(zhàn)

在上面我們已經(jīng)把主要問(wèn)題和優(yōu)化方向都列出來(lái)了，事實(shí)上，由于一些問(wèn)題，并不是所有的網(wǎng)站都能作出這些優(yōu)化，比如：

• 優(yōu)先事項(xiàng) ：Web 開發(fā)者可能通常更傾向于關(guān)注代碼、 JavaScript 和數(shù)據(jù)優(yōu)化。大部分前端可能不知道圖片的主要問(wèn)題以及如何優(yōu)化它們。
• 開箱即用的解決方案 ：即使我們意識(shí)到了這些問(wèn)題，但是對(duì)于我們的研發(fā)框架可能缺少一些開箱即用的解決方案，這會(huì)大大提升優(yōu)化成本。
• 動(dòng)態(tài)加載圖片 ：除了我們開發(fā)的時(shí)候引入的一些圖片，可能還有一部分是來(lái)自于用戶上傳。在圖片來(lái)源是動(dòng)態(tài)的情況下，定義此類圖片的大小可能比較困難。
•  

瀏覽器支持 
AVIF 
WebP 

• 懶加載的復(fù)雜性 ：實(shí)現(xiàn)懶加載有很多鐘方法，那你至少哪種方法是最適合你的網(wǎng)頁(yè)的嗎，不同設(shè)備上不同的視口尺寸也會(huì)將問(wèn)題復(fù)雜化。

Image組件的最佳實(shí)踐

在過(guò)去的一年里，我們使用 Next.js 框架設(shè)計(jì)和實(shí)現(xiàn)了 Image組件 。它可以替換 Next.js 中的 <img> 元素，這是一個(gè)使用示例：

// Before with <img> element: 
function Logo() { 
  return <img src="/code秘密花園.jpg" alt="logo" height="200" width="100" /> 
} 
 
// After with image component: 
import Image from 'next/image' 
 
function Logo() { 
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" /> 
} 

組件提供了一組豐富的功能和原則來(lái)解決與圖片相關(guān)的問(wèn)題。它還允許開發(fā)者根據(jù)各種圖片要求對(duì)其進(jìn)行自定義的選項(xiàng)配置。

防止布局變化

就像上面提到的，未指定寬高的圖片會(huì)導(dǎo)致布局的不穩(wěn)定并導(dǎo)致布局偏移指標(biāo) ( CLS ) 惡化。使用 Next.js Image 組件時(shí)，開發(fā)者必須使用 width 和 height 屬性指定圖片大小，以防止任何布局偏移。如果大小未知，開發(fā)者必須指定 layout=fill 提供一個(gè)位于容器內(nèi)的未知大小圖片。

// Image component with width and height specified 
<Image src="/logo.jpg" alt="logo" height="200" width="100" /> 
 
// Image component with layout specified 
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" /> 
 
// Image component with image import 
import Image from 'next/image' 
import logo from './code秘密花園.png' 
 
function Logo() { 
  return <Image src={logo} alt="logo" /> 
} 

響應(yīng)式

要使圖像跨設(shè)備自適應(yīng)，開發(fā)者必須在 <img> 元素中設(shè)置 srcset 和 sizes 屬性。如果使用 Image 組件就可以不用做這項(xiàng)工作。 Next.js 中的 Image 組件可以有一個(gè)全局的圖片設(shè)置，根據(jù)布局模式可以將它們應(yīng)用于 Image 組件的所有實(shí)例，有下面三個(gè)屬性：

• deviceSizes 屬性：此屬性可用于基于應(yīng)用程序用戶基礎(chǔ)的通用設(shè)備一次性配置斷點(diǎn)。
• imageSizes property ：這也是一個(gè)可配置的屬性，用于獲取與設(shè)備大小斷點(diǎn)對(duì)應(yīng)的圖像大小。
•  

layout 
deviceSizes 
imageSizes 
fixed，fill，intrinsic 
responsive 

當(dāng)使用 fill 或 responsive 布局模式加載圖片時(shí)， Next.js 會(huì)根據(jù)請(qǐng)求頁(yè)面的設(shè)備的大小識(shí)別要提供的圖片，并適當(dāng)?shù)卦O(shè)置 srcset 和 sizes 。

下面的例子展示了怎么使用布局模式來(lái)控制不同屏幕上的圖像大小。

Layout = Intrinsic ：縮小以適應(yīng)容器在較小視口上的寬度。在較大的視口上放大時(shí)不會(huì)超過(guò)圖像的固有尺寸，容器寬度為 100%

Layout = Fixed ：不管在什么設(shè)備上，寬度和高度是固定的。

Layout = Responsive ：根據(jù)容器在不同視口上的寬度縮小或放大，保持寬高比。

Layout = Fill ：寬高自動(dòng)填充父容器

懶加載

Image 組件默認(rèn)提供了一個(gè)內(nèi)置的、高性能的延遲加載解決方案。 <img> 元素有一些默認(rèn)的懶加載方案，但它們都有很多缺點(diǎn)，使用起來(lái)也比較麻煩，我們可能會(huì)采用以下懶加載方法之一：

• 指定 loading 屬性：實(shí)現(xiàn)簡(jiǎn)單，但兼容性差
• 使用 Intersection Observer API ：設(shè)計(jì)一個(gè)自定義的懶加載解決方案需要深思熟慮的設(shè)計(jì)和實(shí)現(xiàn)，不是所有開發(fā)都有時(shí)間和精力做這種設(shè)計(jì)。

• 第三方懶加載庫(kù)：你需要一定的時(shí)間對(duì)這些庫(kù)進(jìn)行選擇和評(píng)估。

在 Next.js 的 Image 組件中，圖片默認(rèn)的設(shè)置就是 Lazy 的。懶加載是使用 Intersection Observer 實(shí)現(xiàn)的，它的兼容性很好。我們不需要做任何額外的事情來(lái)啟用它，但我們可以根據(jù)具體的場(chǎng)景去選擇禁用。

預(yù)加載

上面提到了，圖像的文件大小越大，下載所需的時(shí)間就越長(zhǎng)。網(wǎng)頁(yè)中的大圖可能是觸發(fā)最大內(nèi)容繪制指標(biāo) ( LCP )的最重要元素，對(duì)一些大圖進(jìn)行預(yù)加載可能是個(gè)好主意。

使用 <img> 元素時(shí)， HTML 標(biāo)題中可能包含預(yù)加載提示：

<link rel="preload" as="image" href="important.png"> 

不管使用什么框架，一個(gè)設(shè)計(jì)良好的圖像組件應(yīng)該提供一種方法來(lái)調(diào)整圖像的加載順序。在 Next.js 的 Image 組件中，開發(fā)人員可以使用 priority 屬性指示適合預(yù)加載的圖像。

<Image src="/code秘密花園.jpg" alt="ConardLi" height="400" width="200" priority /> 

推薦CDN托管圖片

Next.js 的 Image 默認(rèn)使用一種加載器架構(gòu)來(lái)處理圖片，你可以自定義配置圖片的 CDN 前綴。

module.exports = { 
  images: { 
    loader: 'imgix', 
    path: 'https://ImgApp/imgix.net', 
  }, 
} 

通過(guò)這種配置，開發(fā)者可以在圖片加載時(shí)中使用相對(duì)路徑，框架會(huì)將相對(duì)路徑與 CDN 路徑連接起來(lái)生成絕對(duì) URL 。目前支持一些主流的圖像 CDN ，如 Imgix、Cloudinary 和 Akamai 。這種架構(gòu)通過(guò) loader 為應(yīng)用支持使用自定義 CDN 提供商。

漸進(jìn)式加載

所謂漸進(jìn)式加載，就是在實(shí)際圖像加載時(shí)先顯示質(zhì)量較差的占位符圖，它可以與懶加載結(jié)合使用，從而提高了感知性能并增強(qiáng)用戶體驗(yàn)。

Next.js Image 組件支持通過(guò) placeholder 屬性對(duì)圖像進(jìn)行漸進(jìn)式加載，用于在加載實(shí)際圖像時(shí)顯示低質(zhì)量或模糊的圖像。

效果

下面是 leboncoin 使用了 Image 組件后的優(yōu)化效果：

LCP 從 2.4s 下降到 1.7s ，為頁(yè)面下載的總圖像資源大小從 663kB 增加到了 326kB （懶加載的圖片大小約為 100kB ）。