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

Question

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

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

有什么方法可以在客户端压缩图像，因为我的API是提供者刚刚说不发送压缩图像URL。

Answer 1

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

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

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

有许多npm软件包可以为您延迟加载组件（因此也可以加载图像），例如this

Answer 2

我同意MosèRaguzzini的回答

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

您应先压缩/优化图像，然后再发送到客户端。该页面很慢，因为它花费时间仅从API获取内容。我假设您没有使用data：/来显示图像，就像您提到的那样，您正在使用image标签中的URL。

您也可以执行以下操作。

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