压缩和调整用户上传的图像

Question

我正在建立一个包含大量用户上传图片的网站（假设是 airbnb）

到目前为止，该网站会将您提交的任何图像上传到亚马逊 s3，然后相应地显示。有时这些图像太重，会增加页面加载时间。

我想将此图像调整为所需的分辨率并尽可能压缩（转换为 jpeg）以缩短加载时间并减少流量。

我发现这可以通过以下方式完成：

• 创建 HTML 画布，在浏览器中进行相关转换，然后上传。
• 将图像上传到服务器，然后运行一些后端任务以减小大小和压缩。

每种方法有什么好处？哪个最常见？在每种情况下我应该考虑什么？

我的堆栈目前是 node.js / angular。我暂时不打算使用 CDN，因为该项目处于开发阶段

提前致谢！

Answer 1

您需要安装 imagemin 并将其添加到您的 grunt 任务中，这里有一个链接供您使用 https://github.com/gruntjs/grunt-contrib-imagemin 祝你好运。

Answer 2

作为记录，我发现最简单的解决方案是加载用户在 html5 画布中选择的任何图像并将其转换为 jpeg，然后上传 jpeg 并在后端我将使用节点 imagemagick 包调整它的大小.

通过在前端转换为 jpeg，您可以最大限度地减少上传时间，同时不会损失性能，还可以规范后端服务的输入格式。