HTML 图片优化：自动转 WebP 与响应式图片生成方案

1.2.3 基于设备像素比的适配

<img src="image-1x.jpg" srcset="image-2x.jpg 2x, image-3x.jpg 3x" alt="适配不同 DPI 设备">

第二章：搭建本地图片优化环境

2.1 环境准备与工具选择

2.1.1 Node.js 环境配置

// package.json 基础配置
{
  "name": "image-optimization-pipeline",
  "version": "1.0.0",
  "description": "本地图片优化处理流程",
  "scripts": {
    "optimize": "node image-optimizer.js",
    "watch": "node image-watcher.js"
  },
  "dependencies": {
    "sharp": "^0.32.0",
    "chokidar": "^3.5.3",
    "imagemin": "^8.0.1",
    "imagemin-webp": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2"
  }
}

2.1.2 安装必要依赖

# 初始化项目
npm init -y
# 安装图片处理库
npm install sharp chokidar
# 安装图片压缩工具
npm install imagemin imagemin-webp imagemin-mozjpeg imagemin-pngquant

2.2 项目目录结构设计

text
image-optimization-project/
├── src/
│   ├── images/ # 原始图片
│   │   ├── products/
│   │   ├── banners/
│   │   └── avatars/
│   └── uploads/ # 用户上传图片
├── dist/
│   ├── optimized/ # 优化后图片
│   │   ├── webp/
│   │   ├── responsive/
│   │   └── thumbnails/
│   └── manifest.json # 图片映射清单
├── scripts/
│   ├── image-optimizer.js # 图片优化主脚本
│   ├── webp-converter.js # WebP 转换器
│   ├── responsive-generator.js # 响应式图片生成器
│   └── watch-handler.js # 文件监听处理器
├── config/
│   └── optimization-config.js # 优化配置
└── index.html # 测试页面

第三章：实现自动 WebP 转换系统

3.1 基于 Sharp 库的高效转换

Sharp 是高性能的图片处理库，特别适合批量处理：

// scripts/webp-converter.js
const sharp = require('sharp');
const fs = require('fs').promises;
const path = require('path');

class WebPConverter {
  constructor(config = {}) {
    this.config = {
      quality: 80,
      lossless: false,
      alphaQuality: 100,
      effort: 6,
      ...config
    };
    this.supportedFormats = ['.jpg', '.jpeg', '.png', '.tiff', '.gif'];
  }

  /**
   * 检查是否为支持的图片格式
   */
  isSupportedFormat(filePath) {
    const ext = path.extname(filePath).toLowerCase();
    return this.supportedFormats.includes(ext);
  }

  /**
   * 单个图片转换为 WebP
   */
  async convertToWebP(inputPath, outputPath, customConfig = {}) {
    try {
      const config = { ...this.config, ...customConfig };
      // 检查输入文件是否存在
      await fs.access(inputPath);
      // 创建输出目录（如果不存在）
      const outputDir = path.dirname(outputPath);
      await fs.mkdir(outputDir, { recursive: true });
      // 使用 Sharp 进行转换
      await sharp(inputPath)
        .webp({
          quality: config.quality,
          lossless: config.lossless,
          alphaQuality: config.alphaQuality,
          effort: config.effort
        })
        .toFile(outputPath);
      console.log(`✓ 转换完成：${path.basename(inputPath)} -> ${path.basename(outputPath)}`);
      // 获取优化前后的文件大小对比
      const originalStats = await fs.stat(inputPath);
      const optimizedStats = await fs.stat(outputPath);
      const savings = ((originalStats.size - optimizedStats.size) / originalStats.size * 100).toFixed(2);
      return {
        originalSize: originalStats.size,
        optimizedSize: optimizedStats.size,
        savingsPercent: savings,
        inputPath,
        outputPath
      };
    } catch (error) {
      console.error(`✗ 转换失败 ${inputPath}:`, error.message);
      throw error;
    }
  }

  /**
   * 批量转换目录中的所有图片
   */
  async convertDirectory(inputDir, outputDir, recursive = true) {
    try {
      const results = [];
      const files = await fs.readdir(inputDir, { withFileTypes: true });
      for (const file of files) {
        const fullPath = path.join(inputDir, file.name);
        if (file.isDirectory() && recursive) {
          // 递归处理子目录
          const subDirResults = await this.convertDirectory(
            fullPath,
            path.join(outputDir, file.name)
          );
          results.push(...subDirResults);
        } else if (file.isFile() && this.isSupportedFormat(fullPath)) {
          // 生成输出路径（更改扩展名为.webp）
          const outputFile = path.join(
            outputDir,
            path.basename(file.name, path.extname(file.name)) + '.webp'
          );
          // 执行转换
          const result = await this.convertToWebP(fullPath, outputFile);
          results.push(result);
        }
      }
      return results;
    } catch (error) {
      console.error(`批量转换失败:`, error.message);
      throw error;
    }
  }

  /**
   * 生成 WebP 图片并创建 HTML 代码片段
   */
  async generatePictureElement(originalImagePath, webpImagePath, altText, className) {
    try {
      // 获取原始图片尺寸
      const metadata = await sharp(originalImagePath).metadata();
      // 构建 picture 元素
      const pictureHtml = `
        <picture>
          <source srcset="${webpImagePath}" type="image/webp">
          <img src="${originalImagePath}" alt="${altText}" ${className ? `class="${className}"` : ''} loading="lazy">
        </picture>`;
      return {
        html: pictureHtml,
        width: metadata.width,
        height: metadata.height,
        format: metadata.format,
        webpPath: webpImagePath,
        originalPath: originalImagePath
      };
    } catch (error) {
      console.error(`生成 HTML 失败:`, error.message);
      throw error;
    }
  }
}

module.exports = WebPConverter;

3.2 智能转换与缓存机制

为了避免重复处理，需要实现智能缓存系统：

// scripts/cache-manager.js
const crypto = require('crypto');
const fs = require('fs').promises;
const path = require('path');

class ImageCacheManager {
  constructor(cacheDir = './.image-cache') {
    this.cacheDir = cacheDir;
    this.cacheManifestPath = path.join(cacheDir, 'manifest.json');
  }

  /**
   * 初始化缓存系统
   */
  async initialize() {
    try {
      await fs.mkdir(this.cacheDir, { recursive: true });
      // 创建或读取缓存清单
      try {
        const manifestData = await fs.readFile(this.cacheManifestPath, 'utf8');
        this.manifest = JSON.parse(manifestData);
      } catch {
        this.manifest = {};
        await this.saveManifest();
      }
      console.log(`缓存系统初始化完成，目录：${this.cacheDir}`);
    } catch (error) {
      console.error('缓存系统初始化失败:', error);
      throw error;
    }
  }

  /**
   * 生成文件哈希（用于检测文件变更）
   */
  async generateFileHash(filePath) {
    try {
      const fileBuffer = await fs.readFile(filePath);
      const hash = crypto.createHash('sha256');
      hash.update(fileBuffer);
      return hash.digest('hex');
    } catch (error) {
      console.error(`生成文件哈希失败：${filePath}`, error);
      return null;
    }
  }

  /**
   * 检查图片是否需要重新处理
   */
  async needsProcessing(originalPath, outputPath, processorType) {
    try {
      // 检查原始文件是否存在
      await fs.access(originalPath);
      // 检查输出文件是否存在
      try {
        await fs.access(outputPath);
      } catch {
        // 输出文件不存在，需要处理
        return true;
      }
      // 获取缓存键
      const cacheKey = this.getCacheKey(originalPath, processorType);
      // 检查是否在缓存中
      if (!this.manifest[cacheKey]) {
        return true;
      }
      // 检查文件哈希是否匹配
      const currentHash = await this.generateFileHash(originalPath);
      if (this.manifest[cacheKey].hash !== currentHash) {
        return true;
      }
      // 检查输出文件修改时间
      const originalStats = await fs.stat(originalPath);
      const outputStats = await fs.stat(outputPath);
      // 如果原始文件比输出文件新，需要重新处理
      if (originalStats.mtime > outputStats.mtime) {
        return true;
      }
      return false;
    } catch (error) {
      console.error(`检查处理需求失败:`, error);
      return true; // 出错时重新处理
    }
  }

