图片与静态资源优化
很多网站“看起来不复杂却很慢”，根因不是框架，而是静态资源管理太粗糙。
最常见的问题
- 图片原图直接上站
- 首页放了太多大图
- 同一资源存在多个重复版本
- 字体体积过大
- 缓存策略不统一
先把资源分成几类
图片
最常见、也最容易失控。
字体
常常被忽略，但体积不小。
CSS / JavaScript
主要影响请求数量和首屏加载。
下载资源
如 PDF、压缩包等，通常适合单独考虑缓存和存储路径。
图片优化最值得先做什么
1. 先降尺寸，而不是只降质量
很多图片之所以大，不是格式问题，而是像素尺寸远超展示尺寸。
2. 按场景准备不同版本
- 封面图
- 文章插图
- 缩略图
- 作品展示图
不要一张原图包打天下。
3. 格式尽量适配网页
对于普通网页展示，优先考虑更适合 Web 的格式和压缩方式。
静态资源管理要尽量统一
建议至少做到：
- 命名规则清楚
- 存放目录清楚
- 公共资源和页面专属资源区分清楚
- 大文件不要混在页面源码里随意散放
为什么资源优化和缓存绑定在一起
因为资源一旦适合长期缓存，你就应该考虑：
- 是否有版本号或内容哈希
- 更新后旧缓存怎么失效
- CDN 是否会继续回旧版本
这个仓库里可以复用的专项经验
如果你有 iPhone / HEIF 图片上站需求，可以继续参考这篇专项笔记：
它更偏具体图片处理命令，而这篇更偏“为什么要这样处理”。
最容易踩的坑
1. 首页图一张几 MB
这会直接伤首屏体验。
2. 图片已经压缩，但展示尺寸还是不合理
体积和像素尺寸要一起看。
3. 文件名和目录毫无规则
后期维护、缓存刷新和内容迁移都会变得困难。
一个务实顺序
- 先处理首页和高频页面图片
- 再处理全站公共资源
- 再统一缓存和命名策略
适合接着读什么
- 想看性能总览：看 Web 性能基础：从首屏到缓存策略
- 想发布前检查：看 网站上线检查清单