Today I worked on automatically processing images with webpack and gulp. I’m building a responsive image component in vue which uses the generated images.
The workflow is the following:
For the main site I use:
Image -> webpack -> resized images + srcset markup + inlined preview image
Additionally I need a preview image which is used in netlify cms when working on adding / changing content.
This preview image is created by gulp:
Image -> gulp -> dist folder: resized preview image
I use a pretty fast library here to save time in the build process. Its called sharp (see links)
For the webpack side of things I use
responsive-image-loader and in gulp I use
Actually I dont create responsive image versions with gulp, but it uses the fast sharp library :-)
Why webpack AND gulp?
Because webpack automagically creates an image object which also contains the image size. I need that. The gulp task is more “dumb” and just processes everything from its input dir to its output dir.
Working on the responsive image vue component