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

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

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

网站图片优化的重要性

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

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

图片懒加载的必要性

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

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

如何将网站图片优化做到极致？

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

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

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

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

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

写在最后的简单总结

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

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

除非注明，否则均为 泪雪博客原创文章，禁止任何形式转载

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