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

Question

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

~谢谢

Answer 1

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

HTML:

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

CSS:

.img_resz img 
{
    width: 90%;
}