Firebase搭建个人摄影作品集的最优图片存储方案选型

针对个人低流量站点的场景，不用搞过度复杂的架构，按实际成本和效率排序的最优实践如下：

核心选型逻辑 #

先算清楚免费额度的边界：Firebase生态本身自带全球边缘CDN能力，低流量阶段所有资源消耗基本都在免费额度内，完全没必要额外采购第三方CDN服务。
优先选分层存储的组合方案，兼顾加载速度、管理便捷性和成本：

• 页面首屏、作品列表加载的展示图：先做压缩处理，统一转WebP格式，分辨率限制在1920px宽度以内，单张体积控制在200KB-500KB区间，直接放入Angular项目的assets目录，跟随项目统一部署到Firebase Hosting。
  这部分资源会自动被Firebase Hosting的边缘节点缓存，用户二次访问不需要回源，加载速度比直接拉取Firebase Storage资源快3-5倍，且Hosting提供的每月10GB免费出站流量、10GB免费存储额度，完全能覆盖个人作品集的低流量访问需求，不会产生费用。
• 全尺寸高清原图、点击放大/下载的高清资源：统一存在Firebase Storage存储桶，配置公开读权限，仅在用户主动触发查看原图操作时才拉取，不要在页面初始加载时请求这些资源。既保留了“传图到存储桶就自动生成页面内容”的便捷性，也避免了首屏加载过大、不必要的流量消耗。

两个备选方案的明显缺陷 #

• 全量图片直接存Firebase Storage、页面初始加载就拉取：Storage默认的缓存策略有效期极短，用户每次访问大概率要回源拉取资源，单张5MB的原图会把首屏加载速度拖到数秒，体验很差；且Storage的出站流量单价比Hosting更高，低流量下虽然费用差不大，但完全是没必要的浪费。
• 全量图片（含5MB以上原图）全塞assets目录部署到Hosting：每次新增作品都要重新走一遍项目构建、全量部署流程，完全丢失了动态生成内容的便利性；且首次访问需要加载数百MB资源，用户跳出率会非常高。

后续流量上涨后的优化方式 #

如果后续站点月访问量上涨，出站流量开始超出免费额度产生计费，不需要迁移服务，只需要两步调整就能把成本压到最低：

1. 给Firebase Storage里的图片资源配置长缓存响应头，在firebase.json里添加如下规则即可，配置后边缘节点会自动缓存Storage的静态资源，缓存命中后不会产生Storage的读取和出站费用：

{
  "hosting": {
    "headers": [
      {
        "source": "**/*.@(webp|jpg|jpeg|png)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

2. 按需给图片配置自适应分辨率，根据用户设备尺寸返回对应大小的图片，进一步减少无效流量消耗。

个人站点初期不要为了“预期的流量”提前上复杂架构，你当前40多张作品的规模，压缩完展示图总大小不到20MB，10GB的免费月流量足够支撑每月近500个访客全量浏览所有作品，完全够用。等真的出现流量瓶颈再调整，迁移成本几乎为0。

内容的提问来源于stack exchange，提问作者Ethan Day