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).

Watch folder for video encoding

Video encoding for web is a common task that requires some technical knowledge about video compression. Moreover, it has several consecuences over the web performance, demanding automation for a right video optimization process.

Now, using the Abraia gulp plugin it is easy to configure a watch folder and get all your videos optimized every time you add a new one to a folder. You just need to follow the guide bellow to perfectly optimize your videos without freezing your computer (a new task performs in the cloud every time). Moreover, you are not going to worry about the encoding parametrization thanks to Abraia provides the best encoding settings for every major web format (MP4, WEBM, HEVC, HLS).

Create a gulpfile.js file and add the configuration bellow to start watching the videos folder. Every time you add a video to the watch folder, an encoding task is launched on the cloud. Remember to configure your API key at the start of the gulpfile.js.

process.env.ABRAIA_KEY='your_api_key'

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

gulp.task('variants', () => {
  return gulp.src('videos/*')
    .pipe(abraia([
      { height: 720, output: '{name}-720p.mp4' },
      { height: 720, output: '{name}-720p.webm' }
    ]))
    .pipe(gulp.dest('output'))
})

gulp.task('watch', () => {
  gulp.watch('videos/*', gulp.series('variants'))
})

You can easily generate perfectly optimized short videos in different formats and sizes, including padding and cropping options, and even overlay images and text (e.g. watermarking, branding).

To get your configuration, use the Abraia console and download the variants configuration from the bulk tool. Then, just use the donwloaded configuration to update your waching folder.

gulp watch

Remember that Abraia only works with short videos (up to 5 minutes) with an initial maximum file size of 100MB. We are focus on ecommerce, marketing, social media video formats.