图片是网站性能最常见的瓶颈之一。很多内容型网站里，图片会占据页面下载体积的很大一部分。优化图片通常是提升网站加载速度投入产出比最高的手段之一——核心不是简单把图片压糊，而是在视觉质量和文件大小之间找到平衡点。
一、为什么图片是网站性能的头号瓶颈？
一张手机拍摄的高清照片通常是 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 的图片语法  本身不支持手写 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 中的图片管理最佳实践
- 上传前先压缩图片。不要直接上传手机拍摄的 5MB 原图。用 Squoosh 或本地工具处理后再上传。建议文章配图控制在 200-500KB 以内。
- 使用 WebP 格式。Halo 支持上传 WebP 图片，建议优先上传 WebP 格式的图片。
- 给图片填写 Alt 文本。在上传附件或插入图片时，Halo 编辑器允许填写替代文本。这是图片 SEO 的基础，同时也提升无障碍访问体验。
- 配合 CDN 使用。如果已接入 CDN，确认 CDN 的缓存规则覆盖了图片文件，并开启图片格式转换功能（如支持）。
相关教程：Halo 网站加载慢？8 种原因排查与优化方法 · 使用页面缓存插件优化 Halo 网站速度 · 阿里云 ESA 接入 Halo 配置指南 · 腾讯云 EdgeOne 接入 Halo 配置指南
总结
把图片优化这件事拆开来看，其实就几件事：格式上，照片用 WebP、图标用 SVG、截图用 PNG，基本不会错；所有图片上传前做一次有损压缩，质量设在 75%-85%，单张控制在 200-500KB；尺寸方面文章配图 1200px 宽就够，最大不超过 1920px；非首屏的图片加上 loading="lazy" 懒加载，首屏的不要加；每张图片记得写上描述性的 alt 文本；如果已经接入了 CDN，顺手把格式转换和尺寸裁剪功能开起来。
这几步做到位后，图片加载速度通常会有明显改善。日常写文章时养成处理图片的习惯，也不会增加太多额外工作量。
这是「建站通识」系列的最后一篇。后续可以继续围绕图片 CDN、格式转换和前端性能做更细的专题补充。