通过压缩大图像加速网页答案

【问题标题】：Speed up web page by compressing large images通过压缩大图像加速网页
【发布时间】：2016-04-13 15:42:19
【问题描述】：

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

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

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

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

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

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

但是，这似乎需要很多努力。

【问题讨论】：

CSS 仅在浏览器中缩放客户端，因此不会加速图像下载。您的替代方案是满足大图像的常用方式。通常，您会存储缩略图大小、标准查看大小（如果需要存档，还可以存储原始未更改的图像）。
浏览器端没有办法解决这个问题。您需要在服务器上创建两个版本的图像，分辨率分别为大和小
感谢您的回复。但是，问题不是图像下载。下载图像后，动画开始。但高分辨率图像会导致慢速客户端计算机上的动画滞后。然而，由于 div 的大小，不需要高分辨率。那么 CSS 是否可以以全分辨率下载图像，然后将其缩小，然后将其添加到网页以进行查看/制作动画？
不，您需要将它们存储在服务器上并生成较小的版本来显示。您可以使用 CSS 在视觉上缩小它，但您仍将使用原始大小的原始图像。但既然您已经让您的用户上传图片，为什么不同时缩放它们呢？
有道理，谢谢回复。我没有将图像存储在我自己的服务器上，我要求用户使用 imgur.com 之类的外部图像托管服务，他们只是提供链接。我想避免要求他们上传 2 张图片。如果有替代的图像托管服务可以创建多个不同大小的图像副本，那就太好了！

标签： javascript jquery html css image

【解决方案1】：

由于您在 cmets 中说带宽和下载时间不是问题，并且可以下载完整的 res 图像，将其缩小，然后将其添加到页面中，因此请考虑以下解决方案。

通过 AJAX 下载原始图像，然后使用ctx.drawImage 将图像绘制到尺寸更小的 HTML 画布上。例如，您可以获取 3000px*6000px 的图像并将其缩放到 300px*600px 的画布上。然后使用 JavaScript 释放原始图像，使其不再占用浏览器内存。

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

编辑：根据您后来的评论，您的用户正在上传到外部图像托管服务，因此此解决方案将阻止他们除了上传完整版本之外还必须上传缩略图版本.

如果您选择 Imgur.com，就像您在 cmets 中考虑的那样：它们允许您在 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 用于大型版本（注意 s、m 和 l在 URL 的末尾）。这样您就可以完全避免绘制到画布上。

【讨论】：

【解决方案2】：

这是我几年前发现的一个可能感兴趣的网站：http://sneak.co.nz/projects/img-resizing/

您可以在您的网站上存储一个小版本以用于幻灯片。执行此操作的一个好方法可能是检查一个小图像是否可用，如果没有，则在第一次调用它时创建它并将其保存在某个地方。

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

$photo="sunflower.jpg"; 

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

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

【讨论】：