网站图片优化指南：格式、压缩和懒加载怎么做

3 阅读

图片是网站性能最常见的瓶颈之一。很多内容型网站里，图片会占据页面下载体积的很大一部分。优化图片通常是提升网站加载速度投入产出比最高的手段之一——核心不是简单把图片压糊，而是在视觉质量和文件大小之间找到平衡点。

一、为什么图片是网站性能的头号瓶颈？

一张手机拍摄的高清照片通常是 3-5MB，而一个理想的博客网页（含文字、样式、脚本和图片）的总加载大小应该在 1-2MB 以内。如果你在文章中直接上传原图，一张图片就足以拖垮整个页面的加载速度。

影响链：

大图片 → 更长的传输时间 → 页面渲染等待 → 用户跳出 → 搜索引擎排名下降

好消息是：图片优化的收益通常很直接。图片体积越小，传输时间和首屏等待越容易下降，但最终速度还会受到服务器、网络、缓存和页面结构影响。

二、常见图片格式对比：什么时候用哪个？

格式压缩类型透明度适合场景典型文件大小比
JPEG有损压缩❌ 不支持照片、复杂色彩图片基准（1x）
PNG无损压缩✅ 支持截图、Logo、图标通常比 JPEG 大
WebP有损/无损✅ 支持几乎所有场景比 JPEG 小 25-35%
AVIF有损/无损✅ 支持高质量照片比 JPEG 小 50%
SVG矢量✅ 支持Logo、图标、图表极小

格式选择建议

  • 照片、文章配图 → 首选 WebP，备选 JPEG。
  • 截图、界面展示 → PNG（保留清晰文字边缘）或 WebP 无损模式。
  • Logo、图标 → SVG（矢量格式，任意缩放不模糊）。
  • 高质量摄影作品 → AVIF（如果浏览器兼容性不是问题）。

浏览器兼容性

  • WebP：Chrome、Firefox、Safari、Edge 均已支持，普通网站可以放心使用。
  • AVIF：主流浏览器均已支持，但部分旧版本 Safari 不支持。如果面向广泛的移动端用户，建议同时提供 WebP 回退。

三、压缩策略：无损 vs 有损

无损压缩

通过优化文件的内部数据结构，在不改变任何一个像素的前提下减小文件体积。对 PNG 和 WebP 有效，压缩率通常 10%-30%。

有损压缩

通过丢弃对人眼不敏感的颜色和细节信息来大幅减小文件体积。对 JPEG、WebP 和 AVIF 有效，压缩率可达 50%-90%。

怎么选？

  • 照片和文章配图：使用有损压缩，质量设置 75-85% 通常肉眼无法区分。
  • 截图和 UI 展示：使用无损或有损高质量（85%+），保留文字清晰度。
  • Logo 和图标：优先使用 SVG，并可通过 SVGO 等工具优化；如果必须使用位图，再考虑 PNG 无损压缩。

推荐工具

  • 命令行：cwebp（JPEG/PNG → WebP）、avifenc（→ AVIF）、pngquant（PNG 有损压缩）。
  • 在线工具：Squoosh（Google 出品，支持实时对比效果）、TinyPNG / TinyJPG。
  • 批量工具：ImageOptim（macOS）、XnConvert（跨平台）。

四、响应式图片：不同屏幕给不同的图

用户在桌面端用 1920px 宽的屏幕看你的文章配图，但在手机上只能看到 375px 宽。如果你统一上传 1920px 宽的大图，手机用户就是在下载一张远超他们需要的图片——既浪费流量又拖慢加载。

srcset 属性

HTML 的 srcset 属性允许你提供多张不同尺寸的同一图片，浏览器自动选择最合适的一张：

<img
  src="photo-800w.jpg"
  srcset="photo-400w.jpg 400w,
          photo-800w.jpg 800w,
          photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="文章配图说明"
/>

picture 元素

如果需要根据屏幕宽度或设备特性提供不同格式的图片，使用 <picture>：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="文章配图说明">
</picture>

