核心需求

在设计图片存储和 CDN 加速系统时，我们需要平衡三个核心需求：加载速度、图片质量和存储成本。这三个目标往往相互制约，需要根据具体业务场景找到最佳平衡点。

需求三角模型

           加载速度
              /\
             /  \
            /    \
           /      \
          /        \
         /          \
        /            \
       /              \
      /                \
     /                  \
    /____________________\
  图片质量 ←----------→ 存储成本

不可能三角：在资源有限的情况下，很难同时达到最优的加载速度、最高的图片质量和最低的存储成本。

一、加载速度（Load Speed）

加载速度是用户体验的核心指标，直接影响页面加载时间、用户留存率和转化率。

1.1 关键指标

/**
 * 图片加载性能指标
 */
interface ImageLoadMetrics {
  /** 首屏图片加载时间（毫秒） */
  firstPaintImageTime: number;
  
  /** 最大内容绘制时间（LCP - Largest Contentful Paint） */
  lcp: number;
  
  /** 图片加载完成时间 */
  imageCompleteTime: number;
  
  /** 图片加载失败率 */
  failureRate: number;
  
  /** 平均下载速度（KB/s） */
  avgDownloadSpeed: number;
  
  /** 端到端延迟（毫秒） */
  endToEndLatency: number;
}

/**
 * 行业基准标准（良好体验）
 */
const PERFORMANCE_BENCHMARKS = {
  lcp: 2500,           // LCP < 2.5 秒
  firstImage: 1500,    // 首屏图片 < 1.5 秒
  failureRate: 0.01,   // 失败率 < 1%
};

1.2 影响加载速度的因素

1.2.1 网络传输延迟

用户请求 → DNS 解析 → TCP 握手 → TLS 握手 → 服务器响应 → 数据传输 → 渲染
   │         │          │          │          │          │         │
  ~10ms    ~20-100ms   ~20ms      ~50ms     ~50-200ms   可变      ~16ms

优化策略：

• 使用 CDN 就近访问，减少网络延迟
• DNS 预解析和预连接
• HTTP/2 或 HTTP/3 多路复用
• TCP 连接复用

1.2.2 图片文件大小

/**
 * 图片大小与加载时间关系（假设带宽 5Mbps）
 */
function calculateLoadTime(
  fileSizeKB: number,
  bandwidthMbps: number = 5
): number {
  // 加载时间 = 文件大小 / 带宽
  // 5Mbps = 625 KB/s
  const bandwidthKBps = (bandwidthMbps * 1024) / 8;
  return (fileSizeKB / bandwidthKBps) * 1000; // 毫秒
}

// 示例：不同大小图片的加载时间
const examples = [
  { size: 50, time: calculateLoadTime(50) },    // ~80ms
  { size: 200, time: calculateLoadTime(200) },  // ~320ms
  { size: 500, time: calculateLoadTime(500) },  // ~800ms
  { size: 1000, time: calculateLoadTime(1000) }, // ~1600ms
];

1.2.3 CDN 节点覆盖

/**
 * CDN 节点分布对延迟的影响
 */
interface CDNNodeMetrics {
  /** 节点位置 */
  location: string;
  /** 到用户的距离（公里） */
  distance: number;
  /** 预计延迟（毫秒） */
  estimatedLatency: number;
  /** 节点负载率 */
  loadFactor: number;
}

// 不同场景下的延迟对比
const latencyComparison = {
  // 无 CDN，源站在北京
  noCDN: {
    beijing: 20,      // 北京用户
    shanghai: 50,     // 上海用户
    guangzhou: 60,    // 广州用户
    overseas: 300,    // 海外用户
  },
  // 有 CDN 覆盖
  withCDN: {
    beijing: 10,      // 本地节点
    shanghai: 15,     // 本地节点
    guangzhou: 15,    // 本地节点
    overseas: 80,     // 海外节点
  },
};

1.3 速度优化技术

1.3.1 图片格式优化

/**
 * 不同图片格式的性能对比
 */
