1. 启用图片延迟加载
- 在HTML代码中为img标签添加`loading="lazy"`属性。
- 浏览器仅在用户滚动到图片可见区域时加载资源，减少首屏加载时间。
2. 使用WebP格式替代传统图片
- 将JPG/PNG图片转换为WebP格式，可在开发者工具“Network”面板查看文件大小对比。
- WebP支持有损和无损压缩，通常比原格式减小20%-40%体积。
3. 调整图片加载顺序
- 在CSS中设置`img { display: block; }`避免图片间隙导致的布局偏移。
- 使用`srcset`属性根据设备分辨率加载不同尺寸图片（如`small.jpg 400w, large.jpg 800w`）。
4. 启用浏览器内置压缩
- 在Chrome设置→“隐私和安全”→“高级”中开启“优化图片加载”（Experimental Web Platform功能）。
- 浏览器自动对未压缩图片进行二次压缩处理。
5. 手动压缩图片文件
- 使用在线工具（如TinyPNG、ImageOptim）或软件（如Photoshop、GIMP）降低图片质量至60%-80%。
- 删除EXIF元数据，减少文件附加信息体积。
6. 合并小图标为CSS精灵图
- 将多个小图标拼接成单张图片，通过`background-position`调整显示区域。
- 减少HTTP请求次数，提升渲染效率。
7. 利用缓存加速重复加载
- 在服务器端设置`Cache-Control: max-age=31536000`头信息，使浏览器缓存图片30天。
- 版本更新时修改文件名（如`logo.png→logo_v2.png`），强制刷新缓存。
8. 检查并修复404错误图片
- 在开发者工具“Network”面板过滤“Images”，查看状态码为404的资源。
- 修正图片路径或上传缺失文件，避免浪费加载带宽。
9. 优先加载关键视觉图片
- 在HTML中将首屏必要的图片放在head或页面顶部，确保优先下载。
- 非核心装饰图片可设置`loading="eager"`提前加载，或使用低分辨率占位图。
10. 测试不同网络环境下的表现
- 在开发者工具“Network”面板切换“Throttle”限速模式（如10Mbps、4G网络）。
- 观察图片加载顺序和耗时，调整压缩策略以适应弱网环境。