前端性能与可靠性工程：资源优化 - 加载性能的“低垂果实”

前端性能与可靠性工程：资源优化 - 加载性能的“低垂果实”

第一部分：图片优化 - 视觉的代价 🖼️

图片通常是网页上占据最多字节的资源类型。优化图片是提升 LCP 分数最有效的手段。

技巧 1：合适的尺寸 (Right Sizing)

永远不要用一张 2000px 宽的图片，去填充一个只显示为 300px 的头像。这就像用一辆卡车去送一封信。

• 实践: 使用 HTML 的 <img srcset> 和 sizes 属性，让浏览器根据屏幕尺寸和分辨率，自动选择最合适的图片版本。

  <img srcset="photo-small.jpg 480w,
               photo-medium.jpg 800w,
               photo-large.jpg 1200w"
       sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
       src="photo-large.jpg"
       alt="A beautiful landscape">
  

技巧 2：现代的格式 (Modern Formats)

JPEG 和 PNG 已经老了。新的图片格式能在保证质量的同时，提供更高的压缩率。

• WebP: 由 Google 开发，压缩效果远胜于 JPEG 和 PNG，已被所有现代浏览器支持。
• AVIF: 比 WebP 更先进，压缩率更高，尤其适合高保真度图片。目前主流浏览器支持度也已非常高。
• 实践: 使用 <picture> 元素，优雅地为不支持新格式的旧浏览器提供降级方案。

  <picture>