電商網站圖片居多，在商品集合頁會有大量的圖片存在，所有優化必不可少，
本文章在以谷歌的測試技術下進行優化。
## Lighthouse 如何計算超大圖像[#](https://web.dev/uses-responsive-images/?utm_source=lighthouse&utm_medium=lr#how-lighthouse-calculates-oversized-images)
對于頁面上的每個圖像，Lighthouse 將渲染圖像的大小與實際圖像的大小進行比較。渲染大小還考慮了設備像素比。如果呈現的大小至少比實際大小小 4KiB，則圖像無法通過審核。
## 正確調整圖像大小的策略[#](https://web.dev/uses-responsive-images/?utm_source=lighthouse&utm_medium=lr#strategies-for-properly-sizing-images)
理想情況下，您的頁面不應提供大于用戶屏幕上呈現的版本的圖像。任何大于此值的內容都會導致浪費字節并減慢頁面加載時間。
提供適當大小的圖像的主要策略稱為“響應式圖像”。使用響應式圖像，您可以生成每個圖像的多個版本，然后使用媒體查詢、視口尺寸等指定要在 HTML 或 CSS 中使用的版本。請參閱提供[響應式圖像](https://web.dev/serve-responsive-images)以了解更多信息。
[圖像 CDN](https://web.dev/image-cdns/)是提供適當大小圖像的另一個主要策略。您可以將圖像 CDN 想象成用于轉換圖像的 Web 服務 API。
另一種策略是使用基于矢量的圖像格式，例如 SVG。使用有限的代碼，SVG 圖像可以縮放到任意大小。請參閱[用 SVG 替換復雜圖標](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images#replace_complex_icons_with_svg)以了解更多信息。
像[gulp-responsive](https://www.npmjs.com/package/gulp-responsive)或[responsive-images-generator](https://www.npmjs.com/package/responsive-images-generator)這樣的工具可以幫助自動化將圖像轉換為多種格式的過程。還有圖像 CDN 可讓您生成多個版本，無論是在您上傳圖像時，還是從您的頁面請求它。
[關注本公眾號]【本人在跨境網站工作多年，負責公司shopify優化，可以私信合作】
文章為作者獨立觀點，不代表DLZ123立場。如有侵權,請聯系我們。( 版權為作者所有，如需轉載，請聯系作者 )
網站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
