圖像是網(wǎng)站建設(shè)應(yīng)用程序性能瓶頸的常見問題，也是優(yōu)化的重點(diǎn)領(lǐng)域。未優(yōu)化的圖像會(huì)導(dǎo)致頁面膨脹，目前占第 90個(gè)百分位的總頁面權(quán)重的 70% 以上（以字節(jié)為單位）。多種優(yōu)化圖像的方法需要一個(gè)智能的“圖像組件”，其中包含默認(rèn)的性能解決方案。

圖像不僅會(huì)影響性能，還會(huì)影響業(yè)務(wù)。頁面上的圖像數(shù)量是用戶訪問網(wǎng)站的轉(zhuǎn)化率的第二大預(yù)測(cè)因素。用戶轉(zhuǎn)換的會(huì)話比未轉(zhuǎn)換的會(huì)話少 38% 的圖像。作為其最佳實(shí)踐審核的一部分，Lighthouse 列出了多種優(yōu)化圖像和改進(jìn)網(wǎng)絡(luò)重要信息的機(jī)會(huì)。圖像可能影響核心 Web 生命和用戶體驗(yàn)的一些常見領(lǐng)域如下。

未調(diào)整大小的圖像傷害了 CLS #，未指定大小的圖像會(huì)導(dǎo)致布局不穩(wěn)定并導(dǎo)致高累積布局偏移 ( CLS )。在img元素上設(shè)置width和height屬性可以幫助防止布局偏移。例如：<img src="flower.jpg" width="360" height="240">
寬度和高度應(yīng)設(shè)置為使渲染圖像的縱橫比接近其自然縱橫比?？v橫比的顯著差異可能導(dǎo)致圖像看起來失真。允許您在 CSS 中指定縱橫比的相對(duì)較新的屬性可以幫助響應(yīng)性地調(diào)整圖像大小，同時(shí)防止 CLS。

圖像的文件大小越大，下載所需的時(shí)間就越長(zhǎng)。大圖像可以是頁面的“英雄”圖像，也可以是視口中負(fù)責(zé)觸發(fā)最大內(nèi)容繪制 ( LCP )的最重要元素。作為關(guān)鍵內(nèi)容的一部分并且需要很長(zhǎng)時(shí)間下載的圖像會(huì)延遲 LCP。

在許多情況下，開發(fā)人員可以通過更好的壓縮和使用響應(yīng)式圖像來減小圖像大小。元素的srcset和sizes屬性<img>有助于提供不同大小的圖像文件。然后瀏覽器可以根據(jù)屏幕大小和分辨率選擇正確的。

糟糕的圖像壓縮會(huì)損害 LCP #
AVIF或WebP等現(xiàn)代圖像格式可以提供比常用的 JPEG 和 PNG 格式更好的壓縮。在某些情況下，對(duì)于相同質(zhì)量的圖像，更好的壓縮可以將文件大小減少 25% 到 50%。這種減少導(dǎo)致下載速度更快，數(shù)據(jù)消耗更少。該應(yīng)用程序應(yīng)為支持這些格式的瀏覽器提供現(xiàn)代圖像格式。

加載不必要的圖像會(huì)損害 LCP #
加載頁面時(shí)，不會(huì)向用戶顯示折疊下方或不在視口中的圖像。它們可以被推遲，這樣它們就不會(huì)對(duì) LCP 做出貢獻(xiàn)并延遲它。當(dāng)用戶向它們滾動(dòng)時(shí)，延遲加載可用于稍后加載此類圖像。