無(wú)論網(wǎng)站是否是圖片站點(diǎn)，子凡都覺(jué)得圖片內容是每個(gè)網(wǎng)站的必須品，是提升用戶(hù)體驗達到一個(gè)更優(yōu)秀的閱讀效果的表現，也就是說(shuō)一篇好的文章都應該擁有最合適的配圖來(lái)提高用戶(hù)閱讀體驗。那么針對于整個(gè)網(wǎng)站優(yōu)化來(lái)說(shuō)，該如何將圖片做到最優(yōu)呢？

子凡在前些時(shí)候“淺談一篇優(yōu)質(zhì)的原創(chuàng )文章是怎樣練成的？”一文中也提到過(guò)文章的配圖的重要性，圖文并茂有利于整篇文章的結構和重點(diǎn)，那么今天子凡所要說(shuō)到的網(wǎng)站圖片優(yōu)化和懶加載，是繼續“網(wǎng)站SEO優(yōu)化與用戶(hù)體驗發(fā)生沖突時(shí)該如何選擇？”文章話(huà)題的一個(gè)拓展，更多的是關(guān)于網(wǎng)站用戶(hù)體驗的優(yōu)化和升級。

網(wǎng)站圖片優(yōu)化的重要性

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

網(wǎng)頁(yè)中加載的圖片越多，對于網(wǎng)站主和訪(fǎng)客用戶(hù)來(lái)說(shuō)，都是對服務(wù)器和本地網(wǎng)絡(luò )資源的極大浪費，同時(shí)也拉低了網(wǎng)站的打開(kāi)速度，及時(shí)視覺(jué)效果方面提升了，但性子急的用戶(hù)可以早就選擇離開(kāi)而看不到了。

圖片懶加載的必要性

網(wǎng)站圖片優(yōu)化的重要性就體現在了網(wǎng)站整體的加載速度，雖然我們可以通過(guò)CDN加速或者提升服務(wù)器帶寬，這無(wú)疑是增加了網(wǎng)站運營(yíng)成本，而同樣會(huì )浪費用戶(hù)的帶寬或流量，雖然可能用戶(hù)并不能察覺(jué)到，但是既然是子凡這個(gè)追求極致的人來(lái)說(shuō)，這點(diǎn)是絕對不能容忍的。

所以圖片懶加載的必要性就體現出來(lái)了，懶加載的方式就是把用戶(hù)能看到的頁(yè)面中的圖片第一時(shí)間渲染并加載，那么非首屏外的圖片，當用戶(hù)翻頁(yè)或者滾動(dòng)到可是區域時(shí)在實(shí)時(shí)的加載，可以說(shuō)是真正的做到了按需加載吧，這樣從本質(zhì)上來(lái)減少圖片對服務(wù)器帶寬的壓力，以及對用戶(hù)的最佳考慮，更是提升網(wǎng)站首屏打開(kāi)速度的一個(gè)好方法，當然子凡已經(jīng)詳細的分享過(guò)關(guān)于“網(wǎng)站該如何做好首屏的打開(kāi)加載速度優(yōu)化？”的文章，感興趣的可以去看看。

如何將網(wǎng)站圖片優(yōu)化做到極致？

對于網(wǎng)站圖片優(yōu)化的重要性已經(jīng)不言而喻，而圖片懶加載的重要性也就更不用多說(shuō)，針對與網(wǎng)站圖片的優(yōu)化，我們在如何利用懶加載的方式來(lái)做到頁(yè)面的最佳化呢？

首先我們需要知道整個(gè)網(wǎng)站或者一個(gè)頁(yè)面中在哪些板塊會(huì )出現圖片，因為各個(gè)網(wǎng)站的不同，子凡這里就以一種最通用的頁(yè)面來(lái)舉例：

其中首頁(yè)一般頂部第一個(gè)是LOGO圖片，這個(gè)應該是沒(méi)有必要做懶加載的，因為L(cháng)OGO肯定是會(huì )在首屏顯示和第一時(shí)間加載的；然后可能就是幻燈效果或者是大圖的展現效果，如果圖片是在首屏的話(huà)做懶加載就沒(méi)有必要了，可以選擇直接引入或者css內鏈樣式以背景的方式引入圖片；接著(zhù)就是左側的文章列表以及右側的推薦文章等相關(guān)的內容和縮略圖，這些地方的圖片就是做懶加載的必要地方；對于像博客或者一些資訊的站點(diǎn)，可能還會(huì )存在一個(gè)用戶(hù)頭像圖片，這個(gè)也是做懶加載的必要地方；

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

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

寫(xiě)在最后的簡(jiǎn)單總結

對于網(wǎng)站圖片的優(yōu)化，懶加載可能只是其中一種方式，但確實(shí)最行之有效的方式，例如現在第三方的CDN就可以直接處理和壓縮圖片，相當的簡(jiǎn)單方便，雖然說(shuō)子凡也很喜歡CDN，但是網(wǎng)站處于一個(gè)流量不高不低的狀態(tài)，服務(wù)器帶寬優(yōu)化一下也是可以支持的，所以就不愿意用CDN，因為CDN流量也是需要花錢(qián)的??！對于一個(gè)網(wǎng)站而已，圖片比內容更占用空間和帶寬，但是只要做到足夠的優(yōu)化，也是可以完美應對的。

關(guān)于如何把網(wǎng)站圖片優(yōu)化與懶加載做到極致子凡也就給大家分享到這里了，相信能對那些喜歡折騰，追求極致，或者那些流量不高不低不愿意再給圖片或者CDN流量付費的朋友們有所幫助了，如果你對網(wǎng)站圖片優(yōu)化還有其它觀(guān)點(diǎn)，歡迎在淚雪博客留言我們一起探討哦！

除非注明，否則均為淚雪博客原創(chuàng )文章，轉載請以鏈接形式標明本文地址

本文鏈接：https://zhangzifan.com/img-lazy-load-seo.html