Image optimization is one of the best ways to make your site speedy and lightweight. Because images are one of the largest aspects of your site, it’s important that you know how to properly optimize them. Visitors will leave your site if it takes too long to load.
So, the fact of the matter is that you need to keep image sizes small and use them sparingly, and that’s why optimization is so important.
This process can be tedious, so here is how you can do it automatically using NPM Scripts and Gulp.
Image Optimization in WordPress
Image optimization means that you are using the most compressed yet visually acceptable image in the proper file format for your blog posts. Speeding up your site with image optimization brings in several benefits like:
- Less bandwidth usage.
- Preventing a high bounce rate.
- Creation of quick and smaller backups for your site.
- Increased conversion rates.
- Improved SEO — which means rewards from the search engine like Google which loves speedy sites.
WPImgOptimizer — NPM Scripts & Gulp
If you’re like me and enjoys having as much control as possible over the images in the dev-workflow then, you should optimize your images manually. There are several ways of doing it for formats like JPEGs, SVGs, and PNGs. However, I recommend automatic image optimization using NPM Scripts and a Gulp workflow. For that, I’ve built a WPImgOptimizer which is an easy to use WordPress image optimization development workflow. Let’s take a look at how it works.
Before moving forward I recommend you to follow the GitHub repository for WPImgOptimizer! As it will help you keep up with the updates and also its a way of appreciating the project.
Getting Started with WPImgOptimzer
To start optimizing images with WPImgOptimzer, you’ll need to make sure that you have NodeJS installed. This follows a series of steps which are as follows.
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, 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 'https://git.io/wpimgoptpkg' -o package.json && curl -L 'https://git.io/wpimgoptgfjs' -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:
- Image source or raw images directory
- 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
Your Turn
When you are developing your theme or doing just about anything that involves images, it’s my recommendation that you use WPImgOptimizer to automagically optimize your images for better performance.
Spending time on grunt work like this is never ideal. Most of us end up not optimizing images at all, and that means — slow site load speed which in turns costs your visitors, business, search engine rankings, and all sort of things.
As usual, don’t hesitate to leave any questions or comments below, and I’ll aim to respond to each of them.
No Comments