Skip to content
WordPress image optimisation development workflow.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Dev Workflow for WordPress image optimization.
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais.

Dev Workflow for WordPress image optimization.

🎗 WP Image Optimizer — Getting Set up

Let's get you setup for an automated dev-workflow for WordPress image optimization.

→ STEP #1: Install NodeJS & NPM

Make sure you have node installed. If not download and install node. After installing NodeJS you can verify the install of both NodeJS and Node Package Manager by typing the following commands. This step needs to be followed only once i.e. if you don't have NodeJS installed. No need to repeat it ever again.

node -v
# v7.10.0

npm -v
# 4.2.0

→ Step #2. Download package.json & gulpfile.js

Download package.json & gulpfile.js files inside the root folder of your WordPress plugin or WordPress theme If you have cURL installed then you can run the following command to download it in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download package.json file in it).

curl -L '' -o package.json && curl -L '' -o gulpfile.js

→ STEP #3: Installing Node Dependencies

We are in the root folder of our WordPress plugin or WordPress theme at the moment, right where you downloaded the package.json & gulpfile.js files — let's install the Node Dependencies. In the terminal run this command and wait for it to download all the NodeJS dependencies. It's a one time process and can take about a minute depending on the internet speed of your connection.

# For MAC OS X run the following command with super user
sudo npm install

# For Linux run the following command
npm install

→ STEP #4: Configure gulpfile.js

Since this is an image optimization workflow. You need to configure paths to two directories.

  1. Image source or raw images directory
  2. Image destination or optimized image directory

These two can be configured by editing the gulpfile.js. Do NOT change the variable names, just the values and the types of images you want to optimize.

var imagesSRC         = './assets/img/raw/**/*.{png,PNG,jpg,JPG,jpeg,JPEG,gif,GIF,svg,SVG}'; // Source folder of images which should be optimized.
var imagesDestination = './assets/img/opt/'; // Destination folder of optimized images. Must be different from the imagesSRC folder.

In default case, here's the structure

  • Image source directory — ./assets/img/raw/
  • Image destination directory — ./assets/img/opt/

NOTE: That currently this little app has following file structure

    ├── assets
    |  └── img
    |     ├── opt
    |     |  └── cf7c.png
    |     └── raw
    |        └── cf7c.png
    ├── gulpfile.js
    └── package.json

→ STEP #5: Run Image Optimization Task

All that's left now is for you to run the image optimization task in the root folder of your WP project — where you downloaded the gulpfile.js file.

# Run Image Optimization Task.
gulp imgopt


→ STEP #6: Share!

Yup, there are no more steps. Just share it with your friends. Or Click to Tweet about it.

⚡️ Contribute

Feel free to contribute. PR's are welcomed.

📣 Changelog

Version 1.0.0

  • First version
  • Image optimization for PNG, JPG, JPEG, SVG

🗞 License

Released under GPL v2 License. Copyright Ahmad Awais.

🙌 — If 500 people signup here, I will build a video series for this.


This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →

For anything else, tweet at @MrAhmadAwais

I have released a video course to help you become a better developer — Become a VSCode Power User →


VSCode Power User Course →

You can’t perform that action at this time.