How to reduce the weight of uploaded images and replace them (PageSpeed Insights score improvement measures)

Speaking of improving PageSpeed Insights scores on sites using WordPress,
- Optimize the loading of time-consuming scripts and CSS (rendering block countermeasures)
- Change the display size of the image (image of appropriate size)
- Improvement of items pointed out in the index of Core Web Vitals
- Use of web cache or browser cache
- Cache the page itself
That is the main point. And many plugins have been released that could improve them.
However, their effects are limited, and there may be cases where the score does not improve much, or something goes wrong or inconvenient and something does not display properly or does not work.
If you’ve been frustrated by the above approach to improve your PageSpeed Insights score, you may have forgotten what’s important. That is whether it will be displayed comfortably when the visitor accesses it.
And what about the capacity to transfer pages to a computer or smartphone, which should be fundamentally considered for comfortable display? It is nothing but that. There is no doubt that most of the capacity is content such as images and videos inserted in the page.
Try one post with no images and check the PageSpeed Insights score. I think you can get a pretty good score even if you take the same measures.
However, WordPress manages images by setting a unique number called “ID” inside the program, and generates multiple images at the time of uploading, so it is easy to replace uploaded images. It is not possible.
If you use human wave tactics, it is reasonable to upload a new optimized image again and replace it while checking each post and fixed page, but it is troublesome, isn’t it?
So, this time, I will show you how to efficiently replace the images once uploaded to the site by using some convenient plugins instead of uploading new ones. Compared to human wave tactics, it’s really easy to replace!
Regarding the content of this article, specifically, we will reduce the weight of the images on the site by following the steps below.
- Download uploaded images
- Reoptimize (lighten) downloaded images
- Return (replace) the lightweight image to the site
Depending on the environment of the site / server, it may not be possible to replace it normally, so just in case, you can take a backup in a form that can restore the site, try it on a test site, etc., even if a problem occurs on an important site. Please proceed after doing so.
Procedure to replace the image uploaded to the WordPress site
1. Download images uploaded to the site
First of all, upload it to the site and save (download) the image used for posting etc. to your computer.
The first method that comes to mind is to use an FTP client tool. Of course, you can get it by that method, but if you use FTP, the generated images of multiple sizes will be downloaded together, so it will be very troublesome to find the original image.
Therefore, we recommend a plug-in called “Export Media Library”.
The nice thing about this plugin is that you can download only the original images at once. Eliminates the hassle of using FTP.
Please refer to the linked page above for details on how to download, with images.
If you have checked “Organize uploaded files into folders based on year and month” in the media settings of the site, downloading while maintaining the hierarchical structure will make it easier to find images.
After downloading, unzip it.
2. Reoptimize (lighten) downloaded images
Before processing the image …
After optimizing the image by the method introduced here, if you replace the image according to the procedure in the next section, the original image will naturally be optimized. If you want to keep the original image, duplicate the file downloaded in the previous section, save it somewhere as the original, and save it.
We will reduce the weight of the image. The points are the following three.
- Reduce the size (file size) of image files
- Make an image of the required size
- Change the image format to JPEG format
First, use online tools to reduce the size of the image. We recommend the Free Online Image Compressor. Just open the page and select an image to make it lighter. If you overwrite the lightened image with the original image, you will not be confused. Just doing this can reduce the size of the image to about 1/4, which is quite effective.
Next, change the size of the image (vertical and horizontal dimensions) to an appropriate one. Change to the widest width on the page (generally the width of the body). This can also be done easily with online tools. I recommend I Love IMG. Just like when reducing capacity, save the resized one by overwriting it. This work is also quite effective.
Please note that if you are generating an AMP page using the theme function or plugin, you will get an AMP error if you do not use an image with a width of 1200px or more.
Finally, convert heavy format images such as png format to jpeg format. However, I do not recommend it in this article because it causes troubles when replacing images in the next section. If you do, you should use the online tool PNG to JPG.
3. Return (replace) the lightweight image to the site
Replace using a plug-in called “Enable Media Replace”.
Please refer to the link page below for details on how to use it.
As I wrote on the linked page, please be aware that if you replace image files with different extensions, problems such as failure to replace or the replaced image will not be displayed at all will occur.
When using an image compression plugin
If you are using a plugin that optimizes the uploaded image on the site or adds a WebP format image to separate the display, most of the plugins will trigger the optimization when the image is uploaded ( The trigger) does not work.
Therefore, if you just replace the image, the optimization plug-in will not reoptimize it, and it will remain optimized for the previous image. Therefore, after replacing the image, reoptimize manually. You need to do.
- Tags:
- WordPress
Post Author: Knowledge Base Admin