發佈日期 : 2020-02-27
圖片是每個網站的關鍵組成部分。根據非正式統計，網頁圖片佔網頁上加載數據的百分之六十以上。不管是網上商店，新聞雜誌，時尚網站，博客還是旅遊網站 ，幾乎所有網站都是擁有如此重要的組成部分，如果您想含有大量網頁圖片的網站可以加快運行速度，網頁圖片優化將會是非常重要的一環，而且很大機會有最高效果。
優化網站上的網頁圖片可以大致分為三類 - 減輕負載，減少負載和加快負載。
我們在本文中討論的5種技術或您遇到的任何其他技術大部分都屬於這三類。
1.調整圖片尺吋
我們認為調整網頁圖片尺吋是大多數網站上最大可以優化的領域。調整網頁圖片尺吋以使其完全符合您的網站要求。不單單是使用CSS或HTML調整尺吋，而是調整服務器上網頁圖片的尺吋。
例如，您有4000x3000px要在網上商店上列出產品的網頁圖片。但是，在您的網站上，您需要顯示該產品的小得多的網頁圖片。它可能是200x300px產品列表頁面和800x1000px產品詳細信息頁面上的網頁圖片。所以建議在將原始網頁圖片上傳到服務器之前，請確保將其縮小到這些尺吋。調整尺吋後的網頁圖片比原始網頁圖片小得多，並且加載速度將比原始網頁圖片快得多。
而最方便用戶的最好方案必然是擁有一個網頁圖片服務器，只需更改網頁圖片URL或在後台更改所有產品圖片在指定頁面的尺吋，即可將網頁圖片實時調整為任意給定尺吋。這樣，只要您的網頁圖片尺吋參數發生變化，在前台的產品網頁圖片便會自動變化顯示的圖片尺寸。
當然，亦有很多線上資源可供用戶在上傳圖片至服務器前進行無損壓縮，例如著名的iloveimg便是這類的第三方服務，除了壓縮圖片外，它更會提供大小調整及裁剪。甚至它的姐妹產品 - ilovepdf，更是可以壓縮PDF檔案!
2.優化網頁圖片
優化擁有大量圖片網站的下一步就是為網站上的每張圖片都選擇正確的格式和質量。
JPG，PNG和GIF是當前在網絡上使用的最常見的網頁圖片格式，並且分別適合於不同的場合。還有另一種相對較新的網頁圖片格式，稱為WebP，它結合了這些網頁圖片格式中的最佳功能，尺寸縮小了30％，並且支持接近75％的現代瀏覽器中。舉例來說，JPG圖片為10KB，PNG圖片可能會大於70KB，而WebP格式的圖片則只有大約6KB。由此可見WebP格式圖片的優勢了。
鑑於巨大的性能優勢，您應盡可能以WebP格式上傳網頁圖片。在其他瀏覽器上，您可以繼續提供原始網頁圖片格式。
簡單而言，網頁圖片質量是衡量網頁圖片外觀的標準。網頁圖片質量和網頁圖片大小之間存在直接關係。較高的質量會導致較大的網頁圖片尺寸，從而導致網站運行緩慢。
不同的網頁圖片壓縮方法利用人眼的局限性來區分顏色信息的細微變化以壓縮網頁圖片。作為標準，質量等級為80到90（以100為等級）通常是網頁圖片尺寸和質量之間的良好折衷。
在不同質量級別編碼的同一網頁圖片之間的比較。這些網頁圖片在人眼視覺上幾乎相似，但是卻具有不同的容量大小。
完成格式和質量優化的一種簡單方法是使用ImageKit 交付網頁圖片。它會在可能的情況下自動將網頁圖片轉換為WebP，並實時優化網頁圖片質量。
3.使用自適應圖片
在當今世界，如果您會認真經營網站，那麼忽略移動用戶簡直是一種罪過。
數據表明，全球將近60%流量都來自移動設備。沒錯，雖然手機功能越來越強大，移動網絡也越來越完善，但數據表明，移動數據速度仍然比寬帶速度慢得多。而且某些國家或地區內的移動數據連接亦不太穩定。因此，在設計移動設備的用戶體驗時必須格外小心。
如果您有針對台式機和移動設備的響應式網站，則可以切換為使用響應式圖片。使用響應式網頁 圖片標籤，通過使用img標籤的srcset和sizes屬性，可以為瀏覽器提供單個網頁圖片的變體列表以及不同屏幕上相對網頁圖片尺寸的定義。。然後，瀏覽器根據設備尺寸和您指定的佈局，從可用列表中確定最佳網頁圖片尺寸，以在特定設備上加載。
size屬性提供有關網頁圖片佈局的信息，srcset屬性提供具有針對每個URL指定的實際寬度的網頁圖片列表。移動設備中涉及的另一個因素是設備像素比率或DPR值。現代手機具有高密度的屏幕，在同一平方英寸中可以容納更多像素。
在常規設備上看起來不錯的網頁圖片在高密度屏幕上看起來會稍微模糊。解決方案是在具有DPR 2的屏幕上加載2倍大小的網頁圖片，在具有DPR 3的屏幕上加載3倍大小的網頁圖片，並在其他設備上加載普通網頁圖片1倍大小的網頁圖片。這也可以使用如下所示的響應式網頁圖片標籤來實現。
4.加載更少的資源
即使在優化所有網頁圖片之後，加載過多網頁圖片也勢必會降低網站速度並給用戶體驗帶來負面影響。我並不主張應該使用較少的網頁圖片。但是，在某些情況下，我們可以避免使用網頁圖片或避免將其預先加載。例如當進入頁面時先不要加載全部網頁圖片，可以創建一個按鈕，點擊才顯示餘下圖片，或是使用漸變和使用CSS等元素。
當然您亦可以使用的另一個更優秀的技術，那便是網頁圖片的延遲加載(Lazy Load)。延遲加載基本上意味著我們推遲了不需要立即加載的網頁圖片。通常，任何在用戶的屏幕上暫未見到的網頁圖片都可以在稍後的時間點加載，隨著用戶向下瀏覽網頁時，網頁圖片才會加載顯示出來。
試考慮一下您的網頁上有100種甚至更多產品的情況。如果您在一開始就同時請求所有產品圖片，則會減慢加載時間，甚至需要十幾二十秒。這些網頁圖片將與頁面上的其他元素（例如CSS和JS）爭奪網絡帶寬和CPU資源。
而當網頁使用延遲加載後，我們只能加載30張最初對用戶可見的網頁圖片。然後，當用戶開始向下滾動頁面時，網頁將繼續加載更多網頁圖片。這將有助於改善初始加載時間和用戶體驗。在某些情況下，用戶不會向下滾動整個頁面，因此某些網頁圖片根本不會被加載。因此，您最終還節省了網頁圖片傳輸的帶寬成本。
使用jQuery Lazy Load這樣的JS庫進行延遲加載非常簡單。您還可以使用最新的IntersectionObserver API，該API比可用於延遲加載的JS庫的性能要高得多。
5.使用優質的CDN進行網頁圖片傳遞
解決了網頁圖片的大小和在特定頁面上加載的網頁圖片數量後，下一步就是確保可以將加載到網站上的網頁圖片快速加載。減少圖片加載時間不僅可以幫助您獲得更快的整體頁面加載時間，從而改善網站的用戶體驗，還可以幫助您在搜索引擎上獲得更高的排名 。
內容交付網絡(CDN)是一組全局分佈的緩存/代理服務器。
假設您的網站服務器位於美國。內容交付網絡將網頁圖片緩存在其全球分佈的服務器網絡上（比這更複雜，但為簡單起見，我們假設這一點）。然後，如果來自香港的用戶從您的網站請求網頁圖片，將不會從美國的服務器中獲取該網頁圖片，CDN會從距離該用戶最近的節點中將其傳遞給香港(假設CDN擁有香港的節點，則這會是最快的)。這樣便可以減少加載網頁圖片所需的往返時間。
如何測試我的網站中與網頁圖片相關的問題？
有很多工具可用於測試專門針對網頁圖片相關問題的網站。一種方法是使用ImageKit的網站分析器。只需輸入頁面URL，然後在幾秒鐘內它將為您提供有關調整大小，最佳格式，延遲加載等建議。Google還開發了名為Lighthouse 的開源工具。該工具集成在最新版本的Chrome中，不僅可以對您網站上的網頁圖片進行全面分析，而且還可以對可能影響性能的其他問題進行全面分析。 Google PageSpeed還指出了您是否要在網站上加載未優化的網頁圖片以及其他建議。
結論
我們涵蓋了圍繞網頁圖片優化和性能改進的所有主要技術。有了這些信息，您就可以解決90％的網頁圖片相關問題，這將幫助您縮短頁面加載時間並在搜索結果中排名更高。永遠記住，對於您網站上的網頁圖片-更輕，更少，更快。
