How to create a watch folder for image optimization

A watch folder is a directory that is specified to trigger a task when new content arrives. It can be used to automatically optimize an image when this is added to the folder.

With the Abraia Gulp plugin you can easily configure a local folder (on Windows, Mac, or Linux) to automate all your image transformations for web.

watch folder image optimization

Focus on ecommerce product and marketing images, you can:

Gulp plugin installation

To create a watch folder you need to have Node installed in your system. Once installed, we are going to create a project to configure the watch folder and the transformation rules.

Create a project folder and open a terminal inside it. Then start the project and install the gulp plugin:

npm init -y
npm install gulp gulp-abraia --save-dev

Get your free API key from the settings tab in the Abraia web console and set the ABRAIA_KEY environment variable. (NOTE: On Windows, use set instead of export.)

export ABRAIA_KEY=your_api_key

For a persistent configuration of your API key in your system, we recomend following the operation system recomendations configure a environment variable. If you do not have any security concern (personal computer), you can easily set the environment variable in your gulpfile.js, before importing gulp-abraia.

process.env.ABRAIA_KEY='your_api_key'

Watch folder configuration

Created the project folder and installed the plugin we need to create the gulpfile.js file and add the configuration. Just add the code bellow to your gulpfile.js and configure your API key to start optimizing all the images added to the folder images.

process.env.ABRAIA_KEY='your_api_key'

const gulp = require('gulp')
const abraia = require('gulp-abraia')

gulp.task('optimize', () => {
  return gulp.src('images/*')
    .pipe(abraia())
    .pipe(gulp.dest('public'))
})

gulp.task('watch', () => {
  gulp.watch('images/*', gulp.series('optimize'))
})

Configured your gulpfile and created the images subfolder, just start watching with the command bellow:

gulp watch

Now, starts adding images to the folder images and see how the web optimized result is appearing in the public folder.

Variants configuration

To generate several image variants to be used in a responsive design, you just need to specify the width of each variant and the renaming policy.

gulp.task('variants', () => {
  return gulp.src('images/*')
    .pipe(cache(abraia([
      { width: 1920, output: '1920/{name}.{ext}' },
      { width: 750, output: '750/{name}.{ext}' },
      { width: 375, output: '375/{name}.{ext}' }
    ])))
    .pipe(gulp.dest('output'))
})

To automate branding and editing operations you just need to create a template with the WYSIWYG editor in the Abraia web console.

gulp.task('variants', () => {
  return gulp.src('images/**')
    .pipe(abraia([
      { width: 750, action: 'abraia.atn', output: '{name}-brand.{ext}' }
    ]))
    .pipe(gulp.dest('output'))
})

The output name policies are defined with a syntax like Javascript ES6 template literals without $ symbol. The input file name and extension are defined as the name and ext variables. Thus:

  • To create an output subfolder you just need to prefix the name variable with the subfolder name (e.g. '750/{name}.{ext}').
  • To rename the output you can easily suffix the name variable (e.g. `{name}-thumbnail.{ext}).
  • To change the file format or to force an image type, you can replace the ext variable with the image type extension (e.g. {name}.webp).