#图像加载与优化

#1. 优化的价值

在网页中，图像通常占据了较大的内容体积比重，经常是引发加载缓慢、网络排队阻塞、以及产生页面结构抖动的核心原因。优化图像资源的获取规则与加载策略对于前端呈现阶段的用户感知体验和页面载入指标评价立竿见影。

#2. 核心优化方向

#(1) 现代压缩格式的替换与应用

减少常规使用大体积无损图片如 PNG 或未进行压缩缩小的传统 JPEG 的比例：

• WebP：提供接近原生表现水平的色彩清晰细节展示下，对比 PNG/JPEG 等能有明显减少幅度的压缩水平，现阶段多数浏览器均具有相应的展示支持能力，并能涵盖包括动画格式的支持体系。
• AVIF：相比更为普及的现代格式能提供更为极致先进的有效压缩占比水平技术。考虑到应用平台的接受呈现阶段支持度正在扩张普及进程中，需要辅以前端兼容与降级规则处理配置应用方案。

#(2) 响应式尺寸提供与请求策略

对于展示屏幕尺寸跨度较大的呈现结构避免让较小分辨宽度设备拉取解析未经截取剪裁的大尺寸原图开销。 通过应用带有 HTML 标准规范指令集成的 <picture> 或者配合提供图片不同尺码资源定义的 srcset 的组件特征进行适应性响应加载规则判定，依据所使用设备终端的分辨率和视口环境条件直接定位加载适配级别素材资源。

<picture>
  <!-- 支持更佳压塑格式优先解析读取配置 -->
  <source srcset="image.avif" type="image/avif">
  <!-- 否则按传统处理 fallback 配置展现 -->
  <img src="fallback.jpg" alt="描述"> 
</picture>

<!-- 或是为多端分发对应的图片比例配置集提供选取加载：-->
<img srcset="small.jpg 400w, large.jpg 1600w" 
     sizes="(max-width: 600px) 400px, 800px" 
     src="large.jpg" />

#(3) 非视口呈现对象的懒加载延迟机制

控制并未滚动出现到初始渲染页面窗口范围中的占位图片内容不立刻发生对应资源下发读取网络通信过程。

• 当前最便易处理途径是采用针对媒体对象本身所添加的基础属性支持： <img loading="lazy" src="..." > 实现不产生多余通信过程的自行截缓拦截载入机制。
• 使用对应兼容支持需要，或采用需要具备详细控制规则的处理条件可依靠关联 IntersectionObserver 进行相交观察并对可视表现后的内容组件对象变更对应 URL 读取连接来源触发下发处理。

#(4) 避免动态图像加载引发视图重绘抖动

当外部下发的图内容未进行到完全就绪呈现时，外部层叠展示组件对于展示区域的大小高度判断缺少边界数据。而等到最后素材内容插入后撑开的突兀改变会导致整体页面中布局元素的下坠与错乱跳位，引发较大的绘制异常干扰。 对于类似具有呈现图片操作的应用区域必须先行进行空间占比参数（长宽分配界限）的属性提前设定分配（或采用色彩简单色块图或过渡预构图代替），令到载入的等待空屏期已有足够的视图边界排布配置位置防止异常呈现挤占。