通过HTML调整大小的图像比通过PhotoShop锐化

Question

我很抱歉这不是要问的正确社区，但是我认为这与HTML有关，所以我在这里问。

我需要一个带有信用卡图标的小横幅（高21像素）。
我在PS中制作了它，并将其调整为21px的高度（自动宽度），但对清晰度却不满意。
我现在用HTML加载完整图像，并使用height和width图像标签属性将其大小调整为与PS中相同的大小，但结果要好得多。 1）使用HTML调整大小
2）使用PS调整大小

Chrome开发者工具显示两个图像的尺寸相同。

为什么会有这样的区别？

Answer 1

浏览器仅显示它为 21px 的高像素，但更高dpi的屏幕可能会使用完整图像以使其更清晰。如您共享的屏幕截图所示，两行实际上都〜90px 。 Height实际上并不调整图像本身的大小，它只是将其拉伸到较小的区域。

  

提示：使用height和width属性缩小大图像的大小将迫使用户下载大图像（即使页面上看起来很小）。为避免这种情况，请在使用页面之前先用程序重新缩放图像。

来自w3schools