How to reduce the image size on your website

Youssuf Abramo

• January 25, 2022
• 4 min read
• Optmization
• optmization optmize images performance wordpress

How to reduce the image size on your website

Introduction

Photos are one of the most critical factors that make your page slow, so there are specific tips that you should follow to reduce the size of the picture as much as possible.

Take into consideration, and this article is not talking about performance in general. It is just a way of many ways to improve your website performance.

Factors that determine the size of the image

Initially, some factors determine the size of the image in general, whether on the web or otherwise, namely:

1. The dimensions of the image
2. Image quality
3. Presentation formula
4. Number of colours in the picture

Ways to reduce image space

We will use several methods to play on these above factors so that we reduce the size of the image and at the same time not reduce its quality noticeably.

We will mention in this article three effortless ways, and you should read them all because at every point I will say information, not in the second point:

1. Editing the image with Photoshop
2. Editing images using online
3. Use of Plugins

1- Method 1: Editing the image with Photoshop:

Either you design your picture or download it from Google put it on Photoshop, and make it   save for the web, do not press on save as, and to do this, you will step on the abbreviation Ctrl+Alt+Shift+S on the keyboard, or you will go to file and save for web

You will find an extensive list that was opened for you. You will choose the image version jpg/jpeg because this is one of the most formulas that does not take up space. Ok, what should I do if I have an icon, for example, or a transparent image? You will make it background with the same background present in the site to avoid the PNG formula entirely because it takes a huge space.

And then, you will choose the dimensions of the picture precisely on the size of the Div or box that you will use the image in so that it does not make more pixels than what is available.

And then, you will play in the quality and start to decrease gradually until you find the quality was affected significantly. It will stop and return it to the last quality. The picture was not distorted at it and trample Save, and that is it.

2- Method 2: Edit photos using online:

You will take your picture and go to any website to change dimensions. The wording of the images and make the dimensions the exact dimensions of the div, and make the formula jpeg/jpg, and then you will go to a site called www.compressor.io. and upload the picture and download it there, and this is the easiest and most beautiful way, and I use it, and it is worth mentioning that it reduces the area up to 50% and more hours and also has a tool that makes you work compare  Between the old and the new picture and there is no difference at all noticeable to the extent that you can be confused in the first place.

3. Method 3: Using Plugins:

There is the last method through plugins. And this is its advantage: it does everything alone without hurting your brain with all this. Once you download the Plugin, you optimize or resize, and thanks and every time new pictures come down, you will go and do it optimize with the click of one button, and that’s it…

And these are the most famous committees that make this topic:

1- Smush.

2- Optimus.

3- EWWW Image Optimizer.

4- ShortPixel Image Optimizer.

5- Compress JPEG and PNG Images.

6- Imsanity.

7- Imagify.