为什么图像在浏览器中会被放大，以及如何避免这个问题？

Question

为什么这些图像在现场（在线）不清晰？为什么他们要放大？

在线：

这些看起来也应该很脆，但它们被放大了：

这是比较：

在此屏幕截图的右侧，我们可以以某种方式看到它们应该是什么样子：

下载它们或在新的浏览器窗口中打开它们，您将看到：

我的屏幕分辨率数据：

如果重要的话，我使用的浏览器是Edge，但我拥有的所有浏览器都会发生同样的情况（包括Chrome、Firefox、Opera等）

我需要将 png 转换为 svgs 吗？

这是我的片段：

#szabvanyossag img {
  border: none;
  width: 80px;
  height: 15px;
  vertical-align: middle;
}

<span id="szabvanyossag">
<a href="https://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img src="https://i.sstatic.net/JpLU85h2.png" alt="érvényes CSS3!"></a>&nbsp;<a href="https://validator.w3.org/check?uri=referer" target="_blank"><img src="https://i.sstatic.net/JfXymTp2.png" alt="érvényes HTML5!"></a>
</span>

Answer 1

CSS 图像渲染

来自MDN：

auto

缩放算法取决于 UA。从版本 1.9 (Firefox 3.0) 开始，Gecko 使用双线性重采样（高质量）。

...

crisp-edges

使用“最近邻”等算法对图像进行缩放，以保留图像中的对比度和边缘。通常用于像素艺术或线条图等图像，不会发生模糊或颜色平滑。

...

默认为

auto

。

一般来说，由网络作者指定更好的 CSS。

在 Firefox 中，可以使用 userContent.css 定义不同的浏览器默认值，这是 userChrome 鲜为人知的兄弟。我不相信 Chromium 浏览器有类似的功能。