const formatComparison = {
  jpeg: {
    compressionRatio: 10,      // 压缩比
    quality: 'good',
    support: 'universal',
    bestFor: ['photographs', 'complex-images'],
  },
  webp: {
    compressionRatio: 15,      // 比 JPEG 小 30-50%
    quality: 'good',
    support: 'modern',
    bestFor: ['photographs', 'transparency'],
  },
  avif: {
    compressionRatio: 20,      // 比 JPEG 小 50%
    quality: 'excellent',
    support: 'limited',
    bestFor: ['high-quality', 'bandwidth-critical'],
  },
  svg: {
    compressionRatio: 'variable',
    quality: 'lossless',
    support: 'universal',
    bestFor: ['icons', 'logos', 'simple-graphics'],
  },
};

1.3.2 响应式图片

<!-- srcset: 根据屏幕密度选择 -->
<img 
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, 
         (max-width: 1200px) 800px, 
         1200px"
  alt="响应式图片"
/>

<!-- picture: 根据浏览器支持选择格式 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="格式降级">
</picture>

1.3.3 懒加载（Lazy Loading）

/**
 * 图片懒加载实现
 */
interface LazyLoadConfig {
  /** 预加载阈值（像素） */
  rootMargin: string;
  /** 占位图 */
  placeholder: string;
  /** 加载失败重试次数 */
  maxRetries: number;
}

class ImageLazyLoader {
  private observer: IntersectionObserver;
  private config: LazyLoadConfig;

  constructor(config: LazyLoadConfig) {
    this.config = config;
    this.observer = new IntersectionObserver(
      this.handleIntersect.bind(this),
      { rootMargin: config.rootMargin }
    );
  }

  observe(imageElement: HTMLImageElement) {
    const dataset = imageElement.dataset;
    
    // 设置占位图
    imageElement.src = this.config.placeholder;
    
    // 开始观察
    this.observer.observe(imageElement);
  }

  private handleIntersect(entries: IntersectionObserverEntry[]) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target as HTMLImageElement;
        this.loadImage(img);
        this.observer.unobserve(img);
      }
    });
  }

  private async loadImage(img: HTMLImageElement, retry = 0) {
    const src = img.dataset.src;
    if (!src) return;

    try {
      await this.loadWithTimeout(src, 10000);
      img.src = src;
    } catch (error) {
      if (retry < this.config.maxRetries) {
        setTimeout(() => this.loadImage(img, retry + 1), 1000 * (retry + 1));
      } else {
        img.classList.add('load-failed');
      }
    }
  }

  private loadWithTimeout(src: string, timeout: number): Promise<void> {
    return Promise.race([
      new Promise<void>((resolve) => {
        const img = new Image();
        img.onload = () => resolve();
        img.onerror = () => resolve(); // 让外部 catch 处理
        img.src = src;
      }),
      new Promise<void>((_, reject) => 
        setTimeout(() => reject(new Error('Timeout')), timeout)
      )
    ]);
  }
}

二、图片质量（Quality）

图片质量直接影响用户的视觉体验和产品形象，需要在清晰度和文件大小之间找到平衡。

2.1 质量评估指标

/**
 * 图片质量评估指标
 */
interface ImageQualityMetrics {
  /** 分辨率（宽 x 高） */
  resolution: { width: number; height: number };
  
  /** 压缩质量（0-100） */
  compressionQuality: number;
  
  /** 色深（bits per pixel） */
  colorDepth: number;
  
  /** 色域覆盖 */
  colorGamut: 'sRGB' | 'P3' | 'Rec2020';
  
  /** 主观质量评分（MOS: Mean Opinion Score, 1-5） */
  mosScore: number;
  
  /** 结构相似性（SSIM: 与原始图片对比，0-1） */
  ssimScore: number;
  
  /** 峰值信噪比（PSNR，越高越好） */
  psnrValue: number;
}

/**
 * 质量分级标准
 */