  /**
   * 更新缓存记录
   */
  async updateCache(originalPath, outputPath, processorType, metadata = {}) {
    try {
      const cacheKey = this.getCacheKey(originalPath, processorType);
      const fileHash = await this.generateFileHash(originalPath);
      this.manifest[cacheKey] = {
        hash: fileHash,
        originalPath,
        outputPath,
        processorType,
        processedAt: new Date().toISOString(),
        metadata,
        originalSize: (await fs.stat(originalPath)).size,
        optimizedSize: (await fs.stat(outputPath)).size
      };
      await this.saveManifest();
      console.log(`缓存更新：${cacheKey}`);
    } catch (error) {
      console.error(`更新缓存失败:`, error);
    }
  }

  /**
   * 生成缓存键
   */
  getCacheKey(filePath, processorType) {
    const normalizedPath = path.normalize(filePath);
    const key = `${processorType}:${normalizedPath}`;
    return crypto.createHash('md5').update(key).digest('hex');
  }

  /**
   * 保存缓存清单
   */
  async saveManifest() {
    try {
      await fs.writeFile(
        this.cacheManifestPath,
        JSON.stringify(this.manifest, null, 2),
        'utf8'
      );
    } catch (error) {
      console.error('保存缓存清单失败:', error);
    }
  }

  /**
   * 获取缓存统计信息
   */
  getStats() {
    const entries = Object.values(this.manifest);
    if (entries.length === 0) {
      return {
        totalEntries: 0,
        totalOriginalSize: 0,
        totalOptimizedSize: 0,
        totalSavings: 0,
        averageSavings: 0
      };
    }
    const totalOriginalSize = entries.reduce((sum, entry) => sum + (entry.originalSize || 0), 0);
    const totalOptimizedSize = entries.reduce((sum, entry) => sum + (entry.optimizedSize || 0), 0);
    const totalSavings = totalOriginalSize - totalOptimizedSize;
    const averageSavings = totalSavings / entries.length;
    return {
      totalEntries: entries.length,
      totalOriginalSize,
      totalOptimizedSize,
      totalSavings,
      averageSavings,
      savingsPercentage: totalOriginalSize > 0 ? (totalSavings / totalOriginalSize * 100).toFixed(2) : 0
    };
  }
}

module.exports = ImageCacheManager;

第四章：生成响应式图片系统

4.1 多尺寸图片生成器

// scripts/responsive-generator.js
const sharp = require('sharp');
const fs = require('fs').promises;
const path = require('path');

class ResponsiveImageGenerator {
  constructor(config = {}) {
    // 默认的响应式断点配置
    this.defaultBreakpoints = [
      { width: 320, suffix: '-xs' }, // 手机小尺寸
      { width: 480, suffix: '-sm' }, // 手机大尺寸
      { width: 768, suffix: '-md' }, // 平板
      { width: 1024, suffix: '-lg' }, // 笔记本
      { width: 1280, suffix: '-xl' }, // 桌面
      { width: 1920, suffix: '-xxl' } // 大桌面
    ];
    this.config = {
      breakpoints: this.defaultBreakpoints,
      outputFormats: ['webp', 'jpg'],
      jpegQuality: 75,
      webpQuality: 80,
      pngCompression: 9,
      enableAvif: false, // AVIF 格式（更高效但处理慢）
      avifQuality: 60,
      ...config
    };
  }

  /**
   * 根据原始图片生成所有响应式版本
   */
  async generateResponsiveVersions(inputPath, outputDir, customConfig = {}) {
    try {
      const config = { ...this.config, ...customConfig };
      const results = [];
      // 读取原始图片信息
      const originalImage = sharp(inputPath);
      const metadata = await originalImage.metadata();
      // 获取文件名（不含扩展名）
      const fileName = path.basename(inputPath, path.extname(inputPath));
      // 为每个断点生成图片
      for (const breakpoint of config.breakpoints) {
        // 如果断点宽度大于原始图片宽度，则跳过
        if (breakpoint.width > metadata.width) {
          console.log(`跳过断点 ${breakpoint.width}px，原始图片宽度仅为 ${metadata.width}px`);
          continue;
        }
        // 计算等比例的高度
        const height = Math.round((breakpoint.width / metadata.width) * metadata.height);
        // 为每种输出格式生成图片
        for (const format of config.outputFormats) {
          const outputFileName = `${fileName}${breakpoint.suffix}.${format}`;
          const outputPath = path.join(outputDir, outputFileName);
          // 创建输出目录
          await fs.mkdir(path.dirname(outputPath), { recursive: true });
          // 调整图片尺寸并转换格式
          const imageProcessor = originalImage.clone().resize({
            width: breakpoint.width,
            height: height,
            fit: 'cover', // 或 'contain', 'fill', 'inside', 'outside'
            position: 'center' // 裁剪位置
          });
          // 根据格式应用不同设置
          switch (format.toLowerCase()) {
            case 'webp':
              await imageProcessor
                .webp({ quality: config.webpQuality })
                .toFile(outputPath);
              break;
            case 'jpg':
            case 'jpeg':
              await imageProcessor
                .jpeg({ quality: config.jpegQuality, mozjpeg: true })
                .toFile(outputPath);
              break;
            case 'png':
              await imageProcessor
                .png({ compressionLevel: config.pngCompression })
                .toFile(outputPath);
              break;
            case 'avif':
              if (config.enableAvif) {
                await imageProcessor
                  .avif({ quality: config.avifQuality })
                  .toFile(outputPath);
              }
              break;
          }
          // 收集结果信息
          const stats = await fs.stat(outputPath);
          results.push({
            breakpoint: breakpoint.width,
            suffix: breakpoint.suffix,
            format,
            path: outputPath,
            width: breakpoint.width,
            height: height,
            size: stats.size,
            fileName: outputFileName
          });
          console.log(`生成：${outputFileName} (${breakpoint.width}x${height})`);
        }
      }
      // 生成缩略图（可选）
      if (config.generateThumbnail) {
        await this.generateThumbnail(inputPath, outputDir, fileName);
      }
      return {
        original: {
          path: inputPath,
          width: metadata.width,
          height: metadata.height,
          format: metadata.format,
          size: (await fs.stat(inputPath)).size
        },
        versions: results,
        totalVersions: results.length
      };
    } catch (error) {
      console.error(`生成响应式图片失败:`, error);
      throw error;
    }
  }

  /**
   * 生成图片缩略图
   */
  async generateThumbnail(inputPath, outputDir, baseName, size = 150) {
    try {
      const outputPath = path.join(outputDir, `${baseName}-thumbnail.jpg`);
      await sharp(inputPath)
        .resize(size, size, { fit: 'cover', position: 'center' })
        .jpeg({ quality: 70 })
        .toFile(outputPath);
      const stats = await fs.stat(outputPath);
      return {
        path: outputPath,
        size: stats.size,
        dimensions: `${size}x${size}`
      };
    } catch (error) {
      console.error(`生成缩略图失败:`, error);
      return null;
    }
  }

  /**
   * 自动生成 srcset 属性字符串
   */
  generateSrcset(versions, format = 'webp') {
    // 过滤指定格式的版本
    const filteredVersions = versions.filter(v => v.format === format);
    // 按宽度排序
    filteredVersions.sort((a, b) => a.width - b.width);
    // 生成 srcset 字符串
    return filteredVersions
      .map(v => `${v.path} ${v.width}w`)
      .join(', ');
  }

