Unsplash API 控制图像质量

【问题标题】：Unsplash API Control Image QualityUnsplash API 控制图像质量
【发布时间】：2021-10-01 15:05:25
【问题描述】：

是否可以使用 Unsplash API 或任何其他方式控制嵌入在网络上的图像的质量？在下面的例子中可以看到，嵌入的图像不清晰模糊，而原始图像处于良好状态。

原图链接：https://unsplash.com/photos/MDZAbQApcKY

通过他们的 API 嵌入上图的示例：

#test {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-image: url("https://source.unsplash.com/MDZAbQApcKY");
}

&lt;div id="test"&gt;&lt;/div&gt;

【问题讨论】：

问题不在于 unsplash，而在于 background-size: cover，因为图像被缩放和拉伸以适应容器，因此质量差异。
@zhulien 说的有道理，但是怎么解决呢？
@zhulien 其实如果我能控制嵌入的质量那么background-size: cover应该没有任何问题，因为图像足够大。

标签： javascript html css api

【解决方案1】：

Unsplash Documentation

Unpslash 支持以下参数：

w, h: 用于调整照片的宽度和高度裁剪：用于对照片应用裁剪

fm:用于转换图片格式

auto=format: 用于根据用户浏览器自动选择最佳图像格式

q: 用于在使用有损文件格式时更改压缩质量

fit: 用于更改图像在指定尺寸内的适合度

dpr:用于调整图像的设备像素比例

#test {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-image: url("https://images.unsplash.com/photo-1627156863760-f49b81d8ab77?fm=jpg&w=3000&fit=max");
}

&lt;div id="test"&gt;&lt;/div&gt;

【讨论】：