跳到主要内容

图片与静态资源优化

很多网站“看起来不复杂却很慢”，根因不是框架，而是静态资源管理太粗糙。

最常见的问题​

  • 图片原图直接上站
  • 首页放了太多大图
  • 同一资源存在多个重复版本
  • 字体体积过大
  • 缓存策略不统一

先把资源分成几类​

图片​

最常见、也最容易失控。

字体​

常常被忽略，但体积不小。

CSS / JavaScript​

主要影响请求数量和首屏加载。

下载资源​

如 PDF、压缩包等，通常适合单独考虑缓存和存储路径。

图片优化最值得先做什么​

1. 先降尺寸，而不是只降质量​

很多图片之所以大，不是格式问题，而是像素尺寸远超展示尺寸。

2. 按场景准备不同版本​

  • 封面图
  • 文章插图
  • 缩略图
  • 作品展示图

不要一张原图包打天下。

3. 格式尽量适配网页​

对于普通网页展示，优先考虑更适合 Web 的格式和压缩方式。

静态资源管理要尽量统一​

建议至少做到：

  • 命名规则清楚
  • 存放目录清楚
  • 公共资源和页面专属资源区分清楚
  • 大文件不要混在页面源码里随意散放

为什么资源优化和缓存绑定在一起​

因为资源一旦适合长期缓存，你就应该考虑：

  • 是否有版本号或内容哈希
  • 更新后旧缓存怎么失效
  • CDN 是否会继续回旧版本

这个仓库里可以复用的专项经验​

如果你有 iPhone / HEIF 图片上站需求，可以继续参考这篇专项笔记：

它更偏具体图片处理命令，而这篇更偏“为什么要这样处理”。

最容易踩的坑​

1. 首页图一张几 MB​

这会直接伤首屏体验。

2. 图片已经压缩，但展示尺寸还是不合理​

体积和像素尺寸要一起看。

3. 文件名和目录毫无规则​

后期维护、缓存刷新和内容迁移都会变得困难。

一个务实顺序​

  1. 先处理首页和高频页面图片
  2. 再处理全站公共资源
  3. 再统一缓存和命名策略

适合接着读什么​