  /**
   * 生成完整的 picture 元素 HTML
   */
  generatePictureElement(baseName, versions, altText, className, sizes = '100vw') {
    // 按格式分组
    const webpVersions = versions.filter(v => v.format === 'webp');
    const jpegVersions = versions.filter(v => v.format === 'jpg' || v.format === 'jpeg');
    // 生成 srcset
    const webpSrcset = this.generateSrcset(webpVersions, 'webp');
    const jpegSrcset = this.generateSrcset(jpegVersions, 'jpg');
    // 获取默认图片（通常使用中间尺寸）
    const defaultVersion = jpegVersions.find(v => v.width === 768) || jpegVersions[jpegVersions.length - 1] || versions[0];
    // 构建 picture 元素
    const pictureHtml = `
      <picture>
        ${webpSrcset ? `<source srcset="${webpSrcset}" sizes="${sizes}" type="image/webp">` : ''}
        ${jpegSrcset ? `<source srcset="${jpegSrcset}" sizes="${sizes}" type="image/jpeg">` : ''}
        <img src="${defaultVersion?.path || ''}" alt="${altText}" ${className ? `class="${className}"` : ''} ${defaultVersion ? `width="${defaultVersion.width}"` : ''} loading="lazy" decoding="async">
      </picture>`;
    return {
      html: pictureHtml.trim(),
      webpSrcset,
      jpegSrcset,
      defaultSrc: defaultVersion?.path,
      defaultWidth: defaultVersion?.width,
      defaultHeight: defaultVersion?.height
    };
  }

  /**
   * 批量处理目录中的所有图片
   */
  async processDirectory(inputDir, outputBaseDir, recursive = true) {
    try {
      const results = [];
      const files = await fs.readdir(inputDir, { withFileTypes: true });
      for (const file of files) {
        const fullPath = path.join(inputDir, file.name);
        if (file.isDirectory() && recursive) {
          // 递归处理子目录
          const subDirResults = await this.processDirectory(
            fullPath,
            path.join(outputBaseDir, file.name)
          );
          results.push(...subDirResults);
        } else if (file.isFile() && this.isImageFile(fullPath)) {
          // 为每个图片创建专用输出目录
          const fileName = path.basename(fullPath, path.extname(fullPath));
          const imageOutputDir = path.join(outputBaseDir, fileName);
          // 生成响应式版本
          const result = await this.generateResponsiveVersions(fullPath, imageOutputDir);
          results.push({
            original: fullPath,
            outputDir: imageOutputDir,
            ...result
          });
        }
      }
      return results;
    } catch (error) {
      console.error(`批量处理失败:`, error);
      throw error;
    }
  }

  /**
   * 检查是否为图片文件
   */
  isImageFile(filePath) {
    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.webp', '.avif'];
    const ext = path.extname(filePath).toLowerCase();
    return imageExtensions.includes(ext);
  }
}

module.exports = ResponsiveImageGenerator;

4.2 智能图片尺寸选择算法

// scripts/image-sizer.js
class ImageSizer {
  /**
   * 根据设备特征计算最佳图片尺寸
   */
  static calculateOptimalSize(viewportWidth, devicePixelRatio, maxImageWidth) {
    // 基本计算：视口宽度 × 设备像素比
    let optimalWidth = Math.min(
      viewportWidth * devicePixelRatio,
      maxImageWidth
    );
    // 确保宽度为偶数（某些编码器要求）
    optimalWidth = Math.round(optimalWidth / 2) * 2;
    return {
      width: optimalWidth,
      height: null, // 高度由宽度和宽高比决定
      dpr: devicePixelRatio,
      viewport: viewportWidth
    };
  }

  /**
   * 生成自适应 sizes 属性
   */
  static generateSizesAttribute(breakpoints) {
    if (!breakpoints || breakpoints.length === 0) {
      return '100vw';
    }
    // 按断点排序
    const sortedBreakpoints = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);
    const sizeConditions = [];
    // 生成每个断点的条件
    for (let i = 0; i < sortedBreakpoints.length; i++) {
      const breakpoint = sortedBreakpoints[i];
      const nextBreakpoint = sortedBreakpoints[i + 1];
      let condition;
      if (i === 0) {
        // 第一个断点：最大宽度条件
        condition = `(max-width: ${breakpoint.maxWidth}px)`;
      } else if (nextBreakpoint) {
        // 中间断点：范围条件
        condition = `(min-width: ${sortedBreakpoints[i - 1].maxWidth + 1}px) and (max-width: ${breakpoint.maxWidth}px)`;
      } else {
        // 最后一个断点：最小宽度条件
        condition = `(min-width: ${sortedBreakpoints[i - 1].maxWidth + 1}px)`;
      }
      sizeConditions.push(`${condition} ${breakpoint.imageWidth}px`);
    }
    // 添加默认值（最大断点之后）
    const lastBreakpoint = sortedBreakpoints[sortedBreakpoints.length - 1];
    if (lastBreakpoint) {
      sizeConditions.push(`${lastBreakpoint.imageWidth}px`);
    }
    return sizeConditions.join(', ');
  }

  /**
   * 根据网络条件调整图片质量
   */
  static adjustQualityForNetwork(originalQuality, networkType) {
    const qualityMap = {
      'slow-2g': Math.max(originalQuality * 0.5, 30),
      '2g': Math.max(originalQuality * 0.6, 40),
      '3g': Math.max(originalQuality * 0.8, 60),
      '4g': originalQuality,
      'wifi': Math.min(originalQuality * 1.1, 95),
      'ethernet': Math.min(originalQuality * 1.2, 100)
    };
    return Math.round(qualityMap[networkType] || originalQuality);
  }
}

第五章：构建完整的图片处理管道

5.1 主处理脚本

// scripts/image-optimizer.js
const path = require('path');
const fs = require('fs').promises;
const WebPConverter = require('./webp-converter');
const ResponsiveImageGenerator = require('./responsive-generator');
const ImageCacheManager = require('./cache-manager');
const ImageSizer = require('./image-sizer');

class ImageOptimizationPipeline {
  constructor(config = {}) {
    this.config = {
      sourceDir: './src/images',
      outputDir: './dist/optimized',
      webpConfig: {
        quality: 80,
        lossless: false
      },
      responsiveConfig: {
        breakpoints: [
          { width: 320, suffix: '-xs' },
          { width: 640, suffix: '-sm' },
          { width: 768, suffix: '-md' },
          { width: 1024, suffix: '-lg' },
          { width: 1280, suffix: '-xl' },
          { width: 1920, suffix: '-xxl' }
        ],
        outputFormats: ['webp', 'jpg'],
        jpegQuality: 75,
        webpQuality: 80
      },
      enableCache: true,
      generateManifest: true,
      ...config
    };
    // 初始化组件
    this.webpConverter = new WebPConverter(this.config.webpConfig);
    this.responsiveGenerator = new ResponsiveImageGenerator(this.config.responsiveConfig);
    this.cacheManager = new ImageCacheManager();
    // 结果存储
    this.results = {
      processed: [],
      skipped: [],
      failed: [],
      stats: {}
    };
  }

  /**
   * 初始化管道
   */
  async initialize() {
    console.log('🔄 初始化图片优化管道...');
    // 创建输出目录
    await fs.mkdir(this.config.outputDir, { recursive: true });
    // 初始化缓存系统
    if (this.config.enableCache) {
      await this.cacheManager.initialize();
    }
    console.log('✅ 管道初始化完成');
  }

