如何把网站图片优化与懒加载做到极致？

无论网站是何把否是图片站点，子凡都觉得图片内容是(shi)网站每个网站的必须品，是图片提升用(yong)户体验达到一个更优秀的阅读效果的表现，也就是优化说一篇好的文章都应该拥有(you)最合适的(de)配图来提高用户阅读体验。那么针对于整个网站优化来说，懒加该如何将图(tu)片做(zuo)到最优呢?到极

子凡在前些时候“浅谈一篇优质的原创文章是怎样练成的?”一文(wen)中(zhong)也提到过文章的配图的重要性，图文并茂有利于整篇文章的何把结构和重(zhong)点，那么今天子凡所要说到的网站网站图片(pian)优化(hua)和懒加载，是图片继续“网站SEO优化与用户体验发生冲突时该如(ru)何选择?”文章话题的一个拓展，更(geng)多的优化是(shi)关于网站用户体验的优化和升级。

网站图(tu)片优化(hua)的(de)懒加重要性(xing)

网站图片的(de)使用在提升用户阅读体验和网站整体的视觉设计效果都是有非常大(da)的提升和(he)帮助，以至于在网页设计上面几乎每(mei)一个文章链接都(dou)会调用文章缩略图，到极从而也就存(cun)在(zai)一个潜在且影响用户体验的何把问题(ti)。

网页中加载的网站图片越(yue)多，对于网站主和访客用户来说，图片都是对服务器和本地网络资源的极大浪费，同时(shi)也拉低了网站的打(da)开(kai)速度，及时视觉效果方面(mian)提(ti)升了，但性(xing)子急的用户可以早就选择离开而看不(bu)到了。

图片懒加载的必要性

网站图片优化的重要性就体现在了网站整体(ti)的(de)加载速度，虽然我们可以通过CDN加速或者提升服务器带宽，这无疑是增加了网站运营成本，而同样会浪费用户的带宽或流量，虽然可能用户并不能察觉到，但是既然是子凡这个追求极致的人来说，这点是绝对不能容(rong)忍的。

所以(yi)图片懒加载的必要性就体现出来了，懒加载的方式就是把(ba)用户能(neng)看到的页面中的图片第一时间渲染并加载，那么非首屏外的图片，当用户翻页或者滚动到可是区域时在实时的加载，可以说是真(zhen)正的做到了按需加载吧，这样从(cong)本质上来减少图片(pian)对服务器带宽的压力(li)，以及对用户的最佳考虑，更是提升网站首屏打开(kai)速度的(de)一个好方法，当然子凡已(yi)经详细的分享过(guo)关于“网站该如何做好首屏的打开加载速度优化?”的文章，感兴趣的可以(yi)去看看。

对于网站图片优化的重要性已经不(bu)言而(er)喻，而图片懒加载的重要性也(ye)就更不用多说，针对与网站图(tu)片的优化(hua)，我们在如何利用懒加载的方式来做到页面的最佳化呢?

首先我们需要(yao)知(zhi)道整个网站或(huo)者一个页面中在哪些板块会出现图片，因为各个网站的不同，子凡这里就以一种最通用的页面来举例：

其中首页一般顶部第一个是LOGO图片，这个应该是没有必要做(zuo)懒加载的，因为LOGO肯定是会在首屏显示(shi)和第一时间加载的(de);然后可能就是(shi)幻灯效果或者是大图的展现效果，如果图片是在首屏的话做懒加载就没有必要了(le)，可以选择直(zhi)接(jie)引入或者(zhe)css内链样(yang)式以背景的(de)方式引入图片;接着就(jiu)是左侧的文章列表以及右侧的推荐文(wen)章等相关的内容和缩略图，这些地方的图片就是做懒加载的(de)必要地方;对于像(xiang)博客(ke)或者一些资讯的(de)站点，可(ke)能还会存在一个用户头像图(tu)片，这个也(ye)是做懒加载的必要地方;

以上四点是针对与一个通(tong)用的网页以及整个网站都是适用的，而对于文章内容页面，子凡还(hai)有更多的(de)看法与观点，一般而言文章内容为了让搜索引擎良好(hao)的抓取文章整体内容包括图片，所以是不会(hui)做图(tu)片的懒加载的(de)，但是对(dui)于想子凡的(de)泪雪网的某些评测或者需要多张甚至大量的图片(pian)展现该怎么办呢?有什么好的(de)解决方法(fa)?

子凡的观点是对(dui)于有多张或大量(liang)图片的文章内容而已，懒加载(zai)依旧是(shi)非常有必要的，否则当文章页面打开，所有的图片都同时(shi)请求加(jia)载(zai)图(tu)片，依旧会形成(cheng)网页半天打(da)不开或者页面加载中的状态，通过子凡的个人经验和对内容传播的总结来看，文章中的前三张图片不做懒加载，其余图片都是可以(yi)做懒加(jia)载图(tu)片的，从(cong)搜索引擎的角度来看，文章中的图(tu)片会被搜索引擎索引并且可能用于(yu)搜索结果的缩略图展现，所以不能全部做(zuo)图片懒加载，否则搜索引擎就不能正(zheng)确获取到文章图片，至于为(wei)什(shen)么是三张图(tu)片嘛，子凡可能也说不出具(ju)体的参考源或者依据，纯属经验与个(ge)人判断，同时也因(yin)为三种缩略图是比较通用常(chang)见(jian)的一个(ge)样式的缘故吧。

对于网站图片的优化，懒加载可能只是其中一种方式，但确(que)实(shi)最行之有效的方(fang)式，例如现在第三方的CDN就可以直接处理和(he)压缩图片，相当的简单方便，虽然说子凡也很喜欢CDN，但(dan)是网站处于一个流量不高不低(di)的状态，服务器带宽优化一下也是可以(yi)支持的(de)，所以就不愿意用CDN，因为CDN流量也是需要花钱的啊!对于一个网站而已，图片比内容更占用空间和带宽，但是只要做到足够的优化(hua)，也是可以(yi)完美应对的。

关于如何把网站图片优化与懒加(jia)载做到极致子凡也就给(gei)大家分(fen)享到这里了，相信能对那(na)些喜欢折腾，追求极致，或者那些流量不高不低不愿意再给(gei)图(tu)片或(huo)者(zhe)CDN流量付费的朋友们有(you)所帮助了，如果你对网站图片优化还有其它(ta)观点，欢迎在泪雪博客留言我们一起探讨哦!

除非注明，否则均为泪雪博客原创文章，转载(zai)请以链接形式标明本文地址

本文链接(jie)：