当网页包含大量图片时，可采取哪些策略来提升图像加载效率，从而优化页面加载速度？

回答思路

1. 【回答框架 1】图片加载优化的核心思路是减少传输体积、降低请求数量、并按需加载。统一使用压缩工具或CDN对图片进行有损或无损压缩，转用WebP等现代格式，可显著减小单张图片体积。
2. 【回答框架 2】懒加载是常用手段，利用IntersectionObserver或滚动事件判断图片进入视口后再加载，避免首屏加载过多图片。同时给img标签设置width和height占位，并使用模糊占位图或CSS背景色，减少布局偏移。
3. 【回答框架 3】针对不同设备分辨率，使用srcset和sizes属性提供多尺寸图片，让浏览器按视口宽度选择合适资源；小图可内联为base64或使用CSS雪碧图，减少HTTP请求数。
4. 【回答框架 4】进一步可考虑使用响应式图片API或图片服务实时裁剪缩放，结合HTTP缓存和CDN边缘缓存，使图片在首屏加载后从缓存或就近节点获取。对关键图片可使用预加载，提升感知性能。
5. 【回答框架 5】最后通过性能监控工具如Lighthouse评估优化效果，并注意渐进式加载或骨架屏提升用户体验，切忌一次性加载所有原图。
6. 【关键点 1】压缩图片并采用WebP等现代格式减少体积
7. 【关键点 2】使用懒加载仅加载进入视口的图片
8. 【关键点 3】利用srcset和sizes适配不同设备分辨率
9. 【关键点 4】结合CDN和HTTP缓存提升加载速度
10. 【关键点 5】通过CSS雪碧图或内联小图减少请求数
11. 【易错点 1】懒加载实现不当可能导致图片不显示或布局偏移，需预留尺寸
12. 【易错点 2】过度压缩导致图片质量严重下降，影响用户体验
13. 【易错点 3】preload和懒加载策略冲突可能导致关键图片未被及时加载