1. 启用图片懒加载
- 在HTML代码中为图片标签添加`loading="lazy"`属性（如img src="image.jpg" loading="lazy"），浏览器会自动延迟加载非首屏图片，仅在用户滚动到视口时加载。
- 通过Chrome开发者工具的Lighthouse报告检测未配置懒加载的图片，提示优化建议。
2. 自动压缩图片尺寸
- 使用`srcset`属性提供多套分辨率图片（如img srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1000w" sizes="(max-width: 600px) 300px, 600px"`），浏览器根据设备屏幕宽度选择最小适配图片。
- 在Network面板中查看图片请求，手动替换高分辨率图片为压缩版本（如将`large.jpg`替换为`medium.jpg`）。
3. 应用WebP格式转换
- 在Network面板右键点击图片资源，选择Convert to WebP，浏览器会模拟将JPEG/PNG转换为WebP格式（文件大小减少30%-50%）。
- 通过picture标签嵌套source标签指定WebP备选方案（如source type="image/webp" src="image.webp"）。
4. 开启GPU硬件加速
- 在地址栏输入`chrome://settings/system`，勾选使用硬件加速模式（如果可用），利用GPU解码图片而非CPU，降低内存占用。
- 对CSS动画类图片（如旋转的加载图标），启用`will-change: transform`属性触发GPU渲染。
5. 缓存图片资源
- 在Network面板找到图片请求，右键标记为Cache，强制浏览器缓存该资源（需服务器支持`Cache-Control`头）。
- 使用link rel="preload" href="image.jpg" as="image"预加载关键图片（如LOGO、横幅图），提升首屏加载速度。
6. 优化图片加载顺序
- 在Lighthouse报告中启用Reduce Resource Loads建议，优先加载FOVC（首屏可视区域）图片，延迟加载次要内容（如评论区缩略图）。
- 对多图页面（如电商列表页），使用`decoding="async"`属性异步解码图片，避免阻塞渲染线程。
7. 检测未优化图片
- 在Lighthouse报告的Performance模块查看`Largest Contentful Paint`指标，识别加载最慢的图片资源。
- 使用Audits面板运行`images-audit`规则，检查图片是否缺少压缩、懒加载或格式优化。
