Web圖像組件設(shè)計(jì)的最佳實(shí)踐
大家好，我是 ConardLi，網(wǎng)頁(yè)中的圖片處理一直是 Web 開發(fā)的一大挑戰(zhàn)，今天跟大家來(lái)一起看看 Next.js 中的 Image 組件，我覺得這個(gè)組件的設(shè)計(jì)有很多值得借鑒的地方，可以作為圖片組件設(shè)計(jì)的最佳實(shí)踐。英文原文在這：https://web.dev/image-component/
本文中會(huì)涉及一些網(wǎng)頁(yè)性能指標(biāo)，沒(méi)有了解過(guò)的同學(xué)可以先看一下我這篇文章：
解讀新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)
網(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)的情況下，定義此類圖片的大小可能比較困難。瀏覽器支持：一些現(xiàn)代圖片格式如AVIF和WebP的兼容性往往比較差，我們還需要在不支持它們的瀏覽器上進(jìn)行特殊處理。懶加載的復(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每個(gè)組件中的屬性：用于指示如何使用每個(gè)圖像的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）。
最后
由于公眾號(hào)的推送機(jī)制，你可能經(jīng)常收不到我的推送，最近按標(biāo)簽整理了下公眾號(hào)上比較不錯(cuò)的文章，你可以按照文章中的標(biāo)簽選擇性閱讀，建議大家收藏：前端進(jìn)階必讀文章合集
抖音前端正急缺人才，如果你想加入我們，歡迎加我微信和我聯(lián)系。另外如果你想加入高質(zhì)量前端交流群，或者你有任何其他事情想和我交流也可以添加我的個(gè)人微信 ConardLi 。
文中如有錯(cuò)誤，歡迎在留言區(qū)和我留言，如果這篇文章幫助到了你，歡迎點(diǎn)贊、在看和關(guān)注。你的點(diǎn)贊、在看和關(guān)注是對(duì)我最大的支持！
怎么樣，一個(gè)小小的圖片組件還能引出這么多的設(shè)計(jì)，你們?cè)陧?xiàng)目中是什么設(shè)計(jì)圖片組件的呢？歡迎在留言區(qū)討論。
往期推薦
最后
歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...
