Do you wanna learn image optimization for web and how to optimize images without losing quality? well, you are in the right place. In this article, we will completely teach you how you can optimize images for web. In this method, we will be using python. Don’t get worried after hearing the name of python. It isn’t going to be technical at all.
It’s just a simple method which helps you compress photo size to increase your website performance. Compressing images for web is a little bit of tricky work. There are different ways of optimizing an image:
1. Decreasing the resolution or size of an image:
Sometimes there is a need for decreasing the resolution or size of images for image optimization for web. Usually, the images taken from DSLR or other high-quality camera ranges from 3 to 4 thousand pixels, which is not suitable in order to use the images in a website. So if you decrease the image’s pixels up to 1200 or 1300, it will optimize images for web and also the quality of the image will not be affected.
2. Changing the format of the image:
Normally the PNG or BMP formats use to be larger in size and affect image optimization. So if you become able to change image formats to JPEG or WebP, that will be cool and will help you in image optimization.
3. Decreasing the quality:
Usually, while saving the photo in different photo editing software, they ask you to set the image quality. If you’re going to use the photos for printing, then the big image size is OK. But if you don’t have to use the images for printing then you can decrease the size by making variations in image quality and it will help you a lot in compressing images for web.
But if you will decrease the image size beyond a certain limit then it will make your image pixelated. So the thing is to optimize image without making it look bad. And that’s what we are exactly going to do in this article.
In this article, we will be using a programming language named as Python to optimize images for web. You don’t need to worry after listening to the word programming, because it’s going to be very simple.
So firstly, you will have to visit Python. After visiting you will see a screen shown below. Then under the header section, you have to hover over the download and then you have to click on python 3.9.0 or whatever the version it will be. And then it will start downloading the python. If you’re using macOS, then you will have to go to the macOS under the download section and download it.
Please read this installation process carefully because its the most important step and the main thing to optimize images for web. After clicking the file which you have downloaded recently, you will see a pop-up like this:
Here you first have to check the box “Add python 3.9 to the path” and then you will have to click on “custom installation”. After “clicking custom installation” you will see a pop-up like this:
Just make sure that all the checkboxes are ticked and then click on “Next”. After clicking “Next”, you just have to click on “Install” and your pc will start installing python. Then you will have to go to the search option given in the taskbar and here you will have to search for “cmd”. You will see a programme named “command prompt”. Just right click on it and then click on “Run as an administrator” as shown in the below picture.
After that, you will see a screen like this:
Here you will have to type “pip3 install pillow optimize-images” and then hit the “enter” button. It will start downloading some files like below. And sometimes it asks for upgrading as shown in the below picture in this case:
All you need to do is to copy the text that it’s showing in inverted comma(green colour) and paste it in the empty below the line (as shown in the below image) and then hit enter:
Then again you have to write the line”pip3 install pillow optimize-images” and press enter and it will install the pip. Now let’s compress images for website. For Example, I have four images in a folder (as shown below in an image) and I want to optimize images for website.
For that, I will type “pushd E:\New folder\image to be optimized”and then I will press “enter”. Here “pushd” is basically a command while the text after “pushd” is the address of folder which is highlighted in the above image. The work that this command will do is that it will change our directry from “system32” to the folder whose address we have entered in the above command as it is shown in the below image:
Now to do image optimization for web, we have to type “optimize-images ./” and press “Enter”. Basically this command will compress all the images present in this folder as shown below:
Now we have reduced those images size upto 2.5 mb. In order to do further image optimization for web, we will resize them. For that we will type “optimize-images ./ -mh 700” and will press “enter”. This command will reduce resize the height of all images to 700 as shown below:
Now as you can see that we have further optimize images for website reducing size to upto 6.3mb. In order to further compress images for website, we will do the same with the width of images. For that we will type “optimize-images ./ -mw 800” and then will press “enter” This command will reduce the width of images to 800 and will help us in further compressing images for web as shown in image below:
This command has further compress images for website and we have saved 38.5kb further. So by using this method, we have reduced the size of images from 8.9mb to 231.6kb. So in this way you can efficiently optimize images for website. These were only four images. You can optimize upto hundered or thousands of images by this simple method and it will not affect the quality of images(100 % Guaranteed).
Recommended Articles For You: