衡量一个网站SEO做得好不好的一个重要指标，是页面的打开速度，而影响一张网页打开速度的一个很重要的因素，是加载图片的大小。目前网络上流行的两个优化图片的概念，分别是渐进式加载和懒加载。一个好的网站，需要同时对图片都做到渐进式加载和懒加载这两种处理。

懒加载，意思是浏览器加载页面的时候先不加载图片，视窗滚动到能显示图片的位置的时候，图片再自动加载。这样可以避免打开页面的同时因为要加载图片，导致的页面打开时间变长的问题。目前主流浏览器已经都可以不用JS实现了，只要给图片加上loading=”lazy”的属性即可。WordPress基本已经替我们自动实现了，只要是通过content或者thumbnail相关的函数调用的图片，WP自动会给它们加上这个属性：

不得不提一下，WordPress更妙的地方在于它不仅自动实现了懒加载，还自动实现了用srcset和sizes属性在不同的屏幕尺寸上调用适合的大中小图，避免流量浪费。这些大中小图都是后台预设并自动生成的，不需要你多花一分的力气。这可是很久以前就实现了，我有博客为证：研究一下响应式图片加载属性srcset和sizes

接下来说渐进式加载。不同于懒加载是为了提升页面加载速度，渐进式加载主要还是为提升观感服务的，它并不会加快页面打开速度，单纯只是为了让图片加载过程显得“好看”而已。渐进式加载图片大致效果如下：

以前我们会用JS去调用一张模糊图片，并监听原图的加载，加载原图完成后再替换模糊图片显示。你可以得出一个结论，渐进式加载由于要多加载一张模糊图片，总的加载量反而是更多的，开销反而变大了。现在有了更容易的实现方式，就是在导出图片的格式上勾选一下即可，不需要再用到任何JS脚本和额外的图片了。

以Photoshop导出JPG为例，只要保存的时候选择“连续”，这样的图片放在网页上，加载的时候自动会有一个模糊到清晰的效果。

我们做的网站，对这些技术细节贯彻是很彻底的。对于图片来说，懒加载和渐进式加载同时都要做好，同时在使用图片之前还要对图片的格式尽可能优化，这样才能保证每个页面的加载速度。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/3157.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。