When you start an independent website, you may not upload any product pictures, but for some large customers, if you have many products, you will need to upload a lot of pictures. At this time, it will affect your server. The pressure is very high. And if you do not compress the size or quality of these images, your website’s loading speed will be conceivable and even slower.
Factors affecting independent station loading speed;
Under normal circumstances, the speed of our independent station is related to three factors.
Server and network environment;
When you buy a virtual cloud host, it is completely different from a VPS, both in terms of its running speed and the amount of storage. Therefore, the VPS is generally faster than the cloud host.
Program code layer;
For example, the WordPress program, theme plug-in, etc., we use the faster theme you use; for example, we use the Astra theme, which is the fastest theme. If you use this theme and the Avada theme, you will see that The opening speed of independent stations is different.
Independent website materials;
When operating independently in the later stage, are our pictures standardized? For example, the pictures we upload to the shop are normally 800×800. If you want to be more high-definition, it is 1080×1080, but you cannot use a few M Pictures; in this case, your page loading speed will be very slow. So, to process such pictures, as long as you know some simple Photoshop, you can compress them or adjust their size.
Our previous site has been running for a while, and our images were not compressed. What should we do now?
We have two methods. The first method is to re-download the pictures uploaded by the independent site before processing them and then uploading them again. The workload is no problem for some newly opened sites.
WP Smush Pro plug-in installation;
It is very troublesome for some large websites whose workload is huge, so at this time, we need to use some plug-ins to batch compress the images we have uploaded, which is the plug-in WP we are sharing with you today. Smush has a PRO version, and of course, it also provides a Chinese package. Now, we go directly to our backend, find plugins, add new ones, then upload the files we prepared and install WP Smush Pro.
After the installation is successful, we can activate the plug-in.
WP Smush Pro plug-in settings and use;
Now that the plug-in is activated, we can see some settings of the WP Smush Pro plug-in in the function button on the left. Setting it is mainly for our backend. The main impact of the front-end is our loading speed, so it will not Add some extra functionality.
WP Smush Pro Wizard;
When you enter this plug-in for the first time, it will have instructions on how to use it. The first of its main functions is Automatic compression, and the second one is Ultra compression, which focuses on speed and then reduces the resolution of our images to as low as possible. There are also some other instructions. These functions are very simple, including the maximum image size of our image and lazy loading, and then we directly enter the plug-in interface. We see some of the effects it can accomplish in its function buttons.
WP Smush Pro compresses images with one click;
Enter the dashboard. We can now see which pictures we have compressed and how much space we have saved. Not yet. It is just statistics, so we look at it one by one. The first one is batch compression. The first thing for batch compression is that it will automatically detect which pictures on your site need to be compressed. We see here that it prompts that there are two because there are currently no pictures on our site, only a few background pictures. When we import this, our product pictures all use placeholders. They are not displayed normally here, so we just compress the two pictures directly.
However, you can make some settings during the compression process. For example, below we can see our compression specifications. The first is basic compression, the second is as small as possible, and the third is extreme compression, which can compress more than 5 times. Normally, we can just use the basic one because if you compress it too hard, the resolution of your picture will be very poor, so we click directly to start compression. Because there are few pictures, it will tell you after the compression is completed. We have saved 70.7 KB and compressed the space capacity by 10.3 KB. Because we have relatively few pictures, we cannot display the data.
WP Smush Pro compression settings;
Let’s take a look at the other settings. The first one we just mentioned is how much its compression mode is compressed. The second one is for the size of our pictures. You can set the size of an Image Sizes picture separately. We can find our media and our media files in the settings. Then, it will limit the maximum size to 1024×1024. , if your picture exceeds the size, it will not be fully displayed, or it will forcefully crop your picture to 1024, so here we can set a size separately.
For example, our maximum size can be set to 2048, etc. Come according to your own needs.
The other one is to compress some of our newly uploaded images automatically. The next step is to delete some metadata from our images. What is Metadata information?
Now, we find some pictures on the desktop. For example, we right-click to view their properties. The properties have some detailed information. The detailed information will tell you what kind of equipment the picture was taken with and what equipment it was released with. Date, modification, data size, etc., will also be there.
Of course, our picture is not displayed because I cut it out. Normally, if you take it with a camera or mobile phone, you can see it in the detailed information. The removal of confidential information from the picture here is to remove the confidential information from the picture just now. We delete this information when we see it, which can reduce the quality of our pictures in another aspect. Generally, we turn it on by default.
The other one is to adjust our original image. We can adjust it to the maximum width and height of 2560×2560. Normally, we would not adjust it like this because when we build an independent website ourselves, you, as an operator, need to understand these most basic elements. You cannot upload pictures that are too large unless you don’t understand anything. The next one is not to limit the size of the image. We can just default to it and don’t worry about it.
The next step is to convert our PNG image into a JPG image. We all know this extreme image format. It can set some transparent images. Of course, it is also explained here. If your extreme image is a transparent image, it won’t compress or convert because when converted into a JPG, it will either have a white background or a gray background.
If you have a transparent image, it will definitely display abnormally, so the description here is that if it is a transparent PNG, it will not be compressed.
The other one is an email notification. If some pictures are newly uploaded to your site or the size of your pictures exceeds the standard, he will send you an email. The next one is batch recovery. What does this mean? It corresponds to the one above.
One of the above is a backup, that is, when you compress the picture, it will appear two pictures, one is your original picture, and the second is the compressed picture. Normally, it will automatically replace the compressed picture with Your original pictures displayed, so do you want to back up the original pictures?
If you choose to back up your original pictures here, you can restore them here. If you don’t have blood here, you can’t restore them. Under normal circumstances, when we compress, we have to do it according to our own needs. These settings must not be the wrong setting. You’d better make a backup if you think you may have set it wrong. After the backup is completed, delete the original image. This will be no problem.
WP Smush Pro directory image compression;
In addition to compressing our product images or images on our site, it can also compress images in another location, which is our upload. For example, we put some logos when we built an independent website or uploaded them to upload ourselves. of a file.
We can also compress the files here, including the pictures in our theme, so we can match wp-content in our WordPress structure, which is the content. For example, To compress images in a certain plugin or a plug-in in a certain theme, just select the directory and compress it.
WP Smush Pro lazy loading;
We have already told you about the so-called lazy loading before. When a customer enters our independent website, under normal circumstances, he can’t see the interface of our entire website. It will be divided into several screens. For example, if we are in line of sight now, The one inside is called the first screen, so when the user enters the first screen, it will scroll down, which will enter the second screen, and the third screen will go all the way to the end.
So-called lazy loading means that when the user looks at the first screen, the pictures on the second screen can be delayed until he sees the second screen. In this way, the loading speed of our entire page will be accelerated. The function of lazy loading is here. There is only one setting activated; you just need to activate it.
In fact, many of our performance optimization plug-ins, such as Little Rocket WP Rocket and some of the other skill plug-ins we explained, have this function built in. The main function of this plug-in for us is to compress images, and its lazy loading types, such as JPG, PNG, or some Others, can be set up separately.
Then, the next one has a delay time of 400 milliseconds. Our one second is equal to 1000 milliseconds, so 400 milliseconds is equal to 0.4 seconds. There is also some delayed content below, such as which pages of our blog accessories page can be delayed. The other is the JS in our head. We can put it in the photo. It is also lazy-loaded. The function here is mainly aimed at our performance. There are also some notifications. It can also be lazy-loaded. The following one is Turn it off.
WP Smush Pro CDN interface;
This plug-in comes with a CDN, but we cannot use the CDN at the moment. Everyone should remember that the CDN is to load your pictures on someone else’s server. When you put things in someone else’s place, it is called leasing. You need to pay for it. Just like renting our own server and cloud host, we need to pay for it, so we can’t use it for the time being unless you buy its CDN. For some static content of our pictures, we will give it to you later.
I will share some cloud flares with you when I talk about performance acceleration. Some CDNs like this are free so that you can use a small independent website. Using this free CDN, we can achieve dynamic and static separation, the so-called dynamic and static separation. For example, some content on our independent station is static, such as our banner, logo, and background images, which do not change much. It will not call our database. This one is static.
The products on our shop page will be continuously updated, so they must be written to the database. It is dynamic. The separation of dynamic and static means dynamic. We generally use caching to speed it up, and static, for example, we can use logos and distribute them to some other servers for calling to achieve dynamic and static separation.
WP Smush Pro WEBP image conversion;
We have talked about the WEBP image format before. In addition to the image suffixes such as JPG format or PNG that we often see, there is also a format specifically for the web version, which is Webp. We compress the image into a format such as Webp. It will reduce the quality of our images, so our image loading speed will become faster.
The other one is our resolution. Its impact is relatively small because Webp is a system developed by Google, so converting your pictures into this format is more beneficial to search engine optimization SEO. Webp is equivalent to Here; it can help us with compression, but if we want to compress our images into Webp, we must obtain some permissions from our server.
If you are using a cloud host, it is basically out of the question. You can only use a VPS to set your server permissions. For example, if we open it now and look, it will detect the permissions used by our server when we see it. The first system is Apache, and the latter one is what we are currently using. The detected ones are correct unless you know what kind of architecture your server uses, generally the lamp architecture in our WordPress, L in LAMP is Linux, A is Apache, M is our Mysql, our database, and P is the PHP language.
When we click Next, he asks you to put this code in a file on your server. These files are generally not visible in our cloud server, so you must contact your service provider. , you can also ask him to add it for you.
WEBP image online conversion tool;
Of course, under normal circumstances, we have said that we generally will not use this plug-in function, including its CDN, and we will use some other performance plug-ins to replace it. Of course, besides this automatic conversion to VIP, there is another way to upload the pictures later. Here, I will share with you a website (pixelied.com). This URL can convert our pictures into Webp format, and then you can upload them again.
The best way is to form a set of rules for our later editing. For example, the main image of the uploaded product image is 1080×1080, and then you can adjust the size of the image in the detailed image. There is a rule so there will be no big problems because only the pictures we have processed can be uploaded. This is the safest.
So, I used two pictures to compress them. We can simply look at their quality comparison. This is our original picture. If we go to the extreme, let’s check its properties. We see that its size is 600 Multi-KB, so I used such software to compress it into the web, and then we looked at its properties. It was only 85.7KB, so it was compressed nearly 7 times. Then, we open the image to see its resolution.
Okay, so this is the original image. Then, we open the second one to view it directly. We can directly translate the original image. Its size is more than 600 KB, and the display effect is like this.
Then, we turned to the second picture. This one is only 85.79KB, but we found that its resolution has not changed much, so converting to this VIP can obviously compress the quality of our pictures without affecting their viewing. You can use this software to compress all the pictures you upload later and then upload them after the compression is completed.
WP Smush Pro plug-in integration function;
The next one is integrating this plug-in. All plug-ins have an integrated function now. The first one is integrating Gutenberg, which can display the size of your pictures in Gutenberg. Then, you can compress the images uploaded in Gutenberg. We don’t need it here because we use Elementor, so it is unnecessary now.
The next one is the WP Smush Pro settings. The functions in the settings are very simple. The first one is to detect the pictures on our existing site. All our pictures are placed in a container, such as a div. inside or placed inside a p tag. The detection is whether your image exceeds the size of your outer container. This function is for such a purpose. Let’s turn it on and click Save.
Now, go back to the home page or a certain page, and there will be a warning on the side. For example, if we click on this picture, for example, this picture may only be 115×19. Pixels show such a size, but the picture is 300×50, which is too large, so he suggests that you adjust the picture to 115×19 pixels.
However, it is not realistic in our actual application. For example, the product picture we call needs to be displayed in a smaller picture on our consumption page. Then, this picture is displayed on our single page. We want it to be displayed more clearly. Hence, the size of the picture displayed here is different from the size of the picture displayed in the shop, so we cannot compress such pictures, nor can we There is no way to modify its size, so this function is an accumulation, we just need to understand it.
Then the second one is for our configuration. You can import and export it or import it to another site. All plug-ins have this function.
The last one is our data. Basically, we don’t need to care about this data under normal circumstances. It mainly refers to whether the content set in the plug-in is retained or changed if our plug-in is deleted later. It deletes. The last one is to add a contrasting color, which we won’t be able to use for now.
WP Smush Pro media library image display;
In addition to where we can see this plug-in, we can also see it in our media library. For example, if we display it in the list here, we can see that it is Smush.
In this Smush, he will tell us that he has compressed this image for us. The original image was compressed from 100KB to 70KB, which is a compression of 10.9%. The same is true for other images. There are some images that he has not helped us to compress. Compression is because he thinks the pictures are relatively reasonable, so compressing them is unnecessary. Of course, our site has relatively few pictures, so the effect cannot be seen. If you are a big site, you will be compressed like this. The space capacity will be greatly saved, and your speed will significantly improve.
Well, this is about how to use an image compression plug-in like WP Smush Pro.