漸進式影象渲染簡介

sipon140

[作者注：]本文的靈感來自José Manuel Pérez的作品。這裡提供的許多資訊都以某種形式出現在Perez在英國牛津Render 2017 上發表的演講中。如果這篇文章對您有所啟發，請檢視他的原始演講。

影象在網站中發揮著重要作用，有 美國電話號碼錶 助於提高轉化率、增強使用者體驗並提高他們的參與度。幾乎沒有什麼比理想的影象更能將人們的注意力吸引到您想要的地方了。這就是為什麼超過三分之二的網路資料由影象組成。

然而，使用影象也有其缺點。大影象所需 美國電話號碼錶 的處理能力對於小型裝置來說通常太大，管理大量影象可能是一個挑戰，而且頻寬使用成本可能很高。在本文中，我們將瞭解如何通過延遲和漸進地載入和渲染經過良好優化的影象來節省使用者的頻寬和時間。
高使用者參與度

優化良好的影象複製此標題的連結優化影象的第一步是選擇正確的影象格式。
您應該考慮的第一個格式始終是 SVG。我們應該儘可能多地使用 SVG 插圖，充分利用它們可以調整大小、形狀、樣式甚至進一步壓縮的方式。網路上的許多照片旨在描繪概念，而不是特定的人、地點或事物。在這些情況下，向量圖形甚至可能是使用照片（尤其是庫存照片）的改進。
我們總是需要一些點陣圖影象。在某情況下，您只需要使用照片來表達您的觀點，或展示產品，或展示真人的美麗微笑。

目前，由於其廣泛的支援以及各種可用的壓縮演演演演算法，JPEG 仍然是點陣圖影象的最佳格式之一。您可以獲得大而美觀的 JPEG 檔案，但檔案大小卻出奇的小。

然而，WebP 正迅速成為 JPEG 的競爭對手，而且它的壓縮效果要好得多。它已經在 Chrome 和 Opera（可能還有其他任何基於 Blink 的瀏覽器）中得到支援，並且很快將得到 Firefox 的支援。希望 Safar

延遲載入影象複製此標題的連結
延遲載入是指在使用者向下滾動足夠遠才能看到內容之前不載入內容的做法。這種做法可以節省大量頻寬，對於號召性用語 (CTA) 位於頁面頂部的頁面尤其有用。如果一半的使用者點選了 CTA 按鈕而沒有進一步閱讀，為什麼要在不需要時載入其他內容呢？



它通常是這樣工作的：您使用 JavaScript 來檢視將載入影象的空間是否在視口內。如果是，則載入影象。這種方法效果很好，只是每次使用者滾動或調整瀏覽器視窗大小時都必須執行該檢查。有點諷刺的是，這可能會影響效能。

幸運的是，新的IntersectionObserver API提供了修復。使用此 A的解決方案。