用HTML调整图像大小比用PhotoShop更清晰

如果这不是正确的社区提问，我很抱歉，但我相信这与HTML有关，所以我在这里提问

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

ChromeDeveloper工具显示两个图像的尺寸相同

---

为什么会有这样的区别呢？

浏览器只显示21px高的图像，但dpi更高的屏幕可能会使用完整图像使其更清晰。正如在您共享的屏幕截图中所示，这两行实际上都高约90像素。高度实际上并没有调整图像本身的大小，它只是将图像拉伸到一个较小的区域

提示：使用“高度”和“宽度”属性缩小大图像会强制用户下载大图像，即使它在页面上看起来很小。为了避免这种情况，在页面上使用图像之前，请使用程序重新缩放图像

---

从

您使用了什么样的重采样？如果使用Ctrl+Alt+I调整大小，则可以选择重新采样。有几个选择，有些是增加或减少大小的最佳选择。我猜您使用的是buibic sharper而不是Smooth，反之亦然。@Lincoln嗯，我确实使用了Ctrl+Alt+I，但根据我的经验，它是自动指定的，“自动”的效果不如更专业的选项好。我也经历过很多次同样的事情——我也尝试过在Photoshop元素中使用不同的调整大小/重采样技术，但当我让浏览器调整大小时，结果总是更好。我的最佳猜测是，浏览器对待小图像的方式与PS不同，同时，当有机会从原来更多的像素进行重新采样/优化时，浏览器能够更好地以最适合浏览器自身的方式放置像素。虽然这种情况对我来说甚至听起来很奇怪是的，但我读到，当图像缩小时，图像质量下降的原因是因为像素较少——因为无论是在Photoshop中还是在CSS中，两者都以相同的大小显示，所以它们在显示的区域中应该有相同数量的像素，对吗？另外，这两幅图像在屏幕上以相同的dpi观看-那么为什么在质量上存在差异呢？为什么我们不能通过像Photoshop这样的程序来调整CSS的大小来保持图像的质量和大小呢？