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

Question

我正在构建一个包含大量用户上传图片的网站(假设是 airbnb)

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

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

我发现这可以通过以下任一方式完成:

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

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

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

提前致谢!

Answer 1

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