javascript - 通过压缩大图像来加快网页速度

Question

我的网页上有一个博客幻灯片，它从给定的 url 访问图像。

问题是，人们添加的图像分辨率很高 (3000px*6000px)，这会明显减慢幻灯片的动画速度。

这些高分辨率图像是必需的，但不是为了这个特定目的，因为图像位于大小为 (300*600) 的 div 中

在缩小之前，CSS(或其他方式)是否可以将图像转换为更小的指定分辨率(比如 300px * 600px)。

这样动画就不会涉及高分辨率图像帧，因此不会那么卡顿。

我能想到的唯一替代方案是，每次将图像上传到数据库时，后端都会为此创建一个辅助压缩图像。

然而，这似乎很费力。

Answer 1

既然您在评论中说带宽和下载时间不是问题，并且可以接受下载全分辨率图像，将其缩小，然后将其添加到页面，请考虑以下解决方案，它正是这样做的。

通过 AJAX 下载原始图像，然后使用 ctx.drawImage 将图像绘制到尺寸小得多的 HTML Canvas 上。例如，您可以将一张 3000px*6000px 的图像按比例绘制到 300px*600px 的 Canvas 上。然后使用 JavaScript 释放原始图像，使其不再占用浏览器内存。

之后，您可以使用 Canvas 制作动画，并且不会像使用大型原始图像那样出现延迟(因为合成器需要移动的像素少得多)。

编辑:根据您后来的评论，您的用户正在上传到外部图像托管服务，因此该解决方案将避免他们在全分辨率版本之外还必须上传缩略图版本.

---

如果您选择 Imgur.com，就像您在评论中考虑的那样:它们允许您稍微修改 URL 中的图像大小。例如，如果您在 https://i.imgur.com/9ZC02Os.jpg 有一张图片，您可以使用 https://i.imgur.com/9ZC02Oss.jpg 用于小版本，https://i.imgur.com/9ZC02Osm.jpg 用于中版本，https://i.imgur.com/9ZC02Osl.jpg 用于大型版本(注意 URL 末尾的 s、m 和 l)。这样您就可以完全避免在 Canvas 上绘图。