⚡

图像优化 image-optimization

这项技能涉及对网站图像进行优化，以减少文件大小而不牺牲质量，包括压缩、使用现代格式和响应式技术，以加快加载速度，提升网站性能和用户体验。

前端开发 0 次安装 0 次浏览 更新于 3/4/2026

图像优化

概述

图像通常占页面重量的50%。优化可以显著提高性能，特别是在移动网络上。

何时使用

  • 网站优化
  • 响应式图像实现
  • 性能提升
  • 移动体验增强
  • 部署前

指令

1. 图像压缩和格式

格式选择：

JPEG： 最佳用途：照片，复杂图像 压缩：有损（质量70-85） 大小：约50-70%减少 工具：ImageMagick，TinyJPEG 命令：convert image.jpg -quality 75 optimized.jpg

PNG： 最佳用途：图标，屏幕截图，透明图像 压缩：无损 大小：10-30%减少 工具：PNGQuant，OptiPNG 命令：optipng -o3 image.png

WebP： 最佳用途：现代浏览器（90%支持） 压缩：比JPEG/PNG好25-35% 回退：使用<picture>元素 工具：cwebp 命令：cwebp -q 75 image.jpg -o image.webp

SVG： 最佳用途：图标，徽标，简单图形 压缩：最小化XML 可扩展：任何大小都适用 工具：SVGO 命令：svgo image.svg --output optimized.svg

压缩级别：

保守（95%质量）： JPEG：85-90质量 PNG：无损 用途：高价值图像

中等（90%质量）： JPEG：75-80质量 PNG：量化到256色 用途：一般图像

积极（80%质量）： JPEG：60-70质量 PNG：减少颜色 用途：缩略图，背景

2. 响应式图像

<!-- 响应式图像技术 -->

<!-- srcset：让浏览器选择 -->
<img
  src="image.jpg"
  srcset="
    small.jpg 480w,
    medium.jpg 768w,
    large.jpg 1200w
  "
  sizes="
    (max-width: 480px) 100vw,
    (max-width: 768px) 90vw,
    80vw
  "
  alt="描述"
/>

<!-- picture：格式选择 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="描述">
</picture>

<!-- 懒加载 -->
<img
  src="placeholder.jpg"
  loading="lazy"
  alt="描述"
/>

3. 优化过程

工作流程：

1. 准备
  - 以正确大小导出（不要在HTML中缩放）
  - 使用适当的格式
  - 批量处理相似图像

2. 压缩
  - 有损：TinyJPEG/TinyPNG
  - 无损：ImageMagick
  - 目标：<100KB的主要图像
  - 缩略图：<20KB

3. 格式转换
  - WebP与JPEG回退
  - 考虑PNG用于透明度
  - SVG用于可扩展图形

4. 实施
  - 使用srcset响应
  - 懒加载以下折叠
  - 首先优化关键图像
  - 在CI/CD中监控文件大小

5. 验证
  - 在DevTools中检查文件大小
  - 在慢速网络上测试
  - 验证质量可接受
  - 测量性能影响

---

快速胜利：

去除EXIF数据（节省20-50KB）：
  identify -verbose image.jpg | grep -i exif
  convert image.jpg -strip image-clean.jpg

转换为WebP（25-35%更小）：
  cwebp -q 75 *.jpg

使用ImageMagick批量压缩：
  mogrify -quality 75 -resize 1920x1080 *.jpg

预期结果：
  - 首页：850KB → 300KB图像
  - 性能：3s → 1.5s加载时间
  - 移动：3G上显著改进

4. 监控和最佳实践

性能目标：

英雄图像：<200KB
缩略图：<30KB
图标：<5KB
总图像：<500KB
目标gzip：<300KB

工具：
  - ImageOptim（Mac）
  - ImageMagick（CLI）
  - TinyJPEG/TinyPNG（web）
  - Squoosh（web）
  - Lighthouse（审计）

清单：
  [ ] 所有图像优化
  [ ] WebP与回退
  [ ] 响应式srcset
  [ ] 实施懒加载
  [ ] 每个图像的正确格式
  [ ] 文件大小<100KB
  [ ] 建立基准
  [ ] 监控到位
  [ ] 文档化流程

提示：
  - 上传前优化
  - 使用具有图像优化的CDN
  - 考虑图像CDN（Imgix，Cloudinary）
  - 在构建期间批量处理
  - 监控图像添加
  - 在3G上测试真实设备

关键点

  • JPEG用于照片，PNG用于图形，SVG用于图标
  • WebP节省25-35%与JPEG/PNG相比
  • 响应式图像适应设备
  • 懒加载延迟屏幕外图像
  • 去除EXIF和元数据
  • 部署前批量优化
  • 监控图像文件大小
  • 测量性能影响
  • 为每种图像类型设置严格目标
  • 使用图像CDN进行全球优化