我的网页上有一个博客幻灯片，可以访问给定网址的图片。
问题是，人们添加大量分辨率（3000px * 6000px）的图像，这会显着减慢幻灯片的动画效果。
这些高分辨率图像是必要的，但不是出于这个特定目的，因为图像存在于一个大小（300 * 600）的内部
在缩小之前，CSS（或其他方式）是否可以将图像转换为较小的指定分辨率（例如300px * 600px）。
这样动画就不会涉及高分辨率的图像帧，所以它不会那么迟钝。
我能想到的唯一选择是，每次在数据库上上传图像时，后端都会为此创建一个二级压缩图像。
然而，这似乎付出了很多努力。
答案 0 :(得分：1)
由于您在评论中说带宽和下载时间不是问题，并且可以下载完整的res图像，将其缩小，然后将其添加到页面，请考虑以下解决方案确切地说。
通过AJAX下载原始图像，然后使用ctx.drawImage将图像绘制到尺寸小得多的HTML画布上。例如，您可以拍摄3000px * 6000px图像并将其缩放到300px * 600px画布上。然后使用JavaScript释放原始图像，以便它不再占用浏览器中的内存。
之后，您可以使用画布来制作动画，并且不应该像使用大型原始图像那样滞后（因为合成器需要移动更少的像素）。
修改：根据您之后的评论，您的用户正在上传到外部图片托管服务，因此此解决方案将阻止他们上传除完整版本之外的缩略图版本
如果您选择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）。这样你就可以完全避免画到画布上。