無論網站是否是圖片站點，子凡都覺得圖片內容是每個網站的**品，是提升用戶體驗達到一個更**的閱讀效果的表現，也就是說一篇好的文章都應該擁有*合適的配圖來提高用戶閱讀體驗。那么針對于整個網站優化來說，該如何將圖片做到*優呢?

子凡在前些時候“淺談一篇**的原創文章是怎樣練成的?”一文中也提到過文章的配圖的重要性，圖文并茂有利于整篇文章的結構和重點，那么今天子凡所要說到的網站圖片優化和懶加載，是繼續“網站SEO優化與用戶體驗發生沖突時該如何選擇?”文章話題的一個拓展，更多的是關于網站用戶體驗的優化和升級。

網站圖片優化的重要性

網站圖片的使用在提升用戶閱讀體驗和網站整體的視覺設計效果都是有非常大的提升和幫助，以至于在網頁設計上面幾乎每一個文章鏈接都會調用文章縮略圖，從而也就存在一個潛在且影響用戶體驗的問題。

網頁中加載的圖片越多，對于網站主和訪客用戶來說，都是對服務器和本地網絡資源的極大浪費，同時也拉低了網站的打開速度，及時視覺效果方面提升了，但性子急的用戶可以早就選擇離開而看不到了。

圖片懶加載的必要性

網站圖片優化的重要性就體現在了網站整體的加載速度，雖然我們可以通過CDN加速或者提升服務器帶寬，這無疑是增加了網站運營成本，而同樣會浪費用戶的帶寬或流量，雖然可能用戶并不能察覺到，但是既然是子凡這個追求****的人來說，這點是**不能容忍的。

所以圖片懶加載的必要性就體現出來了，懶加載的方式就是把用戶能看到的頁面中的圖片**時間渲染并加載，那么非首屏外的圖片，當用戶翻頁或者滾動到可是區域時在實時的加載，可以說是**的做到了按需加載吧，這樣從本質上來減少圖片對服務器帶寬的壓力，以及對用戶的**考慮，更是提升網站首屏打開速度的一個好方法，當然子凡已經詳細的分享過關于“網站該如何做好首屏的打開加載速度優化?”的文章，感興趣的可以去看看。

如何將網站圖片優化做到****?

對于網站圖片優化的重要性已經不言而喻，而圖片懶加載的重要性也就更不用多說，針對與網站圖片的優化，我們在如何利用懶加載的方式來做到頁面的**化呢?

首先我們需要知道整個網站或者一個頁面中在哪些板塊會出現圖片，因為各個網站的不同，子凡這里就以一種*通用的頁面來舉例：

其中首頁一般頂部**個是LOGO圖片，這個應該是沒有必要做懶加載的，因為LOGO肯定是會在首屏顯示和**時間加載的;然后可能就是幻燈效果或者是大圖的展現效果，如果圖片是在首屏的話做懶加載就沒有必要了，可以選擇直接引入或者css內鏈樣式以背景的方式引入圖片;接著就是左側的文章列表以及右側的推薦文章等相關的內容和縮略圖，這些地方的圖片就是做懶加載的必要地方;對于像博客或者一些資訊的站點，可能還會存在一個用戶頭像圖片，這個也是做懶加載的必要地方;

以上四點是針對與一個通用的網頁以及整個網站都是適用的，而對于文章內容頁面，子凡還有更多的看法與觀點，一般而言文章內容為了讓搜索引擎良好的抓取文章整體內容包括圖片，所以是不會做圖片的懶加載的，但是對于想子凡的淚雪網的某些評測或者需要多張甚至大量的圖片展現該怎么辦呢?有什么好的解決方法?

子凡的觀點是對于有多張或大量圖片的文章內容而已，懶加載依舊是非常有必要的，否則當文章頁面打開，所有的圖片都同時請求加載圖片，依舊會形成網頁半天打不開或者頁面加載中的狀態，通過子凡的個人經驗和對內容傳播的總結來看，文章中的前三張圖片不做懶加載，其余圖片都是可以做懶加載圖片的，從搜索引擎的角度來看，文章中的圖片會被搜索引擎索引并且可能用于搜索結果的縮略圖展現，所以不能全部做圖片懶加載，否則搜索引擎就不能正確獲取到文章圖片，至于為什么是三張圖片嘛，子凡可能也說不出具體的參考源或者依據，純屬經驗與個人判斷，同時也因為三種縮略圖是比較通用常見的一個樣式的緣故吧。

寫在**的簡單總結

對于網站圖片的優化，懶加載可能只是其中一種方式，但確實*行之有效的方式，例如現在第三方的CDN就可以直接處理和壓縮圖片，相當的簡單方便，雖然說子凡也很喜歡CDN，但是網站處于一個流量不高不低的狀態，服務器帶寬優化一下也是可以支持的，所以就不愿意用CDN，因為CDN流量也是需要花錢的啊!對于一個網站而已，圖片比內容更占用空間和帶寬，但是只要做到足夠的優化，也是可以**應對的