与页面交互时，图像质量每秒下降

Images losing quality for second when interacting with page

本文关键字：图像质量 交互      更新时间：2023-09-26

当页面以任何方式移动时-窗口大小调整、滚动、悬停，用作图标的图像会重新渲染并使侧面呈圆形，这在透明背景和圆形边框的图像上非常明显（如示例中所示），有什么方法可以解决吗？示例

<body>
    <style>
        body{
            background: black;
        }
        img{
            max-width: 5vw;
            transition: 1s ease;
        }
        img:hover{
            max-width: 6vw;     
        }
    </style>
    <img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png">

</body>

在这种情况下，当悬停时，图像将出现尖锐的边界，有些人可能会说是像素化的，几毫秒后，它将恢复到平滑的边界，给你一把小提琴http://jsfiddle.net/o3qk5uaL/

好问题！

这不是问题，而是网络浏览器如何渲染图片以及过渡的行为——你通过将图片绑定到动态窗口大小比例来重新绘制图片——图片大小正在重新计算，浏览器在你停止之前不会完全绘制。原始图片有其分辨率，当更改图片需要以新分辨率渲染时，原始图片将在原始分辨率下看起来最好，这取决于浏览器和GPU。

我找到了一个可能对您有所帮助的小方法-尝试使用SVG格式来处理那些动态更改分辨率的图标。SVG没有任何分辨率——它是一种基于XML的矢量图像格式，非常适合交互和动画

看看这个比较演示：CodePen

代码：因为我们必须…

<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png" />
<br /><br />
<img src="http://8tracks.com/assets/brand/8_icon_white.svg" />
相关文章：