  /**
   * 处理单个图片文件
   */
  async processImage(filePath, options = {}) {
    try {
      console.log(`\n📷 处理图片：${path.basename(filePath)}`);
      // 检查文件是否存在
      await fs.access(filePath);
      // 生成输出目录结构
      const relativePath = path.relative(this.config.sourceDir, filePath);
      const outputBaseDir = path.join(
        this.config.outputDir,
        path.dirname(relativePath)
      );
      const fileName = path.basename(filePath, path.extname(filePath));
      // 1. 生成响应式图片
      const responsiveDir = path.join(outputBaseDir, fileName, 'responsive');
      const responsiveResult = await this.responsiveGenerator.generateResponsiveVersions(
        filePath,
        responsiveDir,
        options.responsiveConfig
      );
      // 2. 为每个响应式版本生成 WebP 版本
      const webpResults = [];
      for (const version of responsiveResult.versions) {
        if (version.format === 'jpg' || version.format === 'png') {
          const webpPath = version.path.replace(`.${version.format}`, '.webp');
          const webpResult = await this.webpConverter.convertToWebP(
            version.path,
            webpPath,
            options.webpConfig
          );
          webpResults.push(webpResult);
        }
      }
      // 3. 生成 HTML 代码片段
      const htmlResult = this.responsiveGenerator.generatePictureElement(
        fileName,
        responsiveResult.versions.concat(
          webpResults.map(r => ({
            path: r.outputPath,
            format: 'webp',
            width: responsiveResult.versions.find(v => v.path === r.inputPath)?.width || 0,
            height: responsiveResult.versions.find(v => v.path === r.inputPath)?.height || 0
          }))
        ),
        options.altText || '',
        options.className || '',
        options.sizes || '100vw'
      );
      // 4. 更新缓存
      if (this.config.enableCache) {
        await this.cacheManager.updateCache(
          filePath,
          responsiveDir,
          'responsive',
          {
            versions: responsiveResult.versions.length,
            formats: [...new Set(responsiveResult.versions.map(v => v.format))]
          }
        );
      }
      // 收集结果
      const result = {
        original: responsiveResult.original,
        responsive: responsiveResult,
        webp: webpResults,
        html: htmlResult,
        outputDir: responsiveDir,
        timestamp: new Date().toISOString()
      };
      this.results.processed.push(result);
      console.log(`✅ 完成处理：${fileName}`);
      console.log(` 生成 ${responsiveResult.versions.length} 个响应式版本`);
      console.log(` 生成 ${webpResults.length} 个 WebP 版本`);
      return result;
    } catch (error) {
      console.error(`❌ 处理失败：${filePath}`, error.message);
      this.results.failed.push({
        filePath,
        error: error.message,
        timestamp: new Date().toISOString()
      });
      throw error;
    }
  }

  /**
   * 批量处理目录
   */
  async processDirectory(directoryPath = null, options = {}) {
    const startTime = Date.now();
    const dir = directoryPath || this.config.sourceDir;
    console.log(`\n🚀 开始批量处理目录：${dir}`);
    try {
      const files = await this.scanDirectory(dir);
      const imageFiles = files.filter(file => this.isImageFile(file));
      console.log(`📊 发现 ${imageFiles.length} 个图片文件`);
      // 并行处理（限制并发数）
      const concurrency = options.concurrency || 4;
      const batches = [];
      for (let i = 0; i < imageFiles.length; i += concurrency) {
        const batch = imageFiles.slice(i, i + concurrency);
        batches.push(batch);
      }
      for (let i = 0; i < batches.length; i++) {
        console.log(`\n🔧 处理批次 ${i + 1}/${batches.length}`);
        const batchPromises = batches[i].map(file =>
          this.processImage(file, options).catch(error => ({
            file,
            error: error.message,
            success: false
          }))
        );
        const batchResults = await Promise.all(batchPromises);
        // 进度报告
        const processedCount = Math.min((i + 1) * concurrency, imageFiles.length);
        console.log(` 进度：${processedCount}/${imageFiles.length} (${Math.round(processedCount / imageFiles.length * 100)}%)`);
      }
      // 生成统计信息
      await this.generateStatistics();
      // 生成清单文件
      if (this.config.generateManifest) {
        await this.generateManifest();
      }
      const endTime = Date.now();
      const duration = ((endTime - startTime) / 1000).toFixed(2);
      console.log(`\n🎉 批量处理完成！`);
      console.log(` 总用时：${duration}秒`);
      console.log(` 成功：${this.results.processed.length}`);
      console.log(` 失败：${this.results.failed.length}`);
      console.log(` 跳过：${this.results.skipped.length}`);
      return this.results;
    } catch (error) {
      console.error(`❌ 批量处理失败:`, error);
      throw error;
    }
  }

  /**
   * 扫描目录中的文件
   */
  async scanDirectory(dir, fileList = []) {
    try {
      const files = await fs.readdir(dir, { withFileTypes: true });
      for (const file of files) {
        const fullPath = path.join(dir, file.name);
        if (file.isDirectory()) {
          await this.scanDirectory(fullPath, fileList);
        } else {
          fileList.push(fullPath);
        }
      }
      return fileList;
    } catch (error) {
      console.error(`扫描目录失败：${dir}`, error);
      return fileList;
    }
  }

  /**
   * 检查是否为图片文件
   */
  isImageFile(filePath) {
    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.webp'];
    const ext = path.extname(filePath).toLowerCase();
    return imageExtensions.includes(ext);
  }

  /**
   * 生成统计信息
   */
  async generateStatistics() {
    const stats = {
      totalProcessed: this.results.processed.length,
      totalFailed: this.results.failed.length,
      totalSkipped: this.results.skipped.length,
      formatBreakdown: {},
      sizeSavings: {
        originalTotal: 0,
        optimizedTotal: 0,
        savedTotal: 0,
        savedPercentage: 0
      }
    };
    // 计算格式分布
    for (const result of this.results.processed) {
      for (const version of result.responsive.versions) {
        const format = version.format;
        stats.formatBreakdown[format] = (stats.formatBreakdown[format] || 0) + 1;
      }
      // 累计大小
      stats.sizeSavings.originalTotal += result.responsive.original.size;
      for (const version of result.responsive.versions) {
        stats.sizeSavings.optimizedTotal += version.size;
      }
    }
    // 计算节省
    stats.sizeSavings.savedTotal = stats.sizeSavings.originalTotal - stats.sizeSavings.optimizedTotal;
    stats.sizeSavings.savedPercentage = stats.sizeSavings.originalTotal > 0
      ? (stats.sizeSavings.savedTotal / stats.sizeSavings.originalTotal * 100).toFixed(2)
      : 0;
    // 缓存统计
    if (this.config.enableCache) {
      stats.cache = this.cacheManager.getStats();
    }
    this.results.stats = stats;
    // 保存统计文件
    const statsPath = path.join(this.config.outputDir, 'statistics.json');
    await fs.writeFile(statsPath, JSON.stringify(stats, null, 2));
    console.log(`\n📊 统计信息已保存到：${statsPath}`);
    return stats;
  }

  /**
   * 生成图片清单
   */
  async generateManifest() {
    const manifest = {
      generatedAt: new Date().toISOString(),
      totalImages: this.results.processed.length,
      images: []
    };
    for (const result of this.results.processed) {
      const imageEntry = {
        original: result.original,
        responsiveVersions: result.responsive.versions.length,
        formats: [...new Set(result.responsive.versions.map(v => v.format))],
        outputDir: result.outputDir,
        htmlSnippet: result.html.html,
        sizes: result.responsive.versions.map(v => ({
          width: v.width,
          height: v.height,
          format: v.format,
          path: v.path
        }))
      };
      manifest.images.push(imageEntry);
    }
    const manifestPath = path.join(this.config.outputDir, 'manifest.json');
    await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
    console.log(`📋 清单文件已保存到：${manifestPath}`);
    return manifest;
  }

  /**
   * 清理输出目录
   */
  async cleanOutput() {
    try {
      console.log('🧹 清理输出目录...');
      // 检查目录是否存在
      try {
        await fs.access(this.config.outputDir);
      } catch {
        console.log('输出目录不存在，无需清理');
        return;
      }
      // 读取目录内容
      const items = await fs.readdir(this.config.outputDir, { withFileTypes: true });
      for (const item of items) {
        const fullPath = path.join(this.config.outputDir, item.name);
        if (item.isDirectory()) {
          await fs.rm(fullPath, { recursive: true, force: true });
          console.log(` 删除目录：${item.name}`);
        } else if (item.isFile()) {
          await fs.unlink(fullPath);
          console.log(` 删除文件：${item.name}`);
        }
      }
      console.log('✅ 输出目录清理完成');
    } catch (error) {
      console.error('❌ 清理输出目录失败:', error);
      throw error;
    }
  }
}

