As title says, is there a way to do that in gulp? I need several images to be included in multiple picture or img srcset attributes. And this will be for asset on-the-site only (means, not user uploaded pictures).
I want to create 2 other images, one for tablet, one for mobile, using gulp-copy, but probably not recommended. I'm assuming mobile display will be between 320px-500px(width), and 500-1000px(width) for tablet.
My strategy is to optimize the image first, make that image as master, then generate 2 other images, so I always assume my source image will be for desktop (display width > 1000px). <-- if there is a task where i can pass paramaters for assuming it was other display, even better
My other challenge is the height of the image, I do not have standards (and it's very hard to make one) for each display. So if I'm assuming 100px by 800px image is a desktop one, I don't know how to calculate it for mobile and tablet.
Is there anyone that have ever done this before? Resizing image resolution in gulp?
SOLVED: with gulp-responsive-images
There seem to be several gulp tasks which are able to do this.
Why don't you take a look at these: