Unsplash随机图片API首屏加载耗时30-40秒，加宽高参数仍无改善求解决方案

云原生阿岚

2026-10-3

你遇到的加载慢问题本质是w、h等裁剪压缩参数没有作用到实际加载的图片资源上，仅添加在API请求参数中是无效的。Unsplash API 请求参数中的 w/h 仅用于返回数据的尺寸字段参考，不会自动对返回的图片CDN资源做裁剪压缩处理。

解决方案

正确添加图片资源参数
从API返回的urls.raw字段后拼接处理参数，可大幅降低图片体积：
```
// 示例：拼接参数后的图片地址
const optimizedImgUrl = `${dailyPhoto.urls.raw}?w=${width}&h=800&q=85&fm=webp`
```
新增的fm=webp参数会让CDN返回WebP格式的图片，相比默认JPG格式体积可降低30%~50%，加载速度提升明显。

修复本地缓存逻辑
你当前代码中声明了savedPhotoDate字段但没有做过期判断，用户首次访问后会永远使用本地缓存的图片数据，如需每日更新图片可增加时间判断逻辑：

const isExpired = !savedPhotoDate || Date.now() - Number(savedPhotoDate) > 24 * 60 * 60 * 1000
if (!dailyPhoto || isExpired) {
  // 原有重新请求图片逻辑
  // 请求成功后更新savedPhotoDate
  localStorage.setItem('savedPhotoDate', String(Date.now()))
}

优化首屏加载体验
1. 优先使用Unsplash返回的urls.blur低分辨率模糊图作为占位符，等高清图加载完成后再替换，用户无明显等待感知
2. 可在HTML头部添加对应尺寸图片的预加载标签，提前触发图片资源加载：
```
<link rel="preload" as="image" href="优化后的图片CDN地址">
```
1. 移动端不要加载超过屏幕分辨率的大图，可根据设备类型调整calculateWidth方法的下限阈值，避免不必要的带宽浪费。
额外优化建议
如果你的图库图片数量固定，可提前将常用尺寸的图片缓存到你自己的CDN上，避免每次都调用Unsplash接口，也能规避Unsplash CDN在部分地区访问不稳定的问题。