module.exports = ImageOptimizationPipeline;

5.2 配置文件

// config/optimization-config.js
module.exports = {
  // 源目录和输出目录配置
  directories: {
    source: './src/images',
    output: './dist/optimized',
    cache: './.image-cache'
  },
  // WebP 转换配置
  webp: {
    quality: 80,
    lossless: false,
    alphaQuality: 100,
    effort: 6,
    metadata: 'all' // 保留元数据
  },
  // 响应式图片配置
  responsive: {
    // 断点配置
    breakpoints: [
      { width: 320, suffix: '-xs', quality: 70 }, // 手机小尺寸
      { width: 480, suffix: '-sm', quality: 75 }, // 手机大尺寸
      { width: 768, suffix: '-md', quality: 80 }, // 平板
      { width: 1024, suffix: '-lg', quality: 85 }, // 笔记本
      { width: 1280, suffix: '-xl', quality: 90 }, // 桌面
      { width: 1920, suffix: '-xxl', quality: 95 } // 大桌面
    ],
    // 输出格式
    formats: [
      { name: 'webp', quality: 80, enabled: true },
      { name: 'jpg', quality: 75, enabled: true },
      { name: 'avif', quality: 60, enabled: false // AVIF 处理较慢，可选启用
      }
    ],
    // 缩略图配置
    thumbnails: {
      enabled: true,
      sizes: [100, 200, 300],
      suffix: '-thumb'
    }
  },
  // 压缩配置
  compression: {
    jpeg: {
      mozjpeg: true,
      trellisQuantisation: true,
      overshootDeringing: true,
      optimiseScans: true
    },
    png: {
      compressionLevel: 9,
      adaptiveFiltering: true
    }
  },
  // 性能配置
  performance: {
    concurrency: 4, // 并行处理数
    timeout: 30000, // 单个图片处理超时时间（毫秒）
    memoryLimit: '2GB' // 内存限制
  },
  // 功能开关
  features: {
    enableCache: true,
    generateManifest: true,
    generateHtmlSnippets: true,
    watchMode: false,
    cleanupOriginal: false // 处理后删除原始文件（慎用）
  },
  // 文件命名规则
  naming: {
    suffixFormat: '{name}-{width}w-{dpr}x.{ext}',
    directoryStructure: '{category}/{imageName}/',
    preserveOriginalName: true
  }
};

第六章：集成与部署方案

6.1 与构建工具集成

6.1.1 Webpack 配置示例

// webpack.config.js
const ImageOptimizationPipeline = require('./scripts/image-optimizer');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(jpg|jpeg|png|gif|webp)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'images/'
            }
          },
          {
            loader: './loaders/image-optimization-loader.js'
          }
        ]
      }
    ]
  },
  plugins: [
    // 自定义图片优化插件
    new (class ImageOptimizationPlugin {
      apply(compiler) {
        compiler.hooks.beforeRun.tapPromise('ImageOptimizationPlugin', async () => {
          const pipeline = new ImageOptimizationPipeline();
          await pipeline.initialize();
          await pipeline.processDirectory();
        });
      }
    })()
  ]
};

6.1.2 Gulp 任务配置

// gulpfile.js
const gulp = require('gulp');
const ImageOptimizationPipeline = require('./scripts/image-optimizer');

gulp.task('optimize-images', async function () {
  const pipeline = new ImageOptimizationPipeline({
    sourceDir: './src/images',
    outputDir: './dist/images'
  });
  await pipeline.initialize();
  await pipeline.processDirectory();
});

gulp.task('watch-images', function () {
  const watcher = gulp.watch('./src/images/**/*', gulp.series('optimize-images'));
  watcher.on('change', function (path) {
    console.log(`图片已修改：${path}`);
  });
});

gulp.task('default', gulp.series('optimize-images', 'watch-images'));

6.2 服务器端自动化

6.2.1 Express 中间件

// middleware/image-optimizer.js
const express = require('express');
const multer = require('multer');
const ImageOptimizationPipeline = require('../scripts/image-optimizer');
const path = require('path');

function createImageOptimizationMiddleware(config = {}) {
  const router = express.Router();
  const upload = multer({ dest: 'uploads/' });
  // 初始化管道
  const pipeline = new ImageOptimizationPipeline(config);

  // 上传并优化单个图片
  router.post('/upload', upload.single('image'), async (req, res) => {
    try {
      if (!req.file) {
        return res.status(400).json({ error: '未提供图片文件' });
      }
      const filePath = req.file.path;
      const result = await pipeline.processImage(filePath, {
        altText: req.body.alt || '',
        className: req.body.class || ''
      });
      res.json({
        success: true,
        data: {
          original: result.original,
          optimized: result.responsive.versions,
          html: result.html.html,
          downloadUrl: `/download/${path.basename(result.outputDir)}`
        }
      });
    } catch (error) {
      console.error('图片上传处理失败:', error);
      res.status(500).json({ error: '图片处理失败', details: error.message });
    }
  });

  // 批量上传
  router.post('/upload/batch', upload.array('images', 10), async (req, res) => {
    try {
      const results = [];
      for (const file of req.files) {
        try {
          const result = await pipeline.processImage(file.path, {
            altText: req.body.alt || '',
            className: req.body.class || ''
          });
          results.push({ fileName: file.originalname, success: true, result });
        } catch (error) {
          results.push({ fileName: file.originalname, success: false, error: error.message });
        }
      }
      res.json({
        success: true,
        total: req.files.length,
        processed: results.filter(r => r.success).length,
        failed: results.filter(r => !r.success).length,
        results
      });
    } catch (error) {
      console.error('批量上传处理失败:', error);
      res.status(500).json({ error: '批量处理失败', details: error.message });
    }
  });

  // 获取图片清单
  router.get('/manifest', async (req, res) => {
    try {
      const manifestPath = path.join(config.outputDir || './dist/optimized', 'manifest.json');
      const fs = require('fs').promises;
      const manifestData = await fs.readFile(manifestPath, 'utf8');
      const manifest = JSON.parse(manifestData);
      res.json(manifest);
    } catch (error) {
      res.status(404).json({ error: '清单不存在' });
    }
  });

  return router;
}

module.exports = createImageOptimizationMiddleware;

6.2.2 在 Express 应用中使用

// server.js
const express = require('express');
const imageOptimizer = require('./middleware/image-optimizer');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 配置中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 图片优化 API
app.use('/api/images', imageOptimizer({
  sourceDir: './uploads',
  outputDir: './public/optimized-images',
  generateManifest: true
}));

// 静态文件服务
app.use('/images', express.static(path.join(__dirname, 'public/optimized-images')));

// 前端页面
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`🚀 服务器运行在 http://localhost:${PORT}`);
  console.log(`📷 图片优化 API: http://localhost:${PORT}/api/images`);
});

6.3 命令行界面

// scripts/cli.js
#!/usr/bin/env node
const { program } = require('commander');
const ImageOptimizationPipeline = require('./image-optimizer');
const path = require('path');
const fs = require('fs').promises;

program
  .name('image-optimizer')
  .description('命令行图片优化工具')
  .version('1.0.0');

// 优化单个图片
program
  .command('optimize <image-path>')
  .description('优化单个图片')
  .option('-o, --output <dir>', '输出目录')
  .option('-q, --quality <number>', '图片质量 (1-100)', '80')
  .option('--webp', '生成 WebP 格式')
  .option('--responsive', '生成响应式版本')
  .action(async (imagePath, options) => {
    try {
      console.log(`🔄 开始优化：${imagePath}`);
      const pipeline = new ImageOptimizationPipeline({
        sourceDir: path.dirname(imagePath),
        outputDir: options.output || './optimized'
      });
      await pipeline.initialize();
      const result = await pipeline.processImage(imagePath, {
        responsiveConfig: {
          breakpoints: options.responsive ? undefined : [{ width: 1920 }]
        },
        webpConfig: {
          quality: parseInt(options.quality)
        }
      });
      console.log('✅ 优化完成！');
      console.log(` 输出目录：${result.outputDir}`);
      console.log(` HTML 代码：${result.html.html.substring(0, 100)}...`);
    } catch (error) {
      console.error('❌ 优化失败:', error.message);
      process.exit(1);
    }
  });

// 批量处理目录
program
  .command('batch <directory>')
  .description('批量处理目录中的图片')
  .option('-o, --output <dir>', '输出目录', './optimized')
  .option('-c, --concurrency <number>', '并行处理数', '4')
  .option('--clean', '清理输出目录')
  .action(async (directory, options) => {
    try {
      console.log(`📁 处理目录：${directory}`);
      const pipeline = new ImageOptimizationPipeline({
        sourceDir: directory,
        outputDir: options.output
      });
      await pipeline.initialize();
      if (options.clean) {
        await pipeline.cleanOutput();
      }
      const results = await pipeline.processDirectory(null, {
        concurrency: parseInt(options.concurrency)
      });
      console.log(`\n📊 统计信息:`);
      console.log(` 总共处理：${results.stats.totalProcessed} 张图片`);
      console.log(` 大小节省：${results.stats.sizeSavings.savedPercentage}%`);
      console.log(` 详细报告：${path.join(options.output, 'statistics.json')}`);
    } catch (error) {
      console.error('❌ 批量处理失败:', error.message);
      process.exit(1);
    }
  });

// 监听模式
program
  .command('watch <directory>')
  .description('监听目录变化并自动处理')
  .option('-o, --output <dir>', '输出目录', './optimized')
  .action(async (directory, options) => {
    console.log(`👀 开始监听目录：${directory}`);
    const chokidar = require('chokidar');
    const pipeline = new ImageOptimizationPipeline({
      sourceDir: directory,
      outputDir: options.output
    });
    await pipeline.initialize();
    const watcher = chokidar.watch(directory, {
      ignored: /(^|[\/\\])\../, // 忽略隐藏文件
      persistent: true,
      ignoreInitial: true,
      awaitWriteFinish: {
        stabilityThreshold: 1000,
        pollInterval: 100
      }
    });
    watcher
      .on('add', async filePath => {
        if (pipeline.isImageFile(filePath)) {
          console.log(`📸 检测到新图片：${path.basename(filePath)}`);
          await pipeline.processImage(filePath).catch(console.error);
        }
      })
      .on('change', async filePath => {
        if (pipeline.isImageFile(filePath)) {
          console.log(`✏️ 图片已修改：${path.basename(filePath)}`);
          await pipeline.processImage(filePath).catch(console.error);
        }
      })
      .on('error', error => {
        console.error('监听错误:', error);
      });
    console.log('✅ 监听器已启动，按 Ctrl+C 停止');
    // 优雅关闭
    process.on('SIGINT', async () => {
      console.log('\n🛑 停止监听...');
      await watcher.close();
      process.exit(0);
    });
  });

// 查看统计信息
program
  .command('stats')
  .description('查看优化统计信息')
  .option('-d, --dir <directory>', '优化目录', './optimized')
  .action(async (options) => {
    try {
      const statsPath = path.join(options.dir, 'statistics.json');
      const statsData = await fs.readFile(statsPath, 'utf8');
      const stats = JSON.parse(statsData);
      console.log('📊 图片优化统计信息');
      console.log('====================');
      console.log(`总共处理：${stats.totalProcessed} 张图片`);
      console.log(`失败：${stats.totalFailed} 张`);
      console.log(`跳过：${stats.totalSkipped} 张`);
      console.log(`\n格式分布:`);
      for (const [format, count] of Object.entries(stats.formatBreakdown)) {
        console.log(` ${format}: ${count} 个`);
      }
      console.log(`\n大小节省:`);
      console.log(` 原始总大小：${(stats.sizeSavings.originalTotal / 1024 / 1024).toFixed(2)} MB`);
      console.log(` 优化总大小：${(stats.sizeSavings.optimizedTotal / 1024 / 1024).toFixed(2)} MB`);
      console.log(` 节省：${(stats.sizeSavings.savedTotal / 1024 / 1024).toFixed(2)} MB (${stats.sizeSavings.savedPercentage}%)`);
      if (stats.cache) {
        console.log(`\n缓存信息:`);
        console.log(` 缓存项目：${stats.cache.totalEntries}`);
        console.log(` 平均节省：${(stats.cache.averageSavings / 1024).toFixed(2)} KB/图片`);
      }
    } catch (error) {
      console.error('❌ 读取统计信息失败:', error.message);
      process.exit(1);
    }
  });

program.parse(process.argv);

第七章：高级优化技巧与最佳实践

7.1 懒加载与渐进式加载

// scripts/lazy-load.js
class LazyImageLoader {
  constructor(options = {}) {
    this.options = {
      rootMargin: '50px 0px',
      threshold: 0.01,
      enableBlurHash: true,
      placeholderColor: '#f0f0f0',
      ...options
    };
    this.observer = null;
    this.init();
  }

  init() {
    // 检查 Intersection Observer 支持
    if ('IntersectionObserver' in window) {
      this.observer = new IntersectionObserver(
        this.handleIntersection.bind(this),
        this.options
      );
    } else {
      // 降级方案：立即加载所有图片
      this.loadAllImages();
    }
  }

  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        this.loadImage(img);
        this.observer.unobserve(img);
      }
    });
  }

  loadImage(imgElement) {
    // 获取 data-src 或 data-srcset
    const src = imgElement.dataset.src;
    const srcset = imgElement.dataset.srcset;
    if (src) {
      imgElement.src = src;
    }
    if (srcset) {
      imgElement.srcset = srcset;
    }
    // 移除懒加载标记
    imgElement.classList.remove('lazy-load');
    imgElement.classList.add('loaded');
    // 图片加载完成后的回调
    imgElement.onload = () => {
      this.handleImageLoad(imgElement);
    };
  }

  handleImageLoad(imgElement) {
    // 添加淡入效果
    imgElement.style.opacity = '0';
    imgElement.style.transition = 'opacity 0.3s ease';
    requestAnimationFrame(() => {
      imgElement.style.opacity = '1';
    });
    // 移除占位符
    const placeholder = imgElement.parentElement.querySelector('.placeholder');
    if (placeholder) {
      placeholder.style.opacity = '0';
      setTimeout(() => placeholder.remove(), 300);
    }
  }

  loadAllImages() {
    const lazyImages = document.querySelectorAll('[data-src], [data-srcset]');
    lazyImages.forEach(img => this.loadImage(img));
  }

  observe(element) {
    if (this.observer && element) {
      this.observer.observe(element);
    }
  }

  observeAll(selector = '.lazy-load') {
    if (this.observer) {
      const elements = document.querySelectorAll(selector);
      elements.forEach(element => this.observer.observe(element));
    }
  }

  destroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }
}

// 生成模糊占位符
function generateBlurHashPlaceholder(width, height, hash) {
  if (!hash) return null;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  // 简单的模糊效果实现
  const ctx = canvas.getContext('2d');
  // ... 实际实现需要 blurhash 解码库
  return canvas.toDataURL();
}

7.2 图片 CDN 与缓存策略

// scripts/cdn-optimizer.js
class CDNOptimizer {
  constructor(config = {}) {
    this.config = {
      cdnBaseUrl: 'https://cdn.example.com',
      cacheDuration: 31536000, // 1 年
      enableAutoFormat: true,
      enableAutoQuality: true,
      enableAutoResize: true,
      ...config
    };
  }

