爲什麼這張圖片的分辨率高於我的？

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);