这样支持 AVIF 的浏览器用 AVIF，支持 WebP 的用 WebP，都不支持的回退到 JPEG。

在 Halo 中的响应式图片

标准 Markdown 的图片语法 ![alt](url) 本身不支持手写 srcset 和 picture。较新的 Halo 版本已经支持附件图片缩略图生成和文章响应式图片，普通文章通常不需要手写 <picture>。具体效果仍取决于当前 Halo 版本、主题模板和附件存储方式。

如果需要精细控制，可以按场景处理：

  • 普通文章配图：上传合适尺寸和体积的图片，依赖 Halo 的响应式图片能力和主题样式即可。
  • 主题模板中的封面图、列表图：使用 Halo 的缩略图能力生成不同尺寸图片，并在模板中配置 srcset / sizes。
  • 文章里的特殊展示：可以在 HTML 块中直接写 <picture> / <img srcset> 标签。

五、懒加载：让图片在需要时才加载

懒加载（Lazy Loading）的核心思路是：只有当图片即将进入浏览器视口时，才开始加载它。 这样可以让页面首屏尽快渲染完成，而用户还没滚动到的图片不会占用初始带宽。

原生懒加载（推荐）

现代浏览器原生支持 loading="lazy" 属性，无需任何 JavaScript 库：

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

Chrome、Firefox、Safari、Edge 均已支持，覆盖绝大多数用户。

注意事项

  • 首屏的图片不要懒加载：文章顶部的封面图或 Logo 应该立即加载，否则会影响 LCP（最大内容绘制）指标。只在折叠线以下的图片上使用懒加载。
  • 设置明确的图片尺寸：给 <img> 添加 width 和 height 属性，避免懒加载图片加载后导致页面布局跳动（CLS 指标受影响）。

六、CDN 的图片处理能力

大多数 CDN 服务商提供基础或高级的图片处理功能，可以在不修改原图的情况下，通过 URL 参数动态生成不同尺寸、格式和质量版本。

例如，七牛云和又拍云的图片处理接口支持：

  • ?imageView2/1/w/800/h/600/q/85：等比例缩放到 800×600，质量 85%。
  • ?format/webp：动态转换为 WebP 格式。

这意味着你只需要上传一张原图，CDN 帮你自动生成适配不同设备的版本。对于图片较多的网站，这是维护成本较低的优化方案之一。

七、Halo 中的图片管理最佳实践

  1. 上传前先压缩图片。不要直接上传手机拍摄的 5MB 原图。用 Squoosh 或本地工具处理后再上传。建议文章配图控制在 200-500KB 以内。
  2. 使用 WebP 格式。Halo 支持上传 WebP 图片，建议优先上传 WebP 格式的图片。
  3. 给图片填写 Alt 文本。在上传附件或插入图片时，Halo 编辑器允许填写替代文本。这是图片 SEO 的基础，同时也提升无障碍访问体验。
  4. 配合 CDN 使用。如果已接入 CDN，确认 CDN 的缓存规则覆盖了图片文件，并开启图片格式转换功能（如支持）。

相关教程：Halo 网站加载慢？8 种原因排查与优化方法 · 使用页面缓存插件优化 Halo 网站速度 · 阿里云 ESA 接入 Halo 配置指南 · 腾讯云 EdgeOne 接入 Halo 配置指南

总结

把图片优化这件事拆开来看，其实就几件事：格式上，照片用 WebP、图标用 SVG、截图用 PNG，基本不会错；所有图片上传前做一次有损压缩，质量设在 75%-85%，单张控制在 200-500KB；尺寸方面文章配图 1200px 宽就够，最大不超过 1920px；非首屏的图片加上 loading="lazy" 懒加载，首屏的不要加；每张图片记得写上描述性的 alt 文本；如果已经接入了 CDN，顺手把格式转换和尺寸裁剪功能开起来。

这几步做到位后，图片加载速度通常会有明显改善。日常写文章时养成处理图片的习惯，也不会增加太多额外工作量。

这是「建站通识」系列的最后一篇。后续可以继续围绕图片 CDN、格式转换和前端性能做更细的专题补充。

评论