image-optimization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Image Optimization Expert

图片优化专家

Quick Reference

快速参考

Format Selection

格式选择

Use Case	Best Format	Fallback
Photos	AVIF	WebP → JPEG
Graphics/logos with transparency	SVG	WebP → PNG
Photos with transparency	WebP	PNG
Animations	WebP	GIF (or MP4 for long animations)
Icons	SVG	WebP → PNG
Screenshots	WebP	PNG

使用场景	最佳格式	降级备选
照片	AVIF	WebP → JPEG
带透明通道的图形/标志	SVG	WebP → PNG
带透明通道的照片	WebP	PNG
动图	WebP	GIF（长动画用MP4）
图标	SVG	WebP → PNG
截图	WebP	PNG

Quality Settings by Format

各格式的质量设置

Format	Recommended Quality	Notes
JPEG	75-85	80 is sweet spot for photos
WebP	75-85	More efficient than JPEG at same quality
AVIF	60-75	Much more efficient, use lower numbers
PNG	N/A	Lossless, optimize with tools like oxipng

格式	推荐质量	说明
JPEG	75-85	照片的最佳值为80
WebP	75-85	相同质量下比JPEG更高效
AVIF	60-75	效率更高，建议使用较低数值
PNG	不适用	无损格式，可使用oxipng等工具优化

Responsive Image Breakpoints

响应式图片断点

Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560

html

<img
  src="image-800.jpg"
  srcset="
    image-320.jpg 320w,
    image-480.jpg 480w,
    image-768.jpg 768w,
    image-1024.jpg 1024w,
    image-1600.jpg 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Description"
  loading="lazy"
  decoding="async"
>

标准宽度：320, 480, 768, 1024, 1366, 1600, 1920, 2560

html

<img
  src="image-800.jpg"
  srcset="
    image-320.jpg 320w,
    image-480.jpg 480w,
    image-768.jpg 768w,
    image-1024.jpg 1024w,
    image-1600.jpg 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Description"
  loading="lazy"
  decoding="async"
>

Modern Format with Fallbacks

带降级备选的现代格式

html

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

html

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

When to Read Reference Files

何时阅读参考文档

Format details (compression algorithms, browser support, encoding options, HDR, wide color gamut): See formats.md
Compression techniques (lossy vs lossless, quality optimization, SSIM/VMAF thresholds, batch processing): See optimization.md
Responsive images (srcset, sizes, art direction, fetchpriority, container queries): See responsive.md
Performance (lazy loading, Core Web Vitals, placeholder strategies, preloading, CDNs): See performance.md
Tools and services (Sirv, Cloudinary, imgix, AI tools, edge/serverless, CLI tools): See tools.md

格式详情（压缩算法、浏览器支持、编码选项、HDR、广色域）：查看formats.md
压缩技术（有损vs无损、质量优化、SSIM/VMAF阈值、批量处理）：查看optimization.md
响应式图片（srcset、sizes、艺术方向、fetchpriority、容器查询）：查看responsive.md
性能（懒加载、Core Web Vitals、占位符策略、预加载、CDNs）：查看performance.md
工具与服务（Sirv、Cloudinary、imgix、AI工具、边缘/无服务器、CLI工具）：查看tools.md

Core Principles

核心原则

Serve modern formats - AVIF/WebP with JPEG/PNG fallbacks
Right-size images - Never serve larger than display size
Lazy load below-fold - Use
```
loading="lazy"
```
for offscreen images
Optimize LCP images - Preload hero images, avoid lazy loading
Use CDN - Edge caching and automatic optimization
Set dimensions - Always include width/height to prevent layout shift

使用现代格式 - AVIF/WebP搭配JPEG/PNG降级备选
适配图片尺寸 - 绝不提供比显示尺寸更大的图片
懒加载屏外图片 - 对屏幕外图片使用
```
loading="lazy"
```
优化LCP图片 - 预加载首屏英雄图，避免懒加载
使用CDN - 边缘缓存与自动优化
设置宽高属性 - 始终包含宽高以防止布局偏移

Common Mistakes

常见错误

Lazy loading LCP (hero) images - hurts performance
Missing width/height attributes - causes layout shift (CLS)
Serving 4K images to mobile devices
Using PNG for photos (use JPEG/WebP/AVIF)
Using JPEG for graphics with text/transparency
Not providing fallbacks for AVIF/WebP
Over-compressing and creating visible artifacts
Ignoring aspect ratio in responsive images

懒加载LCP（首屏英雄）图片 - 影响性能
缺失宽高属性 - 导致布局偏移（CLS）
向移动设备提供4K图片
用PNG格式存储照片（应使用JPEG/WebP/AVIF）
用JPEG格式存储带文字/透明通道的图形
未为AVIF/WebP提供降级备选
过度压缩导致出现可见失真
忽略响应式图片的宽高比