How to Optimize Images For Your Website

Images tend to be the cause of huge bandwidth consumption on modern websites, so knowing that and how to optimize images can save you a lot of money and time. There are 3 ways you can use to optimize your image:

• WordPress optimizing plugins. (Mostly Paid)
• Websites for Optimizing Images. (Freemium)
• Optimizing Images Using JS Libraries. (Free)

Optimizing Images Using JS Libraries

Optimizing Images through writing a simple JS script is free and easy and my choice which I use on most of my posts and pages. JS libraries can scale easily you can optimize hundreds of images with just a few lines of code at -almost- no cost.

There are many JS libraries for optimizing images out there but we will focus on Imagemin which is the most popular and used, Imagemin is open source JavaScript Library and easy to use, and with great documentation.

• Imagemin

Imagemin requires Node.js to be installed on your Operating System, which you can download below. ( I recommend downloading and installing the stable version for your operating system ).

Imagemin

Imagemin package is a great choice for optimizing your images, with a simple script you can crop, resize, and compress your images to reduce the size of images, reducing webpages size.

Using Imagemin package is very straightforward and simple, you can go through its documentation and available options here.

The first step to using Imagemin after installing Node.js is to install the packages that we are going to use.

Now, create a Folder for optimizing images.

Open your command line terminal in this folder, -I use Gitbash– then run the following command

npm install imagemin imageminJpegtran imageminPngquant imageminWebp

Or you can replace npm install with yarn add if you have yarn in your system.

yarn add imagemin imageminJpegtran imageminPngquant imageminWebp

It will take a minute to finish installing the packages, and there should be [node_modules]folder.

Now we will create a file (index.mjs) to write up our code for optimizing images.

1- Include the packages

import  imagemin from 'imagemin';
import  imageminJpegtran from 'imagemin-jpegtran';
import  imageminPngquant from 'imagemin-pngquant';
import imageminWebp from 'imagemin-webp';

2- Add code for optimizing the images

(async () => {
	const files =  await imagemin(['images/*.{jpg,png}'], {
		destination: 'output',
		plugins: [
			imageminWebp(
				{
					quality: 80,
				}
			)
		]
	});

    console.log(files);
    console.log('Images optimized');
})();

3- Create a folder inside the same directory named (images) which will include your original images.

4- Save the file and then from the terminal run the following command

node index.mjs

5- New folder named (output) should appear -as per our code you can change it from the destination – containing the optimized images which will be formatted WebP.

If you want to use the Code we use for our optimizing Image on Imagemin you can find the code here.

Testing Optimizing Images

Now that you’re familiar with how to optimize images using Imagemin. I will display some results Before and After optimizing my images on one of my pages.

Wadi Gallery Grid for Elementor Page is basically a page full of images and videos so having optimized images is a necessity.

Before Optimizing Images Results

Using tools.pingdom.com here are the page results before images optimization

Page size is 11.3 MB and Load time is 3.37 seconds.

Images size takes the lion’s share of the page size more than 90% percent of page size is images!. Images take 10.2 MB of the total page size. That is why image optimization is necessary for any modern website that relies on images to create appealing web pages.

After Optimizing Image Results

Now after doing the images optimization process using Imagemin and covert all images to WebP format here are the results

As you can see the web page size dropped from 10.2 MB to 3.6 MB by just doing image optimization which doesn’t take more than 5 minutes after the initial setup of Imagemin!

Images now take about 72% of the web page size from more than 90% of the page size before images optimization – considering that Gallery Grid for Elementor demo page is a gallery for media images and videos I think it is very reasonable- that is a good improvement on a web page.

Conclusion

As you can see, image optimization for web pages is a necessity for every aspect of your website, whether to have a faster page for your users or better SEO that will help your web pages to rank on Search.