5個方法對於重量級網站的圖片優化

摘要： image.png 影象是每個網站的關鍵組成部分。 根據 HTTP Archive ，影象佔網頁上需要載入總資料的比例達60％以上。 幾乎成為所有網站上重要的組成部分，無論是電子商務，新聞，時尚網站，部落格還是旅遊入口網站，影象優化都很重要，如果你...

影象是每個網站的關鍵組成部分。 根據 ofollow,noindex">HTTP Archive ，影象佔網頁上需要載入總資料的比例達60％以上。 幾乎成為所有網站上重要的組成部分，無論是電子商務，新聞，時尚網站，部落格還是旅遊入口網站，影象優化都很重要，如果你想加快你的 影象重量級網站 訪問速度 ， 這 也許是很容易做到的事情 。

在網站上優化影象可以大致分為3類 - 負載更輕，負載更少，負載更快。 我們在本文中討論的5種技術或者你遇到的任何其他技術很可能屬於這3種類別中的任何一種。

所以，讓我們開始吧，看看你今天可以實現的一些簡單技術，以便在優化影象重量級網站方面取得重大進展。

1.調整影象大小

這是必須的。將影象大小調整為您網站上所需大小的影象。不，我不是在談論使用CSS或在HTML中調整大小。我正在談論調整伺服器上的影象大小，然後將其傳送給瀏覽器。

例如，對於要在電子商務網站上列出的產品，你有4000x3000畫素的影象。但是，在您的網站上，您需要顯示該產品的的略縮影象。它可以是產品列表頁面上的200x300px影象和產品詳細資訊頁面上的800x1000px影象。在將原始影象傳送到瀏覽器之前，請確保將原始影象縮小到這些尺寸。調整大小的影象比原始影象小得多，並且載入速度比原始影象快得多。

<h2>XYZ Product Detail</h2>
 
<!-- DO NOT USE this as it will load the full size image and the browser does the resize -->
<img src="image.jpg" alt="full size image" width="800" height="1000" />
 
<!-- USE a resized image where the resizing is done from the server and there is no need of browser-side resizing-->
<img src="resized_800x1000_image.jpg" alt="resized image" />

在我看來，不正確的影象大小調整，是大多數網站上最大的優化領域。通常，作為開發人員，我們往往會忽略它。請考慮以下情形：您可以從開發新網站開始使用尺寸合適的影象。在接下來的幾個月中，您網站的佈局會發生變化，影象尺寸要求也會發生變化。但是，不是生成新的影象來滿足這些新的尺寸要求，而這本身就是一項非常重要的任務，您可以使用其他替代方案。例如，你使用300x200px影象，放到200x200px的影象要求尺寸中使用。我猜這會發生在每個人身上。

圖片來源：pexels.com; 使用 * ImageKit *調整大小

在上面的示例中，單個影象的差異可能看起來很小，以Kilobytes表示。 但它仍然減小了21％。 這個小的差異，加上很多影象，有可能加快您的網站速度，並減少21％的頻寬消耗。

最好的方案是讓影象伺服器只需更改影象URL即可實時調整影象大小到任何給定尺寸。 這樣，無論何時影象維度要求發生變化，獲取新影象所需的全部內容都是在URL中指定該影象尺寸。

網上有許多開源和伺服器端實現 ，或者你也可以自己實現。 ImageKit 是此類功能的第三方服務實現，除了所有其他功能外，還提供基於URL的實時調整大小和裁剪。 您可以在幾分鐘的設定中將它用於所有現有影象。

2.優化你的影象

加快影象重量級網站的下一個步驟是為網站上的每個影象選擇正確的格式和質量。

JPG，PNG和GIF是目前在網路上使用的最常見的影象格式，每種格式都適用於 不同的用例 。 另一種稱為 WebP 的相對較新的影象格式結合了這些影象格式中的最佳格式，尺寸縮小了30％，並且在近 75％的現代瀏覽器 中得到支援。

上述尺寸之間比較顯示了為影象選擇正確影象格式的重要性。 雖然影象看起來相同，但它們的大小差異很大。

鑑於巨大的效能優勢，你應該儘可能以WebP格式提供影象。 在其他不支援的瀏覽器上，你可以繼續提供原始影象格式。

簡單地說，影象質量是衡量影象外觀的一種方式。 影象質量和影象大小之間存在直接關聯。 更高的質量會導致更高的影象尺寸，從而導致網站速度變慢。

不同的影象壓縮方法利用 人眼的侷限性 來區分顏色資訊的小變化以壓縮影象。 作為標準圖片來說，80到90的質量等級（按100的比例來說）通常是影象尺寸和質量之間的良好折衷方案。

在不同質量水平下 相同 編碼的影象之間的比較。 影象在視覺上幾乎相似但具有不同的尺寸。

在不同質量水平下 相同 編碼的影象之間的比較。 影象在視覺上幾乎相似但具有不同的尺寸。

完成格式和質量優化的一種簡單方法是使用ImageKit來傳送影象。 它會盡可能自動將影象轉換為WebP，並實時優化影象質量。

3.支援移動裝置

在今天的世界裡，如果你認真對待網站運營，忽視移動使用者是一種罪過。 資料表明，近60％的全球流量來自移動裝置。 是的，雖然行動電話已經變得強大，行動網路變得更好，但資料顯示移動資料速度仍然比寬頻速度慢得多。有許多國家或地區暴扣一些鄉村移動資料連線不穩定。 因此，在為移動設計Web體驗時要格外注意。

如果你有桌面和移動裝置的響應式網站，則可以切換到使用響應式影象。 使用響應式影象標籤，使用img標籤的 srcset 和 sizes 屬性，你可以為瀏覽器提供單個影象的變體列表以及不同螢幕上相對影象大小的定義。 然後，瀏覽器根據裝置尺寸和您指定的佈局，從可用列表中確定要在特定裝置上載入的最佳影象大小。

