"网页图片应该多少 KB？"没有唯一答案——通栏首屏大图和 40 px 头像的任务完全不同。真正有用的是*按角色分配预算*。

按图片角色的体积预算

  • 首屏 / 通栏大图（宽 1600–2000 px）：200 KB 以内。 它通常是屏幕上最大的元素，也是 LCP（最大内容绘制）分数的头号影响因子。
  • 文章正文配图（800–1200 px）：60–120 KB。 JPEG 或 WebP 质量 75 左右即可轻松达标。
  • 商品列表 / 卡片缩略图（300–600 px）：20–50 KB。 网格一次显示很多张，预算是按单格算的。
  • Logo 和图标：20 KB 以内——最好直接用 SVG，任何尺寸都清晰。
  • 整页合计：落地页的图片总重量控制在约 1 MB 以内。如果一张照片就吃掉一半，其余的必须相应缩水。

为什么"定预算"胜过"越小越好"

Google 的 Core Web Vitals 直接度量用户体验：超重图片推高 LCP，体感慢的页面排名和转化都更差——移动网络下尤其明显，而移动端几乎在所有市场都是流量大头。但过度压缩同样有代价：一张满是色块伪影的商品图，损失的订单远超省下的带宽。预算的意义就是告诉你该在哪里停手。

实际达标四步

  1. 先把尺寸缩到显示宽度。 往 800 px 的位置塞 4000 px 的照片，浪费 25 倍像素。仅这一步通常就完成了大半。
  2. 选现代格式。 同等画质下 WebP 比 JPEG 小 25–35%；只有需要兼容老软件时才退回 JPEG。
  3. 直接压到目标数字。 与其反复拖质量滑杆再核对，不如用带*目标体积*模式的压缩工具：设定 200 KB（或 100 KB、50 KB），让它自动二分搜索出刚好合身的质量。ImageHow 的在线压缩图片支持逐文件做到这一点，批量也可以。
  4. 在最重的页面上验证。 用浏览器开发者工具的 Network 面板打开图最多的页面、按体积排序——超标的图一眼就能揪出来。

把这些预算当限速牌而不是物理定律：摄影作品集可以有意识地超出，但要清楚每多出的 100 KB，都由每位访客在每次访问中买单。