树洞
shudong · 把想说的话，说给树洞听
欢迎来到树洞 —— 一个安静说话的地方。
图片优化：webp 和懒加载的实际收益
371 字
2 分钟
图片优化：webp 和懒加载的实际收益
🖼 起因
博客首页放了不少图，加载明显变慢。尤其手机上，头图出来之前是一片白。
于是认真做了一次图片优化。
📦 格式：webp / avif
同样的图，几种格式差别很大：
- PNG：无损，体积最大
- JPEG：有损，中等
- WebP：同等画质下比 JPEG 小 25%~35%
- AVIF：更小，但兼容性略差、编码慢
我的做法是用 WebP 打底。兼容性现在基本不是问题（除了很老的 Safari）。
实测：一张 512×512 的 PNG 图标 417 KB，转 WebP 之后不到 40 KB，肉眼看不出差别。
🦥 懒加载
第二件事是只加载看得见的图。
给 img 加 loading="lazy"，浏览器就会推迟加载屏幕外的图片。首屏之外的图等到用户滚动过去再请求。
这个改动一行代码就能完成，对长页面的收益非常明显。
📐 尺寸要对
还有个容易忽略的：别用大图当小图。
头像显示区域只有 96×96，你给它一张 1024 的图，等于让用户下载了 100 倍用不着的数据。按实际显示尺寸导出，或者用响应式 srcset 让浏览器自己挑。
📊 结果
首页总体积从 1.8 MB 降到 620 KB，首屏加载时间掉了差不多一半。
🪵 小结
优先级排序：
- 用对尺寸（收益最大，最容易被忽略）
- 换格式（简单，收益稳定）
- 懒加载（一行代码，长页面必备）
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
一套 favicon 到底要切多少个尺寸
技术浏览器标签、手机主屏、搜索结果、分享卡片……每个地方要的图标尺寸都不一样。
2
静态博客的评论系统怎么选
技术giscus、Twikoo、Waline、Disqus 各自适合谁，以及我最后为什么选了 giscus。
3
把静态站放到 Cloudflare 上遇到的几个小坑
技术部署很顺，但有几个细节折腾了我一阵，记下来免得下次再踩。
4
Git 提交信息怎么写才不后悔
技术三个月后回看自己的提交记录，一半看不懂在干嘛。于是认真改了写法。
5
RSS 还没死
技术用了半年 RSS 之后，我重新拿回了「看什么」的决定权。
随机文章随机推荐