Lighthouse 图片尺寸与裁剪优化

针对您提供的 Lighthouse 诊断报告（图片尺寸 2089x3324，实际渲染 1886x1896，object-cover 裁剪），核心浪费在于高度冗余（3324px 仅使用了 1896px，且图像被强制裁剪）。以下是分梯度的优化方案，您可以根据技术栈灵活选择：

由于 CSS 使用了 object-cover，浏览器只会显示图片中央区域。您无需保留完整的 3324 高度。

操作：将图片按居中裁剪的方式，物理输出为 1886x1896 像素（或等比缩放后裁剪）。
预期收益：像素总数从 694 万降至 357 万，文件大小预计从 354KB 降至 ~182KB，恰好匹配预估的 172KB 节省。
工具：使用 ImageMagick 命令：convert input.webp -gravity center -crop 1886x1896+0+0 output.webp。

如果直接裁成 1886x1896，在 2x/3x 视网膜屏上会模糊。建议同时提供 1x 和 2x 版本。

操作：生成两个 WebP 文件：
- bg-1x.webp（1886x1896，约 180KB）
- bg-2x.webp（3772x3792，约 650KB，仅高端屏加载）

代码改造（将 <img> 改为 srcset）：

<img 
  src="bg-1x.webp" 
  srcset="bg-1x.webp 1x, bg-2x.webp 2x" 
  style="width:100%; height:100%; object-fit:cover;" 
  alt="login background"
>

当前已使用 WebP，但 AVIF 在相同画质下比 WebP 体积小约 30%。

代码改造（使用 <picture> 降级）：

<picture>
  <source srcset="bg.avif" type="image/avif">
  <img src="bg.webp" style="width:100%; height:100%; object-fit:cover;" alt="">
</picture>

如果 static.example.com 支持阿里云 OSS 或 AWS S3 的图像处理参数，无需重新上传，直接修改 URL。

操作：在图片 URL 后添加实时裁剪/格式转换参数。
- 若使用阿里云 OSS：?x-oss-process=image/crop,w_1886,h_1896,g_center/format,avif
- 若使用 Imgix/Cloudinary：?w=1886&h=1896&fit=crop&fm=avif
预期收益：无需改动代码仓库中的源文件，一次性解决，且浏览器缓存命中的是处理后的新资源。

由于该图片是 LCP 元素，配合以上方案，在 <head> 中增加预加载，让下载优先级最高：

<link rel="preload" as="image" href="最终优化后的图片路径" fetchpriority="high">