Html 意外图像模糊

我有一个WordPress网站，它的徽标有问题
如果你要在桌面（而不是视网膜）上查看， 加载后会模糊，但放大和缩小后，其外观会变得正常

---

源图像的高度为100，高度为50，为什么会变得模糊？

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

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

“图像渲染”属性定义了如果从原始尺寸放大或缩小图像，浏览器应如何渲染图像

可能的值为：自动|清晰边|像素化

---

像素化

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

我相信是原始图像分辨率造成了此值

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

---

当图像大于设置为50px时，浏览器会将图像缩小到该大小。在很多情况下，结果并不好，在某些浏览器（如Chrome）中甚至可能更糟。最终会出现模糊或锯齿状边缘。由于您仍然需要视网膜支持，您应该尝试使用两个图像，一个较小的图像具有50像素的高度，用于非视网膜，另一个用于两倍大的视网膜。您必须为此修改代码：

你可以

例如

这个问题（现在的措辞）在5年内会有多大价值？你确定你提供的链接的内容永远不会改变吗？你的问题只有一个答案，甚至不是StackOverflow的要点。已更新帖子。OP已删除指向存在问题的原始网站的链接。不正当地利用平台和浪费人们的时间。不起作用。模糊已消失，但渲染图像看起来比原始图像差得多。

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

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