图片调整 HTML 比 PhotoShop 更清晰
Image resized by HTML way sharper than by PhotoShop
如果这不是要问的正确社区，我深表歉意，但我相信这与 HTML 有关，所以我在这里问。
我需要一个带有信用卡图标的小横幅（21 像素高）。
我在 PS 中制作了它并将其调整为 21px 高度（自动宽度），但我对清晰度不满意。
我现在在 HTML 中加载完整图像并使用 height 和 width 图像标签属性将其大小调整为我在 PS 中所做的相同大小，但是结果好多了。
1) 调整大小 HTML
2) 使用 PS
调整大小
Chrome 开发者工具显示两张图片尺寸相同。
为什么会有这样的差异？
浏览器只是将其显示为 21px 高，但更高 dpi 的屏幕可能会使用完整图像以使其更清晰。正如您分享的屏幕截图所示，两行实际上都是 ~90px 高。 Height 实际上并没有调整图像本身的大小，它只是将其拉伸到更小的区域。
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
如果这不是要问的正确社区，我深表歉意，但我相信这与 HTML 有关，所以我在这里问。
我需要一个带有信用卡图标的小横幅（21 像素高）。
我在 PS 中制作了它并将其调整为 21px 高度（自动宽度），但我对清晰度不满意。
我现在在 HTML 中加载完整图像并使用 height 和 width 图像标签属性将其大小调整为我在 PS 中所做的相同大小，但是结果好多了。
2) 使用 PS
Chrome 开发者工具显示两张图片尺寸相同。
为什么会有这样的差异？
浏览器只是将其显示为 21px 高，但更高 dpi 的屏幕可能会使用完整图像以使其更清晰。正如您分享的屏幕截图所示，两行实际上都是 ~90px 高。 Height 实际上并没有调整图像本身的大小，它只是将其拉伸到更小的区域。
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.