🖼️ 图片加载优化：使用 Picture 标签和 Srcset 实现最佳响应式图片

图片：性能的首要瓶颈

图片通常占据网页总下载字节数的 50% 以上。在响应式设计中，给所有设备都加载同一张高分辨率大图是极大的浪费。现代前端应采用 **响应式图片技术** 来提供最适合用户设备尺寸和像素密度的图片。

🚀 响应式图片两大 API：

• `srcset` 属性： 用于 `` 标签，允许浏览器根据设备的 **像素密度（x 描述符）** 和 **视口尺寸（w 描述符）** 自行选择最合适的图片源。
• `` 标签： 提供了更多的灵活性。它允许您根据媒体查询（例如，针对特定视口大小或深色模式）提供 **不同裁切比例** 或 **不同格式（如 WebP/AVIF）** 的图片。

通过 `` 标签，您可以优先提供体积最小的 **WebP** 格式，并以 JPEG 作为优雅降级。浏览器会自行判断并加载第一个匹配的 ``。采用这些原生 HTML5 解决方案，可以大幅减少带宽消耗，并提升 LCP 性能指标。