意外的图像模糊

Question

我有一个WordPress网站，该网站的徽标有问题。
如果您要在台式机（而非视网膜）上查看它， 在按比例放大后加载BUT后，它会变得模糊，并且按比例缩小外观是正常的。
源图像的高度为100，高度为50，为什么会变得模糊？

Answer 1

我相信是由原始图像分辨率造成的。

优化图片的实际大小会解决您的问题，我相信或将自定义CSS设置为以下（使用当前图片大小）：

.nm-header-logo img {
    height: 51px;
}

Answer 2

当图片大于您设置的50像素时，浏览器会将图片缩小到该尺寸。在很多情况下，效果并不理想，在某些浏览器（例如Chrome）中甚至可能更糟。最终会导致边缘模糊或参差不齐。由于您仍然需要视网膜支持，因此您应该尝试使用2张图片，一个较小的图片具有50px的高度，将为非视网膜加载，另一张则为视网膜的两倍。您必须为此修改代码：

您可以use this method here.

例如

<img srcset="logo-twice-as-big.jpg 2x"
     src="logo-normal-size.jpg" alt="Logo">

Answer 3

尝试将此属性添加到图像中。

.nm-header-logo img {
    image-rendering: pixelated;
}

image-rendering属性定义浏览器在按原始尺寸放大或缩小图像时应如何渲染图像。

  

可能的值为：auto |脆边|像素化

pixelated：随着图像尺寸的改变，浏览器将通过使用最近邻缩放来保留其像素化样式。此值仅适用于放大的图像。