图片懒加载：让我的网站首屏快了将近一秒

上个月我给自己的博客测了一下速度，发现首屏加载居然要 3 秒多。排查后发现，问题出在图片上——页面还没滚动到的图片，也在一开始全部加载了。加了懒加载之后，首屏直接降到了 2 秒出头。今天把这个小技巧分享给大家。

什么是懒加载？

懒加载就是：图片只有滚动到可见区域时，才开始加载。没滚动到的地方，先不加载。这样首屏只需要加载用户第一眼能看到的图片，自然快很多。

比如一篇长文章里有 20 张配图，如果用户只看了前 3 张就关掉了，那后面的 17 张根本不用下载。省流量，也省服务器带宽。

最简单的方法：loading="lazy"

现代浏览器都支持一个原生属性，直接在 img 标签上加就行：

<img src="photo.jpg" alt="描述" loading="lazy">

不需要任何 JS，Chrome、Firefox、Edge、Safari 都支持。只要加上这个属性，浏览器就会自动处理。

不过要注意：首屏最重要的图片不要加 lazy，比如网站 logo、banner 图，这些应该直接加载。否则用户一打开看到空白，体验反而不好。

响应式图片：一张图适配不同屏幕

手机上显示小图，电脑上看大图，这个道理大家都懂。但以前很多人的做法是：直接传一张大图，手机上也加载大图，白白浪费流量。

现在可以用 picture 标签或者 srcset 属性，根据屏幕宽度加载不同尺寸的图片：

<picture>
  <source srcset="photo-small.jpg" media="(max-width: 600px)">
  <source srcset="photo-large.jpg" media="(min-width: 601px)">
  <img src="photo-default.jpg" alt="描述">
</picture>

这样手机用户加载小图，桌面用户加载大图，各取所需。

我的实际做法

我现在网站上的规则是这样的：首屏图片直接加载，非首屏图片加 loading="lazy"，大图再配一个 srcset。三管齐下，速度提升很明显。

如果你用的是 WordPress 或者一些现代前端框架，这些功能通常都有插件或内置支持。手动写也很简单，改几个标签的事。

总结

图片优化不是只做压缩就够了，加载时机和加载尺寸同样重要。懒加载和响应式图片这两个小技巧，花不了多少时间，效果却很实在。建议大家都试试。