const QUALITY_TIERS = {
  thumbnail: {
    maxWidth: 200,
    quality: 60,
    format: 'webp',
    useCase: '列表页缩略图',
  },
  medium: {
    maxWidth: 800,
    quality: 75,
    format: 'webp',
    useCase: '文章配图',
  },
  large: {
    maxWidth: 1920,
    quality: 85,
    format: 'webp',
    useCase: '全屏展示',
  },
  original: {
    maxWidth: null,
    quality: 95,
    format: 'original',
    useCase: '下载/编辑',
  },
};

2.2 质量与大小的权衡

/**
 * JPEG 质量与文件大小关系实验数据
 */
const jpegQualityComparison = [
  { quality: 100, sizeKB: 2400, ssim: 1.00, desc: '无损质量' },
  { quality: 95,  sizeKB: 1200, ssim: 0.99, desc: '近无损' },
  { quality: 85,  sizeKB: 600,  ssim: 0.97, desc: '高质量' },
  { quality: 75,  sizeKB: 300,  ssim: 0.95, desc: '平衡点' },
  { quality: 60,  sizeKB: 150,  ssim: 0.90, desc: '可接受' },
  { quality: 40,  sizeKB: 80,   ssim: 0.80, desc: '低质量' },
];

/**
 * 计算最佳质量参数
 * 
 * 目标：在满足 SSIM > 0.95 的前提下，最小化文件大小
 */
function findOptimalQuality(
  imageBuffer: ArrayBuffer,
  targetSSIM: number = 0.95
): { quality: number; sizeKB: number; ssim: number } {
  let bestQuality = 85;
  let bestSize = Infinity;
  
  // 二分查找最佳质量
  let low = 60, high = 95;
  
  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    const compressed = compressJPEG(imageBuffer, mid);
    const ssim = calculateSSIM(imageBuffer, compressed);
    
    if (ssim >= targetSSIM) {
      if (compressed.sizeKB < bestSize) {
        bestSize = compressed.sizeKB;
        bestQuality = mid;
      }
      high = mid - 1; // 尝试更低质量
    } else {
      low = mid + 1; // 需要更高质量
    }
  }
  
  return {
    quality: bestQuality,
    sizeKB: bestSize,
    ssim: targetSSIM,
  };
}

2.3 智能质量调整

/**
 * 基于内容类型的智能质量调整
 */
interface ContentTypeAnalysis {
  /** 图片类型 */
  type: 'photo' | 'graphic' | 'text' | 'mixed';
  /** 边缘复杂度 */
  edgeComplexity: number;
  /** 色彩丰富度 */
  colorRichness: number;
  /** 文本区域占比 */
  textAreaRatio: number;
}

/**
 * 根据内容分析调整质量参数
 */
function adjustQualityByContent(
  analysis: ContentTypeAnalysis,
  baseQuality: number
): number {
  let adjustedQuality = baseQuality;
  
  // 照片类：可以降低质量而不明显影响视觉效果
  if (analysis.type === 'photo') {
    adjustedQuality -= 5;
  }
  
  // 图形/文字类：需要更高质量保持清晰边缘
  if (analysis.type === 'graphic' || analysis.type === 'text') {
    adjustedQuality += 10;
  }
  
  // 高边缘复杂度：需要更高质量
  if (analysis.edgeComplexity > 0.7) {
    adjustedQuality += 5;
  }
  
  // 限制在合理范围内
  return Math.max(60, Math.min(95, adjustedQuality));
}

2.4 质量监控

/**
 * 图片质量监控系统
 */
class ImageQualityMonitor {
  private qualityThresholds = {
    minSSIM: 0.90,
    minPSNR: 30,
    maxSizeKB: 1000,
  };

  async validateImage(imageUrl: string): Promise<QualityReport> {
    const original = await this.fetchImage(imageUrl);
    const report: QualityReport = {
      url: imageUrl,
      timestamp: new Date().toISOString(),
      metrics: {},
      passed: true,
      issues: [],
    };

    // 检查文件大小
    if (original.sizeKB > this.qualityThresholds.maxSizeKB) {
      report.passed = false;
      report.issues.push(`文件大小超限：${original.sizeKB}KB`);
    }

    // 检查分辨率
    if (original.width < 100 || original.height < 100) {
      report.passed = false;
      report.issues.push('分辨率过低');
    }

    // 检查压缩质量（与源图对比）
    if (original.sourceUrl) {
      const source = await this.fetchImage(original.sourceUrl);
      const ssim = this.calculateSSIM(source, original);
      report.metrics.ssim = ssim;
      
      if (ssim < this.qualityThresholds.minSSIM) {
        report.passed = false;
        report.issues.push(`SSIM 过低：${ssim.toFixed(3)}`);
      }
    }

    return report;
  }

