Back to Details

image-optimization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Image Optimization

图片优化

Optimize images for web performance with modern formats and responsive techniques.
使用现代格式和响应式技术优化图片，提升Web性能。

Format Selection

格式选择

FormatBest ForCompression
JPEGPhotosLossy, 50-70% reduction
PNGIcons, transparencyLossless, 10-30%
WebPModern browsers25-35% better than JPEG
AVIFNext-gen50% better than JPEG
SVGLogos, iconsVector, scalable
格式适用场景压缩率
JPEG照片有损压缩，体积减少50-70%
PNG图标、透明元素无损压缩，体积减少10-30%
WebP现代浏览器比JPEG压缩效果好25-35%
AVIF下一代格式比JPEG压缩效果好50%
SVG标志、图标矢量格式，可缩放

Responsive Images

响应式图片

html
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img
    src="image.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Description"
    loading="lazy"
    decoding="async"
  >
</picture>
html
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img
    src="image.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Description"
    loading="lazy"
    decoding="async"
  >
</picture>

Lazy Loading

懒加载

html
<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- With blur placeholder -->
<img
  src="placeholder-blur.jpg"
  data-src="image.jpg"
  class="lazy"
  alt="Description"
>
html
<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- With blur placeholder -->
<img
  src="placeholder-blur.jpg"
  data-src="image.jpg"
  class="lazy"
  alt="Description"
>

Build Pipeline (Sharp)

构建流水线（Sharp）

javascript
const sharp = require('sharp');

async function optimizeImage(input, output) {
  await sharp(input)
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(output);
}
javascript
const sharp = require('sharp');

async function optimizeImage(input, output) {
  await sharp(input)
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(output);
}

Performance Targets

性能目标

Asset TypeTarget Size
Hero image<200KB
Thumbnail<30KB
Total images<500KB
资源类型目标大小
首屏图片<200KB
缩略图<30KB
图片总大小<500KB

Optimization Checklist

优化检查清单

  • Use WebP with JPEG fallback
  • Implement responsive srcset
  • Enable lazy loading for below-fold
  • Compress at quality 70-85
  • Serve from CDN
  • Set proper cache headers
  • 使用WebP格式并提供JPEG降级方案
  • 实现响应式srcset
  • 为首屏以下图片启用懒加载
  • 以70-85的质量进行压缩
  • 通过CDN分发图片
  • 设置正确的缓存头