为什么这张图片的分辨率高于我的？

Question

为什么这个网页的标题图片为here是高分辨率，我完全困惑，但当我在我的HTML中创建它时出现了较低的分辨率。我链接到完全相同的IMG链接。虽然当我检查代码时，此图像已链接img data-src，这是否会影响图像的质量？

如果有人知道这件事，它将不胜感激。

Answer 1

图像的地址是：

https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg

，但如果你仔细观察的<image>元素的实际src属性是

https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg?format=2500w

最后注意?format=2500w - 服务器被要求提供固定宽度的图像（这节省了移动设备上的网络流量）是常见做法。

将查询参数添加到您自己的代码后，您将看到相同的图像。

Answer 2

此页面上的照片已添加背景色和透明度。它作为照相的philtres。它的代码示例：

background-color: rgba(0,0,0,.3);