How do you resize images for layout?

Question

Web development

In layout, pictures should be of the size in pixels that are displayed + they should be in different formats so that the browser can load what it can. For example, we have a picture on the disk that is 2000x2000, the site displays 1000x1000, so we need to prepare 4 images, at least this is png / jpg + webp multiplied by 1x-2x sizes, and even more gradation of sizes is better.
How to do all this automatically ,
I want it to be converted into
<img src="foo.jpg" alt="Bar" />

<picture>
   <source type="image/webp" srcset="foo-large.webp  1024w, foo-medium.webp 640w, foo-small.webp 320w"/>
   <source type="image/jpg" srcset="foo-large.jpg  1024w, foo-medium.jpg 640w, foo-small.jpg 320w"/>
   <img src="foo.png" alt="Bar" />
</picture>

with compression, resizing, automatic selection of png / jpg and putting down the necessary paths.
Is everyone doing it by hand now?

Answer 1

If you use a faucet, check out the resizing plugin for it. To optimize a huge number of plugins. And code transformation - write your own little mixin.
Upd:
For resize - gulp-image-resize
For optimization - gulp-imagemin