  private calculateSSIM(img1: ImageData, img2: ImageData): number {
    // SSIM 计算实现（简化版）
    // 实际实现需要更复杂的算法
    return 0.95;
  }
}

interface QualityReport {
  url: string;
  timestamp: string;
  metrics: {
    ssim?: number;
    psnr?: number;
  };
  passed: boolean;
  issues: string[];
}

三、存储成本（Cost）

存储成本是图片系统运营的主要开支，需要精细管理和优化。

3.1 成本构成

/**
 * 图片系统成本构成
 */
interface CostBreakdown {
  /** 存储成本（元/GB/月） */
  storageCost: number;
  
  /** CDN 流量成本（元/GB） */
  cdnTrafficCost: number;
  
  /** 回源流量成本（元/GB） */
  originTrafficCost: number;
  
  /** 图片处理成本（元/千次） */
  processingCost: number;
  
  /** API 请求成本（元/百万次） */
  requestCost: number;
}

/**
 * 主流云服务商价格对比（2024 年参考价格）
 */
const PROVIDER_PRICING: Record<string, CostBreakdown> = {
  aliOSS: {
    storageCost: 0.12,        // 标准存储
    cdnTrafficCost: 0.24,     // 中国大陆
    originTrafficCost: 0.50,  // 回源
    processingCost: 0.0015,   // 图片处理
    requestCost: 0.01,
  },
  tencentCOS: {
    storageCost: 0.118,
    cdnTrafficCost: 0.23,
    originTrafficCost: 0.50,
    processingCost: 0.0014,
    requestCost: 0.01,
  },
  qiniuKodo: {
    storageCost: 0.12,
    cdnTrafficCost: 0.20,
    originTrafficCost: 0.10,
    processingCost: 0.0012,
    requestCost: 0.01,
  },
  awsS3: {
    storageCost: 0.023,       // USD
    cdnTrafficCost: 0.085,    // USD (CloudFront)
    originTrafficCost: 0.00,  // 同 Region 免费
    processingCost: 0.0004,   // USD (Lambda)
    requestCost: 0.0004,      // USD
  },
};

3.2 成本估算模型

/**
 * 月度成本估算
 */
interface MonthlyUsage {
  /** 新增图片数量 */
  newImagesCount: number;
  /** 平均图片大小（KB） */
  avgImageSizeKB: number;
  /** CDN 月流量（GB） */
  cdnTrafficGB: number;
  /** 回源流量（GB） */
  originTrafficGB: number;
  /** 图片处理次数（千次） */
  processingCount: number;
  /** API 请求数（百万次） */
  requestCount: number;
}

/**
 * 计算月度成本
 */
function calculateMonthlyCost(
  usage: MonthlyUsage,
  pricing: CostBreakdown
): number {
  // 存储成本：累计存储量 × 单价
  const storageGB = (usage.newImagesCount * usage.avgImageSizeKB) / 1024 / 1024;
  const storageCost = storageGB * pricing.storageCost;

  // CDN 流量成本
  const cdnCost = usage.cdnTrafficGB * pricing.cdnTrafficCost;

  // 回源流量成本
  const originCost = usage.originTrafficGB * pricing.originTrafficCost;

  // 处理成本
  const processingCost = usage.processingCount * pricing.processingCost;

  // 请求成本
  const requestCost = usage.requestCount * pricing.requestCost;

  return storageCost + cdnCost + originCost + processingCost + requestCost;
}

