图片处理

• 图片渲染慢如何处理？
• CDN问题导致响应慢，如何优化？
• 图片懒加载
• 首屏图片不要lazy，否则会拖慢lcp性能
• 首屏图片优化
• srcset + sizes 响应式图片加载方案
  • 小屏不要下载大图
  • 高清屏在需要时拿更清晰的图
  • 提高页面加载性能LCP
    • 首屏大图通常是 LCP 元素，如果资源太大，会下载慢，渲染慢
  • 通常srcset设置4-6个档位就够了

注意问题

• 检查图片是否命中缓存策略？
• 检查cdn的缓存策略
• 图片按需加载、懒加载，避免多个请求图片资源
• 图片大小，检查压缩

CDN图片尺寸优化

• 对于CDN的图片链接，图片尺寸以及压缩参数, 针对image_process参数进行二次修改

• cdn图片链接为：https://file-cdn.flextv.cc/image/bb/070a745b1d1c2fdc177bc69950ead9.jpg?image_process=resize,w_256/quality,Q_75/format,webp

• 修改图片宽度、压缩率

在lighthouse分析出现报错：

• 请求尺寸偏大
• 比如页面里很多图片实际展示只有 48×48、62×62，但是图片参数了 w_256，会导致下载体积明显偏大

优化方案：

• 宽度按“展示尺寸 × DPR”来算
  • DPR 是 Device Pixel Ratio，叫 设备像素比
• img 定义 srcset + sizes，让浏览器自己选，直接把多个宽度都给浏览器，响应式图片方案

常见问题

• 手机屏幕可能只显示 375px 宽，但却下载了 1200px 甚至 2000px 的图

srcset + sizes

• srcset：提供多个候选图片
• sizes：告诉浏览器“这张图在不同视口下实际会显示多宽”

首屏图片优化

• 首屏图片不要lazy，否则会拖慢lcp性能

• 首屏大图

  • srcset + sizes

  • fetchpriority="high"

  • 不用 loading="lazy"

  • 使用webp

• 非首屏图片优化

  • srcset + sizes
  • loading="lazy"
  • decoding="async"

为什么首屏图片使用lazy会拖慢lcp？

• 因为 LCP 统计的是首屏最大内容“真正显示出来”的时间
• 而 loading="lazy" 会让首屏图片的请求被延后发起，于是这张图更晚下载、更晚解码、更晚渲染，LCP 就被拖后了。

非首屏图片使用decoding="async"

• 告诉浏览器：这张图片的解码可以异步进行，不要尽量阻塞当前页面渲染。
• 注意是解码异步执行，而不是下载
  • 图片显示到页面上，大致有两步：
    1. 下载图片资源
    2. 把图片二进制数据解码成像素，准备渲染
  • decoding 控制的是第 2 步，不是下载。