  /**
   * 生成 CDN 优化 URL
   */
  generateOptimizedUrl(originalUrl, options = {}) {
    const url = new URL(originalUrl, this.config.cdnBaseUrl);
    const params = url.searchParams;
    // 格式转换
    if (options.format) {
      params.set('format', options.format);
    } else if (this.config.enableAutoFormat) {
      params.set('format', 'auto'); // CDN 自动选择最佳格式
    }
    // 质量设置
    if (options.quality) {
      params.set('quality', options.quality);
    } else if (this.config.enableAutoQuality) {
      params.set('quality', 'auto'); // CDN 根据网络自动调整
    }
    // 尺寸调整
    if (options.width || options.height) {
      params.set('fit', options.fit || 'cover');
      if (options.width) {
        params.set('width', Math.round(options.width));
      }
      if (options.height) {
        params.set('height', Math.round(options.height));
      }
    }
    // 裁剪
    if (options.crop) {
      params.set('crop', options.crop);
    }
    // 启用渐进式加载（JPEG）
    if (options.progressive !== false) {
      params.set('progressive', 'true');
    }
    // 启用智能裁剪（人脸/兴趣点检测）
    if (options.smartCrop) {
      params.set('smart', 'true');
    }
    // 添加缓存控制
    params.set('cache', this.config.cacheDuration);
    return url.toString();
  }

  /**
   * 生成响应式 CDN 图片标记
   */
  generateResponsiveCDNImage(originalUrl, alt, options = {}) {
    const {
      sizes = [320, 640, 768, 1024, 1280, 1920],
      formats = ['webp', 'jpg'],
      quality = 80,
      lazy = true
    } = options;
    // 生成不同尺寸和格式的源
    const sources = [];
    for (const format of formats) {
      const srcset = sizes
        .map(size => {
          const url = this.generateOptimizedUrl(originalUrl, {
            width: size,
            format,
            quality
          });
          return `${url} ${size}w`;
        })
        .join(', ');
      sources.push({ type: `image/${format}`, srcset });
    }
    // 生成 picture 元素
    const picture = document.createElement('picture');
    sources.forEach(source => {
      const sourceEl = document.createElement('source');
      sourceEl.type = source.type;
      sourceEl.srcset = source.srcset;
      sourceEl.sizes = options.sizes || '100vw';
      picture.appendChild(sourceEl);
    });
    // 默认 img 元素
    const img = document.createElement('img');
    const defaultUrl = this.generateOptimizedUrl(originalUrl, {
      width: sizes[Math.floor(sizes.length / 2)],
      format: formats[0],
      quality
    });
    img.src = defaultUrl;
    img.alt = alt;
    if (className) {
      img.className = className;
    }
    if (lazy) {
      img.loading = 'lazy';
      img.decoding = 'async';
    }
    picture.appendChild(img);
    return picture;
  }
}

第八章：性能监控与分析

8.1 图片加载性能追踪

// scripts/performance-monitor.js
class ImagePerformanceMonitor {
  constructor() {
    this.metrics = new Map();
    this.observer = null;
    this.init();
  }

  init() {
    // 监听图片加载事件
    this.observer = new PerformanceObserver(list => {
      list.getEntries().forEach(entry => {
        if (entry.initiatorType === 'img') {
          this.recordMetric(entry);
        }
      });
    });
    this.observer.observe({ entryTypes: ['resource'] });
    // 页面加载完成后生成报告
    window.addEventListener('load', () => {
      setTimeout(() => this.generateReport(), 1000);
    });
  }

  recordMetric(entry) {
    const url = new URL(entry.name);
    const key = url.pathname;
    const metric = {
      url: entry.name,
      duration: entry.duration,
      transferSize: entry.transferSize,
      decodedBodySize: entry.decodedBodySize,
      startTime: entry.startTime,
      initiatorType: entry.initiatorType
    };
    this.metrics.set(key, metric);
  }

  generateReport() {
    const report = {
      timestamp: new Date().toISOString(),
      totalImages: this.metrics.size,
      metrics: Array.from(this.metrics.values()),
      summary: this.calculateSummary()
    };
    // 发送到分析服务器
    this.sendReport(report);
    // 控制台输出
    this.logSummary(report.summary);
    return report;
  }

  calculateSummary() {
    const metrics = Array.from(this.metrics.values());
    if (metrics.length === 0) {
      return null;
    }
    const totalSize = metrics.reduce((sum, m) => sum + (m.transferSize || 0), 0);
    const totalDuration = metrics.reduce((sum, m) => sum + m.duration, 0);
    return {
      totalImages: metrics.length,
      totalSize,
      totalDuration,
      averageSize: totalSize / metrics.length,
      averageDuration: totalDuration / metrics.length,
      largestImage: metrics.reduce((max, m) => (m.transferSize || 0) > (max.transferSize || 0) ? m : max),
      slowestImage: metrics.reduce((max, m) => m.duration > max.duration ? m : max)
    };
  }

  logSummary(summary) {
    if (!summary) return;
    console.group('📊 图片加载性能报告');
    console.log(`总图片数：${summary.totalImages}`);
    console.log(`总加载大小：${(summary.totalSize / 1024).toFixed(2)} KB`);
    console.log(`总加载时间：${summary.totalDuration.toFixed(2)} ms`);
    console.log(`平均图片大小：${(summary.averageSize / 1024).toFixed(2)} KB`);
    console.log(`平均加载时间：${summary.averageDuration.toFixed(2)} ms`);
    console.log(`最大图片：${summary.largestImage.url}`);
    console.log(` 大小：${(summary.largestImage.transferSize / 1024).toFixed(2)} KB`);
    console.log(`最慢图片：${summary.slowestImage.url}`);
    console.log(` 时间：${summary.slowestImage.duration.toFixed(2)} ms`);
    console.groupEnd();
  }

  sendReport(report) {
    // 可实现发送到服务器的逻辑
    if (navigator.sendBeacon) {
      const data = JSON.stringify(report);
      navigator.sendBeacon('/api/performance-metrics', data);
    }
  }

  destroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }
}

// 使用示例
window.imagePerformanceMonitor = new ImagePerformanceMonitor();

第九章：实际应用案例

9.1 电子商务网站图片优化

// 电商图片优化专用配置
const ecommerceImageConfig = {
  // 产品图
  product: {
    breakpoints: [
      { width: 200, suffix: '-thumb', quality: 60 }, // 缩略图
      { width: 400, suffix: '-small', quality: 70 }, // 列表页
      { width: 800, suffix: '-medium', quality: 80 }, // 详情页
      { width: 1200, suffix: '-large', quality: 90 }, // 放大查看
      { width: 2000, suffix: '-xlarge', quality: 95 } // 原始尺寸
    ],
    formats: ['webp', 'jpg'],
    generateZoomable: true,
    generateGallery: true
  },
  // 横幅广告
  banner: {
    breakpoints: [
      { width: 320, suffix: '-mobile', quality: 75 },
      { width: 768, suffix: '-tablet', quality: 80 },
      { width: 1024, suffix: '-desktop', quality: 85 },
      { width: 1920, suffix: '-retina', quality: 90 }
    ],
    formats: ['webp', 'jpg'],
    enableCompression: true
  },
  // 用户头像
  avatar: {
    breakpoints: [
      { width: 50, suffix: '-xs', quality: 70 },
      { width: 100, suffix: '-sm', quality: 75 },
      { width: 200, suffix: '-md', quality: 80 }
    ],
    formats: ['webp'],
    crop: 'face', // 智能人脸裁剪
    rounded: true // 圆形头像
  }
};

// 电商图片处理管道
class EcommerceImagePipeline extends ImageOptimizationPipeline {
  constructor(type = 'product', customConfig = {}) {
    const baseConfig = ecommerceImageConfig[type] || ecommerceImageConfig.product;
    super({
      responsiveConfig: {
        ...baseConfig,
        ...customConfig
      }
    });
    this.type = type;
  }