// 示例：一个中型应用的月度成本估算
const exampleUsage: MonthlyUsage = {
  newImagesCount: 100000,    // 10 万张
  avgImageSizeKB: 200,       // 平均 200KB
  cdnTrafficGB: 5000,        // 5TB CDN 流量
  originTrafficGB: 500,      // 500GB 回源
  processingCount: 200,      // 20 万次处理
  requestCount: 100,         // 1 亿次请求
};

const monthlyCost = calculateMonthlyCost(exampleUsage, PROVIDER_PRICING.aliOSS);
// 约：存储 24 元 + CDN 1200 元 + 回源 250 元 + 处理 300 元 + 请求 1 元 = 1775 元/月

3.3 成本优化策略

3.3.1 存储分层

/**
 * 存储分层策略
 */
interface StorageTier {
  name: string;
  pricePerGBMonth: number;
  retrievalCost: number;
  minStorageDays: number;
  useCase: string;
}

const STORAGE_TIERS: StorageTier[] = [
  {
    name: '标准存储',
    pricePerGBMonth: 0.12,
    retrievalCost: 0,
    minStorageDays: 0,
    useCase: '热数据，频繁访问',
  },
  {
    name: '低频存储',
    pricePerGBMonth: 0.08,
    retrievalCost: 0.05,
    minStorageDays: 30,
    useCase: '温数据，月度访问',
  },
  {
    name: '归档存储',
    pricePerGBMonth: 0.03,
    retrievalCost: 0.10,
    minStorageDays: 60,
    useCase: '冷数据，偶尔访问',
  },
];

/**
 * 根据访问频率自动分层
 */
function determineStorageTier(
  lastAccessDays: number,
  accessFrequency: number // 次/天
): string {
  if (accessFrequency > 10 || lastAccessDays < 7) {
    return '标准存储';
  } else if (accessFrequency > 1 || lastAccessDays < 30) {
    return '低频存储';
  } else {
    return '归档存储';
  }
}

3.3.2 图片生命周期管理

/**
 * 图片生命周期管理规则
 */
interface LifecycleRule {
  /** 规则名称 */
  name: string;
  /** 适用前缀 */
  prefix: string;
  /** 转换存储类型（天数） */
  transitionToIA?: number;
  /** 转换归档（天数） */
  transitionToArchive?: number;
  /** 过期删除（天数） */
  expiration?: number;
  /** 过期删除标记版本 */
  expireNoncurrent?: number;
}

const LIFECYCLE_RULES: LifecycleRule[] = [
  {
    name: '用户上传原图',
    prefix: 'uploads/original/',
    transitionToIA: 30,
    transitionToArchive: 90,
    expiration: 730, // 2 年后删除
  },
  {
    name: '处理后图片',
    prefix: 'processed/',
    transitionToIA: 60,
    expiration: 365, // 1 年后删除（可重新生成）
  },
  {
    name: '临时文件',
    prefix: 'temp/',
    expiration: 7, // 7 天后删除
  },
  {
    name: '头像缩略图',
    prefix: 'avatars/',
    // 永久保存，不分层
  },
];

3.3.3 CDN 缓存优化

/**
 * CDN 缓存策略配置
 */
interface CDNCacheConfig {
  /** 路径模式 */
  pattern: string;
  /** 缓存 TTL（秒） */
  ttl: number;
  /** 是否忽略查询参数 */
  ignoreQuery: boolean;
  /** 缓存键规则 */
  cacheKey: string[];
}

const CACHE_STRATEGIES: CDNCacheConfig[] = [
  {
    pattern: '*.avif',
    ttl: 31536000,        // 1 年
    ignoreQuery: false,   // 保留质量参数
    cacheKey: ['path', 'query'],
  },
  {
    pattern: '*.webp',
    ttl: 31536000,
    ignoreQuery: false,
    cacheKey: ['path', 'query'],
  },
  {
    pattern: 'avatars/*',
    ttl: 86400,           // 1 天（经常更新）
    ignoreQuery: true,
    cacheKey: ['path'],
  },
  {
    pattern: 'temp/*',
    ttl: 3600,            // 1 小时
    ignoreQuery: true,
    cacheKey: ['path'],
  },
];

