image-optimization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Image Optimization

图片优化

Overview

概述

Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.

图片通常占页面总大小的50%。优化能显著提升性能，尤其是在移动网络环境下。

When to Use

适用场景

Website optimization
Responsive image implementation
Performance improvement
Mobile experience enhancement
Before deployment

网站优化
响应式图片实现
性能提升
移动端体验优化
部署前处理

Instructions

操作指南

1. Image Compression & Formats

1. 图片压缩与格式选择

yaml

Format Selection:

JPEG:
  Best for: Photographs, complex images
  Compression: Lossy (quality 70-85)
  Size: ~50-70% reduction
  Tools: ImageMagick, TinyJPEG
  Command: convert image.jpg -quality 75 optimized.jpg

PNG:
  Best for: Icons, screenshots, transparent images
  Compression: Lossless
  Size: 10-30% reduction
  Tools: PNGQuant, OptiPNG
  Command: optipng -o3 image.png

WebP:
  Best for: Modern browsers (90% support)
  Compression: 25-35% better than JPEG/PNG
  Fallback: Use <picture> element
  Tools: cwebp
  Command: cwebp -q 75 image.jpg -o image.webp

SVG:
  Best for: Icons, logos, simple graphics
  Compression: Minify XML
  Scalable: Works at any size
  Tools: SVGO
  Command: svgo image.svg --output optimized.svg

---

Compression Levels:

Conservative (95% quality):
  JPEG: 85-90 quality
  PNG: Lossless
  Use: High-value images

Moderate (90% quality):
  JPEG: 75-80 quality
  PNG: Quantized to 256 colors
  Use: General images

Aggressive (80% quality):
  JPEG: 60-70 quality
  PNG: Reduced colors
  Use: Thumbnails, backgrounds

yaml

格式选择:

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:
  适用场景：图标、Logo、简单图形
  压缩方式：压缩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. Responsive Images

2. 响应式图片

html

<!-- Responsive image techniques -->

<!-- srcset: Let browser choose -->
<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="Description"
/>

<!-- picture: Format selection -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description">
</picture>

<!-- Lazy loading -->
<img
  src="placeholder.jpg"
  loading="lazy"
  alt="Description"
/>

html

<!-- 响应式图片实现技巧 -->

<!-- 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. Optimization Process

3. 优化流程

yaml

Workflow:

1. Preparation
  - Export at correct size (don't scale in HTML)
  - Use appropriate format
  - Batch process similar images

2. Compression
  - Lossy: TinyJPEG/TinyPNG
  - Lossless: ImageMagick
  - Target: <100KB for main images
  - Thumbnails: <20KB

3. Format Conversion
  - WebP with JPEG fallback
  - Consider PNG for transparency
  - SVG for scalable graphics

4. Implementation
  - Use srcset for responsive
  - Lazy load below-fold
  - Optimize critical images first
  - Monitor file sizes in CI/CD

5. Validation
  - Check file sizes in DevTools
  - Test on slow networks
  - Verify quality acceptable
  - Measure performance impact

---

Quick Wins:

Remove EXIF data (saves 20-50KB):
  identify -verbose image.jpg | grep -i exif
  convert image.jpg -strip image-clean.jpg

Convert to WebP (25-35% smaller):
  cwebp -q 75 *.jpg

Batch compress with ImageMagick:
  mogrify -quality 75 -resize 1920x1080 *.jpg

Expected Results:
  - Homepage: 850KB → 300KB images
  - Performance: 3s → 1.5s load time
  - Mobile: Significant improvement on 3G

yaml

工作流程:

1. 准备阶段
  - 导出正确尺寸的图片（不要在HTML中缩放）
  - 选择合适的格式
  - 批量处理同类图片

2. 压缩处理
  - 有损压缩：TinyJPEG/TinyPNG
  - 无损压缩：ImageMagick
  - 目标：主图体积<100KB
  - 缩略图：<20KB

3. 格式转换
  - 使用WebP格式并提供JPEG降级方案
  - 透明图片考虑使用PNG
  - 可缩放图形使用SVG

4. 页面实现
  - 使用srcset实现响应式
  - 对首屏外图片启用懒加载
  - 优先优化关键图片
  - 在CI/CD中监控文件大小

5. 验证阶段
  - 在开发者工具中检查文件大小
  - 在慢速网络下测试
  - 确认画质可接受
  - 评估性能提升效果

---

快速优化技巧:

移除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. Monitoring & Best Practices

4. 监控与最佳实践

yaml

Performance Targets:

Hero Image: <200KB
Thumbnail: <30KB
Icon: <5KB
Total images: <500KB
Target gzipped: <300KB

Tools:
  - ImageOptim (Mac)
  - ImageMagick (CLI)
  - TinyJPEG/TinyPNG (web)
  - Squoosh (web)
  - Lighthouse (audit)

Checklist:
  [ ] All images optimized
  [ ] WebP with fallback
  [ ] Responsive srcset
  [ ] Lazy loading implemented
  [ ] Correct format per image
  [ ] File size <100KB each
  [ ] Benchmarks established
  [ ] Monitoring in place
  [ ] Documented process

Tips:
  - Optimize before uploading
  - Use CDN with image optimization
  - Consider Image CDN (Imgix, Cloudinary)
  - Batch process during build
  - Monitor image additions
  - Test real devices on 3G

yaml

性能目标:

首屏主图：<200KB
缩略图：<30KB
图标：<5KB
图片总大小：<500KB
Gzip压缩后目标：<300KB

工具:
  - ImageOptim（Mac）
  - ImageMagick（命令行）
  - TinyJPEG/TinyPNG（网页工具）
  - Squoosh（网页工具）
  - Lighthouse（性能审计）

检查清单:
  [ ] 所有图片已优化
  [ ] 已使用WebP并提供降级方案
  [ ] 已实现响应式srcset
  [ ] 已启用懒加载
  [ ] 为图片选择了正确的格式
  [ ] 单张图片体积<100KB
  [ ] 已建立性能基准
  [ ] 已设置监控
  [ ] 已记录优化流程

技巧:
  - 上传前先优化图片
  - 使用带图片优化功能的CDN
  - 考虑使用图片CDN（Imgix、Cloudinary）
  - 构建过程中批量处理图片
  - 监控新增图片的体积
  - 在真实设备的3G网络下测试

Key Points

核心要点

JPEG for photos, PNG for graphics, SVG for icons
WebP saves 25-35% vs JPEG/PNG
Responsive images adapt to device
Lazy loading defers off-screen images
Remove EXIF and metadata
Batch optimize before deployment
Monitor image file sizes
Measure performance impact
Set strict targets per image type
Use image CDN for global optimization

照片用JPEG，图形用PNG，图标用SVG
WebP格式比JPEG/PNG节省25-35%的体积
响应式图片可适配不同设备
懒加载可延迟加载首屏外的图片
移除EXIF等元数据
部署前批量优化图片
监控图片文件大小
评估性能提升效果
为不同类型图片设置严格的体积目标
使用图片CDN实现全局优化