优先使用原生loading="lazy"实现图片懒加载，提升首屏性能；对于旧浏览器，采用Intersection Observer API结合data-src实现自定义懒加载；再配合srcset和sizes响应式属性，按设备加载合适图片，兼顾性能与兼容性。
在HTML5中优化图片加载，核心是提升页面性能、减少初始负载，尤其对含大量图片的网页尤为重要。其中，lazy-loading（懒加载）是一种关键策略，它让图片仅在用户滚动到其可视区域时才开始加载，从而加快首屏渲染速度、节省带宽。
使用原生 loading 属性实现懒加载
现代浏览器支持通过 loading="lazy" 属性实现图片和iframe的懒加载，无需JavaScript即可完成。
语法简单：
说明：
立即学习“前端免费学习笔记（深入）”；
- loading="lazy"：延迟加载，直到接近视口时才请求资源
- loading="eager"：默认行为，立即加载
该方式兼容性良好（Chrome、Edge、Firefox、Opera等主流浏览器均支持），推荐优先使用。
结合 Intersection Observer 实现自定义懒加载
对于需要兼容旧浏览器或更精细控制的场景，可使用 JavaScript 的 Intersection Observer API 来实现懒加载。
基本思路：
- 将真实图片地址存放在 data-src 属性中
- 初始
src使用占位图（如透明GIF） - 当元素进入视口时，用 JavaScript 将
data-src的值赋给src
示例代码：
配合响应式图片进一步优化
结合 srcset 和 sizes 属性，可根据设备屏幕自动加载合适尺寸的图片，与懒加载叠加使用效果更佳。
例如：
这样既实现了懒加载，又避免了移动端加载过大图片造成浪费。
基本上就这些。优先使用原生 loading="lazy"，兼顾兼容性时用 Intersection Observer，再搭配响应式属性，就能高效优化图片加载。不复杂但容易忽略细节。