/**
 * 缓存命中率对成本的影响
 */
function calculateCostSavings(
  totalRequests: number,
  currentHitRate: number,
  targetHitRate: number,
  originCostPerGB: number,
  avgFileSizeKB: number
): number {
  const avgFileSizeGB = avgFileSizeKB / 1024 / 1024;
  
  // 当前回源流量
  const currentOriginTraffic = totalRequests * (1 - currentHitRate) * avgFileSizeGB;
  
  // 目标回源流量
  const targetOriginTraffic = totalRequests * (1 - targetHitRate) * avgFileSizeGB;
  
  // 节省的流量
  const savedTraffic = currentOriginTraffic - targetOriginTraffic;
  
  // 节省的成本
  const savedCost = savedTraffic * originCostPerGB;
  
  return savedCost;
}

// 示例：从 80% 提升到 95% 缓存命中率
const savings = calculateCostSavings(
  100000000,  // 1 亿次请求
  0.80,       // 当前命中率 80%
  0.95,       // 目标命中率 95%
  0.50,       // 回源成本 0.5 元/GB
  200         // 平均 200KB
);
// 节省：约 750 元/月

四、平衡策略

4.1 场景化配置

/**
 * 不同业务场景的最佳实践配置
 */
const SCENE_CONFIGS = {
  // 电商商品图：质量优先
  ecommerce: {
    priority: 'quality',
    formats: ['webp', 'avif', 'jpg'],
    qualityTiers: {
      thumbnail: { maxW: 200, q: 75 },
      detail: { maxW: 800, q: 85 },
      zoom: { maxW: 2000, q: 92 },
    },
    cdnTTL: 604800, // 7 天
  },
  
  // 社交应用头像：速度优先
  social: {
    priority: 'speed',
    formats: ['webp', 'jpg'],
    qualityTiers: {
      small: { maxW: 50, q: 70 },
      medium: { maxW: 200, q: 75 },
      large: { maxW: 400, q: 80 },
    },
    cdnTTL: 86400, // 1 天
  },
  
  // 内容平台配图：平衡
  content: {
    priority: 'balance',
    formats: ['avif', 'webp', 'jpg'],
    qualityTiers: {
      thumbnail: { maxW: 300, q: 70 },
      article: { maxW: 1200, q: 80 },
    },
    cdnTTL: 2592000, // 30 天
  },
  
  // 设计素材：质量最高
  design: {
    priority: 'quality',
    formats: ['png', 'jpg', 'original'],
    qualityTiers: {
      preview: { maxW: 800, q: 85 },
      download: { maxW: null, q: 95 },
    },
    cdnTTL: 31536000, // 1 年
  },
};

4.2 动态调整策略

/**
 * 基于网络状况的动态质量调整
 */
class AdaptiveImageQuality {
  private networkInfo: NetworkInformation;
  
  constructor() {
    if ('connection' in navigator) {
      this.networkInfo = (navigator as any).connection;
    }
  }
  
  getOptimalQuality(): number {
    if (!this.networkInfo) {
      return 80; // 默认质量
    }
    
    const { effectiveType, saveData } = this.networkInfo;
    
    // 省电模式：降低质量
    if (saveData) {
      return 60;
    }
    
    // 根据网络类型调整
    switch (effectiveType) {
      case '4g':
        return 80;
      case '3g':
        return 65;
      case '2g':
        return 50;
      case 'slow-2g':
        return 40;
      default:
        return 80;
    }
  }
  
  getImageURL(baseUrl: string, options: ImageOptions): string {
    const quality = this.getOptimalQuality();
    return `${baseUrl}?q=${quality}&w=${options.width}&format=${options.format}`;
  }
}

interface ImageOptions {
  width: number;
  format: string;
}

小结

核心原则：

1. 速度第一：用户不会等待慢加载的图片
2. 质量够用：在可接受范围内最大化压缩
3. 成本可控：根据业务价值合理投入

在下一节中，我们将讨论具体的技术方案和架构设计。