从远程服务器获取时的图像压缩
Posted
技术标签:
【中文标题】从远程服务器获取时的图像压缩【英文标题】: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://***.com/search?q=Lazy+loading+images+javascript
【讨论】:
以上是关于从远程服务器获取时的图像压缩的主要内容,如果未能解决你的问题,请参考以下文章