  async processProductImage(filePath, productId, variant = 'default') {
    const options = {
      outputDir: `./products/${productId}/${variant}`,
      responsiveConfig: {
        ...ecommerceImageConfig.product,
        generateGallery: true
      }
    };
    const result = await this.processImage(filePath, options);
    // 生成电商专用 HTML
    const ecommerceHtml = this.generateEcommerceHtml(result, productId);
    return {
      ...result,
      ecommerceHtml
    };
  }

  generateEcommerceHtml(result, productId) {
    const galleryItems = result.responsive.versions
      .filter(v => v.width >= 800)
      .map((version, index) => ({
        src: version.path,
        srcset: result.html.webpSrcset,
        thumb: version.path.replace(/\d+\.(jpg|webp)$/, '200.$1'),
        alt: `产品 ${productId} - 图片 ${index + 1}`
      }));
    return {
      thumbnail: `
        <div>
          <picture>
            <source srcset="${result.html.webpSrcset}" type="image/webp">
            <img src="${result.html.defaultSrc}" srcset="${result.html.jpegSrcset}" alt="产品 ${productId}" loading="lazy">
          </picture>
        </div>`,
      gallery: `
        <div>
          ${galleryItems.map((item, index) => `
            <a href="${item.src}">
              <img src="${item.thumb}" alt="${item.alt}" loading="lazy">
            </a>
          `).join('')}
        </div>`,
      zoomable: `
        <div>
          <img src="${result.html.defaultSrc}" srcset="${result.html.jpegSrcset}" alt="产品 ${productId}">
        </div>`
    };
  }
}

第十章：未来趋势与进阶技术

10.1 AVIF 格式支持

// 添加 AVIF 支持
const sharp = require('sharp');

class AdvancedImageConverter extends WebPConverter {
  constructor(config = {}) {
    super(config);
    this.avifConfig = {
      quality: 60,
      lossless: false,
      effort: 4,
      chromaSubsampling: '4:2:0',
      ...config.avifConfig
    };
  }

  async convertToAvif(inputPath, outputPath, customConfig = {}) {
    try {
      const config = { ...this.avifConfig, ...customConfig };
      await sharp(inputPath)
        .avif({
          quality: config.quality,
          lossless: config.lossless,
          effort: config.effort,
          chromaSubsampling: config.chromaSubsampling
        })
        .toFile(outputPath);
      const originalStats = await fs.stat(inputPath);
      const optimizedStats = await fs.stat(outputPath);
      const savings = ((originalStats.size - optimizedStats.size) / originalStats.size * 100).toFixed(2);
      return {
        originalSize: originalStats.size,
        optimizedSize: optimizedStats.size,
        savingsPercent: savings,
        format: 'avif'
      };
    } catch (error) {
      console.error(`AVIF 转换失败:`, error);
      throw error;
    }
  }

  async convertToAllFormats(inputPath, outputDir) {
    const baseName = path.basename(inputPath, path.extname(inputPath));
    const results = {};
    // WebP
    const webpPath = path.join(outputDir, `${baseName}.webp`);
    results.webp = await this.convertToWebP(inputPath, webpPath);
    // AVIF
    const avifPath = path.join(outputDir, `${baseName}.avif`);
    results.avif = await this.convertToAvif(inputPath, avifPath);
    // 生成包含所有格式的 picture 元素
    results.html = this.generateUniversalPictureElement(
      inputPath,
      { webp: webpPath, avif: avifPath },
      baseName
    );
    return results;
  }

  generateUniversalPictureElement(originalPath, formatPaths, altText) {
    const metadata = await sharp(originalPath).metadata();
    return `
      <picture>
        <source srcset="${formatPaths.avif}" type="image/avif">
        <source srcset="${formatPaths.webp}" type="image/webp">
        <img src="${originalPath}" alt="${altText}" loading="lazy" decoding="async">
      </picture>`;
  }
}

10.2 机器学习驱动的智能压缩

// 基于内容的智能压缩
class IntelligentImageOptimizer {
  constructor() {
    this.models = {
      face: null,
      text: null,
      product: null
    };
    this.loadModels();
  }

  async loadModels() {
    // 加载 TensorFlow.js 模型
    // 这里是示例，实际需要训练好的模型
    try {
      // this.models.face = await tf.loadGraphModel('models/face-detection/model.json');
      // this.models.text = await tf.loadGraphModel('models/text-detection/model.json');
      console.log('模型加载完成（示例）');
    } catch (error) {
      console.warn('模型加载失败，使用传统方法:', error);
    }
  }

  async analyzeImage(imagePath) {
    const analysis = {
      hasFaces: false,
      hasText: false,
      isProduct: false,
      importantRegions: [],
      suggestedQuality: 80
    };
    // 使用 Sharp 读取图片
    const image = sharp(imagePath);
    const metadata = await image.metadata();
    // 简单的启发式分析
    if (metadata.width > metadata.height && metadata.width > 1000) {
      analysis.isProduct = true;
    }
    // 如果有模型，进行深度分析
    if (this.models.face) {
      // analysis.hasFaces = await this.detectFaces(imagePath);
    }
    // 根据分析结果调整质量设置
    if (analysis.hasFaces) {
      analysis.suggestedQuality = 90; // 人脸需要高质量
    } else if (analysis.hasText) {
      analysis.suggestedQuality = 85; // 文字需要清晰
    } else if (analysis.isProduct) {
      analysis.suggestedQuality = 80; // 产品图可适度压缩
    } else {
      analysis.suggestedQuality = 75; // 背景图可较高压缩
    }
    return analysis;
  }

  async optimizeWithAI(imagePath, outputPath) {
    const analysis = await this.analyzeImage(imagePath);
    // 根据分析结果应用不同的优化策略
    const config = {
      quality: analysis.suggestedQuality,
      chromaSubsampling: analysis.hasText ? '4:4:4' : '4:2:0',
      trellisQuantisation: !analysis.hasFaces, // 人脸区域不用 trellis 量化
      overshootDeringing: analysis.hasText
    };
    // 执行优化
    await sharp(imagePath)
      .jpeg(config)
      .toFile(outputPath);
    return {
      ...analysis,
      outputPath,
      config
    };
  }
}

结论

通过本指南，我们详细介绍了如何从零开始构建一个完整的 HTML 图片优化解决方案，重点实现了自动转换 WebP 格式和生成响应式图片的功能。这套方案具有以下特点：

1. 完全自主控制：不依赖第三方服务，所有处理在本地完成
2. 高性能：利用 Sharp 库实现快速的图片处理
3. 智能缓存：避免重复处理，提升效率
4. 高度可配置：可根据不同需求调整参数
5. 易于集成：提供多种集成方式（CLI、API、构建工具等）
6. 未来友好：支持新格式（AVIF）和智能技术

实施图片优化策略后，网站通常可以获得以下收益：

• 图片加载时间减少 50-80%
• 页面加载性能提升 30-50%
• 移动设备数据使用量显著降低
• 用户体验和转化率提高

随着 Web 技术的不断发展，图片优化将持续演进。建议定期更新优化策略，关注新格式（如 JPEG XL、HEIF）和新技术（如基于 ML 的压缩），以确保网站始终保持最佳性能。

附录：实用资源与工具

推荐工具

1. Sharp - 高性能 Node.js 图片处理库
2. ImageMagick - 命令行图片处理工具集
3. Squoosh - Google 开发的 Web 图片压缩工具
4. TinyPNG - 智能 PNG 和 JPEG 压缩服务

性能测试工具

1. Lighthouse - Chrome 开发者工具中的性能审计
2. WebPageTest - 全面的网站性能测试
3. PageSpeed Insights - Google 的页面速度分析工具

学习资源

1. Web.dev - Google 的官方最佳实践
2. Image Optimization - Addy Osmani 的免费电子书
3. Responsive Images Community Group - 响应式图片标准讨论

通过持续学习和实践，您将能够为任何 Web 项目构建高效、可靠的图片优化解决方案，提供卓越的用户体验。