Html 如何使二维码在显示较大时呈现清晰？

这是一个编码为“sup”的二维码：

下面是一个简单的HTML片段，用于呈现更大的：

<img style="width:400px" src="data:image/gif;base64,R0lGODdhFQAVAPAAAAAAAP///ywAAAAAFQAVAEACT4QPoRfozJpMdJrZKrY6YSgpWeVpI/ItC3l5I3eiZCxnofU+1IzvLCtSBX0bUatl+xyDmxLTxbxFnxdOVRZRoU7TnHBrDBt9xE7EBW2eRQUAOw==">

不幸的是，这在浏览器中呈现为较大的模糊图像：

我知道我可以以大分辨率重建图像。但我来自一个思想流派，认为图像不应该为了表现的目的而被放大

---

我可以做些什么来渲染这个而不模糊吗？

您可以应用CSS规则来更改缩放算法

img.qr {
  image-rendering: pixelated;
}

这有不错的浏览器支持

---

我更喜欢使用SVG来代替二维码。然后，可以将它们保存到其他地方用于其他目的。

尝试添加

图像渲染：像素化CSS样式添加到该元素。这将在缩放时保留像素

请记住，此标签有不同的跨浏览器支持，例如，Chrome和Firefox需要不同的标签才能使用。更多信息
使用
图像渲染：清晰边缘
以及firefox支持。