从远程服务器获取时的图像压缩答案

【问题标题】：Image Compression when fetching from remote server从远程服务器获取时的图像压缩
【发布时间】：2019-05-30 06:40:51
【问题描述】：

我有一个 JavaScript 客户端应用程序，它使用另一个组织的 API 来获取数据。现在有很多图片这些 url 是通过 API 发送的。

但是图像太大，即每个图像大小约为 1MB。如果我将图片 url 放在 img 标签中，那么加载时页面会变慢，因为页面渲染时需要显示数百张图片。

有什么方法可以在客户端压缩图像，因为我的 API 是提供商刚刚拒绝发送压缩图像 url。

【问题讨论】：

【解决方案1】：

这类问题的解决方法通常涉及图像的延迟加载。方法可能是：

虽然您可以在客户端压缩图像，但这不会避免从服务器下载它们（在您的情况下为 100 img = 100MB）

有很多 npm 包可以为您延迟加载组件（以及图像），例如 this

【讨论】：

【解决方案2】：

我同意 Mosè Raguzzini 的回答

并不总是建议在前端压缩图像。

您应该在发送到客户端之前压缩/优化图像。该页面很慢，因为它需要时间仅从 API 获取内容。我假设您没有使用 data:/ 来显示图像，正如您所提到的，您在图像标签中使用了 URL。

您也可以执行以下操作。

即使其他组织的 API 无法对其进行压缩，您也可以创建一些后端 API 来为您完成这项工作，或者也可以使用第三方工具。
在需要时加载图像（延迟加载）请参阅此 URL 了解更多信息https://stackoverflow.com/search?q=Lazy+loading+images+javascript

【讨论】：