Hello, My name is Cuong, I’m a Magento Developer, Welcome back to my Magento 2 tutorial video series. #magento2tutorial #magento2training #magento2 #magento2optimize
Today, I am going to show everybody the best practice, How to optimize images in Magento 2.
This practice is a part of the series named “Magento 2 Website Optimization”, you can see this playlist here
Before doing this practice, you need to learn Why do you need to optimize images?
It helps to improve the following:
1. Reducing the size of a webpage: When optimizing images you reduce the size of an image without losing image quality.
2. Reducing bandwidth usage on the server.
3. Reducing the load times on the website.
4. Speed up your site, friendly with the search tools.
In this practice, I show everybody the best way to optimize images using the gulp-image npm package with NodeJs on Ubuntu 16.04, the process will be executed by command lines, we won’t write the codes for this practice.
– Check the version of Ubuntu on your server: cat /etc/*release
I am using Ubuntu 16.04.
So what will we do?
1. Installing the necessary software: NodeJS 6.x, libpng-dev, libjpeg-dev, build-essential, cmake, libtool, autoconf, automake, m4, nasm, pkg-config, libpng16-devtools
2. Installing the necessary npm packages: gulp-cli, pngquant-bin, jpegtran-bin, optipng-bin, gifsicle, mozjpeg
3. Using the gulp-image package to optimize images in Magento 2.
I use the gulp-image npm packge because it helps to optimize images without losing image quality.
Okie, let’s go.
Let’s complete this practice you need to follow steps by step:
Step 1: Installing the necessary software
– NodeJs 6.x:
curl -sL | bash –
apt-get install -y nodejs
– Check the NodeJs and npm version just installed:
– Install other softwares:
apt-get install libpng-dev libjpeg-dev build-essential cmake libtool autoconf automake m4 nasm pkg-config
apt-get install libpng16-devtools
Step 3: Optimizing images
– Move to the root folder on your website.
– Create the new folder gulp-image: mkdir gulp-image
– Move to the gulp-image folder.
– Create the new file package.json
– Installing the npm packages the gulp version 3.9.1 and the gulp-image version 4.3.0: npm install –save-dev gulp@^3.9.1 firstname.lastname@example.org
– Create the new file named gulpfile.js
const gulp = require(‘gulp’);
const image = require(‘gulp-image’);
– You can see other options of this npm package here:
– For now, I will optimize product images in the folder named cache: gulp default
Step 4: Test and See the results
– Go to the storefront.
We will check the size of this folder before and after optimizing the image files.
Run the command line: du -h the folder named
Before optimizing the image files is 265 MB
Please wait for a moment. This will take much time.
Why we shouldn’t optimize the product original images?
Because Magento will generate the images into the folder named cache from the original images and displaying them on the storefront.
After Magento generated the images the file size will be changed again. So we only work on the folder named cache for the product images.
I suggest you should use the crontab for running the optimization images by schedules.
once a day.
When having new products, Magento will generate more product images in the folder named cache, so we must optimize these images. That is the reason, why I suggested using the Cron job for running the command line “gulp default”
This tool is working perfectly. It reduces the size of images without losing images quality. So I show everybody using this tool for optimizing images in Magento 2.
Thanks for watching the guide. If you have any questions about this practice, please feel free to leave a comment below.
Don’t forget to like, comment, share my videos and subscribe to my channel for getting the latest lessons.
Please do not hesitate to contact me, if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.