javascript - HTML如何以较低的质量加载图像

Question

所以我有一个图像（PNG 文件），我想相对于我的网页缩放 90%。然而，这个 PNG 文件非常大，所以当它被缩放时，不仅加载需要几秒钟，而且它会占用 RAM（我的电脑已经警告我它内存不足）。在那种情况下，我不需要所有这些图片质量，那么如何让图像以较低的质量渲染（以加快加载时间），同时保留缩放比例而不改变原始文件？

~ 谢谢

Answer 1

您可以仅使用 HTML 和 CSS 按比例缩放图像，但浏览器仍会将整个图像加载到内存中。您需要使用一些照片编辑软件将图像的分辨率和图像格式更改为 JPEG，它具有比 PNG 图像格式更好的压缩算法。

HTML：

<div class="img_resz">
    <img src="img.jpg">
</div>

CSS：

.img_resz img 
{
    width: 90%;
}

Answer 2

HTML 无法加载“质量较差”的图像。如果您希望图像加载速度更快，则需要使用图像编辑软件，因为浏览器会先以全画质加载它，然后再按比例缩小。