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

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

但是，图像太大，即每个图像的大小约为1MB。如果我将图像url放在

img

标记中，则加载时页面会变慢，因为页面渲染时需要显示数百个图像

---

有没有办法在客户端压缩图像，因为我的API提供商刚刚拒绝发送压缩图像URL。

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

• 仅加载视图框架中的图像，等待加载下一个图像，直到滚动到达它们
• 按需加载图像（单击、悬停等）

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

---

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

我同意MosèRaguzzini的回答

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

在发送到客户端之前，您应该压缩/优化图像。页面速度很慢，因为只从API获取内容需要时间。我假设您没有使用“使用数据显示图像”：，正如您提到的，您正在图像标记中使用URL

您也可以执行以下操作

即使其他组织的API无法对其进行压缩，您也可以创建一些后端API来为您进行压缩，或者也可以使用第三方工具

在需要时加载图像（延迟加载），请参考此URL了解更多信息

---

不，你不能在客户端这样做。它必须在服务器端完成。