Gulp:从一个图像生成多个图像以自动进行多重显示?

时间:2015-08-31 05:55:37

标签: image gulp retina-display srcset gulp-imagemin

正如标题所说,有没有办法在gulp中做到这一点?我需要将多个图片包含在多个pictureimg srcset属性中。这将仅适用于现场资产(手段,而不是用户上传的图片)。

我想创建2个其他图片,一个用于平板电脑,一个用于移动设备,使用gulp-copy,但可能不推荐。我假设平板电脑的移动显示器介于320px-500px(宽度)和500-1000px(宽度)之间。

我的策略是首先优化图像,使图像成为主图像,然后生成2个其他图像,因此我始终假设我的源图像将用于桌面(显示宽度> 1000px)。 < - 如果有任务,我可以通过参数来假设它是其他显示,甚至更好

我的另一个挑战是图像的height,我没有每个显示器的标准(并且很难制作标准)。因此,如果我假设100px乘800px图像是桌面,那么我不知道如何计算移动设备和平板电脑。

有没有人曾经这样做过?在gulp中调整图像分辨率的大小?

已解决:使用gulp-responsive-images

1 个答案:

答案 0 :(得分:3)

似乎有几个能够做到这一点的gulp任务。

为什么不看看这些:

https://www.npmjs.com/package/gulp-responsive

https://www.npmjs.com/package/gulp-responsive-images