eCommerce image optimization workflows with Gulp

The easiest way to start optimizing images is cloning this repository and using the tasks defined in the gulpfile.js.

You need to have installed at least NodeJS 8 (instructions for your system), and install the gulp command.

sudo npm install --global gulp

Now run the next commands on your terminal to install the software.

git clone https://github.com/abraia/workflows.git
cd workflows
npm install

And configure your free API key in the gulpfile.js.

process.env.ABRAIA_KEY = 'your_free_api_key'

Now you are ready to start processing and watching your images folder:

gulp

This configures the folder to automatically generate several image variants, which are placed in the public folder. You can easily customize the default configuration modifying the width parameter and the rename rules.

Image optimization workflows

The code include the next additional optimization workflows:

1. Optimize all the images in the origin folder.

gulp optimize

2. Generate optimized variants for each image in the origin folder.

gulp variants

3. Create high resolution JPEG images from Photoshop files in the psd folder.

gulp pristines

Compression comparison

Imagemin is the most popular option used for image compression with Gulp, but Abraia does a different job with several advantages for your business. You can easily compare results between imagemin and abraia and make your choice.

gulp imagemin
gulp optimize

Images compressed with imagemin take 7.9MB while with Abraia they take 5.3MB. Moreover, Abraia integrates resize and procesing options which simplify all your image optimization workflows.