<img srcset="image-320w.jpg 320w,
image-480w.jpg 480w,
image-800w.jpg 800w"
sizes="(max-width: 320px) 300px,
(max-width: 480px) 440px,
800px"
src="image-800w.jpg" alt="Image">

sizes 屬性提供有關影象佈局的資訊， srcset 屬性為影象列表提供針對每個URL指定的實際寬度。

移動裝置的另一個影響因素是裝置畫素比率或DPR值。現代行動電話具有高密度螢幕，在相同的平方英寸中包含更多畫素。

在常規裝置上看起來很好的影象在高密度螢幕上看起來會略微模糊。對此的解決方案是在具有DPR 2的螢幕上載入2x尺寸的影象，在具有DPR 3的螢幕上載入3x影象並且在其他裝置上載入普通影象1x尺寸的影象。這也可以使用如下所示的響應影象標籤來完成。

<img srcset="image-320w.jpg 1x,
image-640w.jpg 2x
src="image-320w.jpg" alt="Image">

一個名為Client Hints的現代規範，使得響應式影象的入門變得簡單，並且與 srcset 和 sizes 屬性方法相比，使程式碼看起來更清晰。客戶提示如何工作本身就是一個很大的話題，它超出了這篇文章的範圍，這裡已經詳細介紹了。

ImageKit為你提供基於URL的DPR引數以及調整大小和裁剪引數，還支援客戶端提示，這使得使用響應式影象非常容易，並可以跨裝置提供完美的影象。

4.載入更少的資源

載入太多影象也會降低網站速度並對使用者體驗產生負面影響， 即使已經優化了所有影象。我並不主張我們應該使用較小的影象。但是，有些情況下我們可以避免使用影象或避免預先載入它們。

例如，你可以使用CSS建立按鈕，漸變和其他高階元素，而不是載入影象。

你可以使用的另一個更重要的技術是延遲載入影象。延遲載入基本上意味著我們推遲載入不需要的影象。通常，使用者在其螢幕或視口上不可見的任何影象可以在稍後的時間點載入，即當影象進入或即將進入視口時。

影象在開始並未載入。只加載了影象佔位符。稍後非同步載入影象。請注意，沒有用於載入影象的序列。

假設你的網頁上有100個產品。如果您在同一時間和最開始請求所有100個產品影象，則會減慢載入時間。這些影象將與網頁上的其他關鍵專案（如CSS和JS）競爭網路頻寬和CPU資源。

使用延遲載入時，我們只會載入30個最初對使用者可見的影象。然後，當用戶開始向下滾動頁面時，我們將繼續載入更多影象。這將有助於改善初始載入時間和使用者體驗。在某些情況下，使用者不會向下滾動整個頁面，因此根本不會載入某些影象。因此，你最終還可以節省影象傳輸的頻寬成本。

有了jQuery Lazy等JS庫，使用延遲載入入門非常簡單。您還可以使用最新的IntersectionObserver API，它比於延遲載入的JS庫更高效。

5.使用良好的CDN進行影象傳輸

一旦解決了影象的大小和載入到特定頁面上的影象數量，下一步就是確保快速載入網站上載入的影象。減少影象載入時間不僅可以幫助您獲得更快的整體頁面載入時間，從而更好地在您的網站上獲得使用者體驗，還可以幫助您在搜尋引擎上排名更高。

內容分發網路或CDN是一組全球分散式快取/代理伺服器。Incapsula的這篇文章很好地解釋了CDN的工作原理。

圖片來源：Flare/">CloudFlare

假設您的網站伺服器位於美國。內容交付網路將您的影象快取在其全球分佈的伺服器網路上（它比這更復雜，但為了簡單起見，讓我們假設這一點）。然後，如果來自巴西的使用者從您的網站請求影象，而不是從美國的伺服器獲取該影象，則CDN從巴西最接近該使用者的節點提供該影象。這減少了載入影象所需的往返時間。本維基百科頁面列出了一些值得注意的CDN。

選擇CDN時，請確保CDN支援HTTP / 2。HTTP / 2是一種用於在Web上傳送內容的新協議，可以幫助顯著加快載入時間。它使用多路複用，頭壓縮和伺服器推送等技術來減少頁面載入時間。現在，以下CDN支援HTTP / 2。這個演示頁面可以直觀地解釋HTTP / 2和舊的HTTP / 1.1協議之間的效能差異。

ImageKit為您提供了開箱即用的HTTP / 2 CDN。無需任何額外的努力，您就可以使用ImageKit為您的影象（甚至其他靜態檔案）獲得最佳的交付。

如何測試網站與影象相關的問題?

有相當多的工具，你可以使用來測試一個網站的形象相關問題。一種方法是通過ImageKit使用這個 網站分析器 。只需輸入一個頁面URL，幾秒鐘之內，它就會給出關於調整大小、最佳格式、延遲載入和HTTP/2的建議。谷歌還開發了一個名為 燈塔 的開源工具。這個工具整合在Chrome的最新版本中，不僅可以對網站上的圖片進行全面分析，還可以對其他可能影響效能的問題進行分析。 Google PageSpeed insights 還指出，如果你的網站上除了其他推薦之外，還有沒有優化的圖片。

結論

我們已經介紹了所有關於影象優化和效能改進的主要技術。有了這些資訊，你可以解決90%的影象相關問題，如果不能解決更多的話，這將幫助你獲得更快的頁面載入時間和更高的搜尋結果排名。永遠記住，對於你網站上的圖片-載入更輕，載入更少，載入更快。

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選： 加入