Core Web Vitals 与图片的关系
Google 的 Core Web Vitals 是衡量网页用户体验的核心指标，包括 LCP、FID 和 CLS。图片处理不当会直接影响这三项指标。
LCP（最大内容绘制）
如果首屏包含大图，LCP 时间会显著增加。优化建议：使用现代格式（WebP/AVIF）；提供响应式图片；对首屏图片使用 preload。
CLS（累积布局偏移）
图片未设置宽高属性时会导致布局偏移。始终为 img 标签设置 width 和 height；使用 CSS aspect-ratio 预留空间。
图片处理技巧
- 灰度处理：对于非关键视觉元素，转换为灰度图可以减少文件体积
- 裁剪和缩放：在服务器端裁剪到实际显示尺寸
- 懒加载：对非首屏图片使用 loading="lazy"
动手体验
使用我们的 在线图片灰度转换工具 快速将彩色图片转换为灰度图。