#Gulp image resize how to#
#Gulp image resize install#

Depending on your requirements and the scale of your project, that resizeImages task could easily be made incremental, which would make it even faster. Just to give you an idea, all images and thumbnails for this website get generated in 38 milliseconds only. If you like numbers, check out the performance benchmarks available on their website. build = build 'Fast' is an understatementДЇor any project I have worked on lately, Sharp has proven to be the fastest and most flexible option available. compose tasks (massively simplified here)Д¬onst watch = gulp. PackagesД¬onst img = require ( './gulp-tasks/images.js' ) Д¬onst server = require ( './gulp-tasks/browsersync.js' ) Our main gulpfile.js will use that task in watchers and expose it to Gulp CLI, as part of a more complex task or not. loop through configuration array of objects We then need a Gulp task to get the images we need to resize from our src directories, apply the specified image manipulations using sharp and save them in the dist directories specified in our object. Copy one object, modify paths and options and you're good to go. Using such an object makes it easy to add new image directories and transforms should we need them down the line. Let's now create a configuration array of objects that will specify our source and destination folders for each transforms, along with our transform options for sharp.

sharp: sharp image manipulation package.

path: node package to work with files and directories.

glob: use glob patterns to find files and return them.

Let's move to creating our gulp task to resize our images.

#Gulp image resize how to#

If you want a better overview of how to use Gulp 4, have a look at this excellent article on upgrading to Gulp 4 by Joe Zimmerman or, alternatively, read my humble take on it.

Our main gulpfile.js is only used to compose complex tasks and to expose relevant tasks to the Gulp CLI using exports. That way, we can make tasks self-contained and just import or require them. In this case, here is the structure we are going to use: +- gulpfile.js Whenever I deal with complex tasks, I tend to split them into their own external files.

#Gulp image resize install#

Let's first install sharp as a dependency npm install -save-dev sharp It offers a wide range of options and operations we can use and is a whole lot faster and more flexible than alternatives like gulp-image-resize for example. Sharp is a Node.js image processing library to which we can easily use in a Gulp task. Gulp Optimizing Images - Image optimization is a function of lossy and lossless compression.Differences in image formats are due to the difference in how and which lossy and lossless algorithms are used to optimize the image. wide range of operations available (resize, rotate, masks, filters, etc.).ability to specify transforms characteristics per location.ability to specify different source and output locations.easy integration with Gulp (Node.js based).

For many projects I work on, especially JAMstack ones, having a quick way to generate thumbnails based on source images is crucial.