Javascript 通过压缩大型图像加快网页速度

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

问题是，人们添加了高分辨率（3000px*6000px）的图像，这明显降低了幻灯片的动画效果

这些高分辨率图像是必要的，但不是为了这个特殊目的，因为这些图像位于大小为（300*600）的div中

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

这样，动画就不会涉及高分辨率的图像帧，因此也不会像以前那样滞后

我能想到的唯一替代方法是，每次将图像上载到数据库时，后端都会为此目的创建一个二级压缩图像

---

然而，这似乎需要很多努力。

这是我几年前发现的一个网站，可能很有意思：

您可以在站点上存储一个小版本，以便在幻灯片中使用。这样做的一个好方法可能是检查是否有一个小图像可用，如果没有，则在第一次调用它时创建它并将其保存在某个地方

此代码将动态调整图像大小，但我认为在调整图像大小时仍会有一些延迟

$photo="sunflower.jpg"; 

$cmd = "convert $photo -thumbnail 200x200 ". 
" -quality 100 JPG:-"; 

header("Content-type: image/jpeg"); 
passthru($cmd, $retval); 

---

因为你在评论中说带宽和下载时间不是问题，下载完整的RES图像是可以接受的，将其缩小，然后将其添加到页面中，请考虑下面的解决方案。 通过AJAX下载原始图像，然后使用

ctx.drawImage

将图像绘制到更小的HTML画布上。例如，您可以拍摄一幅3000px*6000px的图像，并将其缩放到300px*600px的画布上。然后使用JavaScript释放原始图像，使其不再占用浏览器中的内存

之后，您可以使用画布来制作动画，并且不会像使用大型原始图像那样有太多的延迟（因为合成器需要移动更少的像素）

编辑：根据您稍后的评论，您的用户正在上载到外部图像托管服务，因此此解决方案将防止他们在上载完整res版本的同时上载缩略图版本

---

---

如果您选择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）。这样可以避免完全绘制到画布上。

CSS仅在浏览器中缩放客户端，因此不会加快图像下载速度。您的替代方法是处理大型图像的常用方法。通常，您会存储缩略图大小，这是一种标准的查看大小（以及原始未更改的图像（如果出于存档目的需要）。在浏览器端无法解决此问题。您需要在服务器上创建两个版本的图像，分辨率大小为Anks，以便回复。但是，问题不在于图像下载。一旦图像下载，动画就会开始。但是高分辨率图像会在速度较慢的客户端计算机上产生滞后的动画。但是由于div的大小，h-res是不必要的。所以CSS是否可以下载完整分辨率的图像，然后将其缩小，然后将其添加到网页以进行查看/动画制作？不，您需要将其存储在服务器上并生成较小的版本来显示。您可以使用CSS在视觉上缩小它，但您仍将使用原始im它是原始大小。但是既然你已经让你的用户上传图片，为什么不同时缩放它们呢？这很有意义，谢谢你的回复。我没有把图片存储在我自己的服务器上，我要求用户使用像imgur.com这样的外部图片托管服务，他们只提供链接。我想避免问他们上传2张图片。如果有一个替代的图片托管服务，它可以创建多个不同大小的图片副本，那就太好了！