When using Page Speed Insights, you may see an improvement point called "Image of the right size".
In this article, I will tell you how to improve it.
What is written on this page
What is an "appropriately sized image"?
If you get the following error in Page Speed Insights, the size of the image used on the page is too large! about it.
Image files are larger than text content and have a large percentage of closing on the entire page.
If the already large data is loaded in a larger size than the proper size, it will take a long time to load the page and stress the browsing user, resulting in a bad UX (user experience). So please improve it.
Some people post photos taken with smartphones as they are on the site, but smartphones in recent years can take very beautiful pictures, but the number of pixels and data capacity will increase accordingly.
Therefore, such large image data needs to be optimized according to the display size of the screen.
"Image of appropriate size"How to improve
The countermeasure is simple, and it can be improved by "matching the number of pixels in the image to the number of pixels to be displayed".
This is what the official resource says.
How Lighthouse calculates oversized images
https://web.dev/uses-responsive-images/#how-lighthouse-calculates-oversized-images
For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.
In summary, "The method of detecting an image of an appropriate size is to compare the size of the displayed image with the size of the actual image for each image on the page", so if you combine this, it will be improved. Will be possible.
Commentary for web creators
If you are involved in web production, you probably don't need much explanation anymore, but please check the following three points.
- Is the image output with the correct number of pixels from a design tool such as Photoshop?
- Does the individual image match the final display pixel count after coding?
- Is the CMS image resolution setting, such as the WordPress "Media" setting, set in consideration of the actual display size?
It is possible to improve by checking the above and matching the number of display pixels of the image with the number of pixels of the actual image file.
Also, although it takes time, there are other countermeasures besides adjusting the number of pixels.
- Responsive image support
- Replace images such as icons with vector images such as SVG
I will omit the detailed explanation in this article, but I will post a reference link, so please refer to it if you like.
▼ About distribution of responsive images
▼ About distribution of responsive images
Explanation for the general public
Here, I will explain a little carefully so that even those with little knowledge can understand.
The image size here is the number of pixels.
I won't go into details about pixels, but to put it simply, it's the number of vertical and horizontal dots, and the size of the image is written as "○○ px".
This number of pixels will change the apparent size of the image, but you need to match the size displayed on the page with the actual size of the image.
The response method varies depending on the environment.
How to handle images of the right size on Mac
If your computer is a Mac, you can make corrections using the "Preview" of the application that is included from the beginning.
- Open image in preview
- Click "Tools"-> "Adjust size ..." in the menu bar that is always on the screen.
- Change the unit from "cm" to "pixel" in the displayed pop-up window.
- Enter "width" and "height" according to the display size
- Click "OK"
- Save and complete
It is possible to respond according to the above flow.
How to handle images of the right size in Windows 10
If your computer is Windows 10, you can fix it with "Paint", which is an application that is included from the beginning.
- Open image with paint
- Click "Home" → "Resize" in the ribbon
- Change the unit from "Percent" to "Pixel" in the displayed pop-up window.
- Enter "horizontal" and "vertical" according to the display size
- Click "OK"
- Save and complete
It is possible to respond according to the above flow.
How to deal with images of appropriate size by other methods
The above method is a method of modifying the image one by one, so it takes time, but it is explained so that it can be used in any environment.
Any other method can be used as long as the number of pixels can be adjusted.
- Use an image processing application such as Photoshop
- Use web tools etc. (Search for "image size change" etc. and you will find a lot)
We would appreciate it if you could respond according to your own environment.
Let's check "Efficient image format" as well
There is also an "efficient image format" (image distribution in the old next-generation format) that points out improvements related to images, so let's optimize it as well.
It is explained in detail in the previous article "Image distribution in next-generation format".
summary
The number of pixels in an image affects the display speed as Google points out.
In future operations, be careful not to upload images with a large number of pixels.
In addition, the items pointed out around the image in Page Speed Insights are often related in the essential part.
When modifying the image, I think it is easier to deal with other improvement items as well.
I hope this article will be of some help to you.
If you have any questions after reading the article, feel free to Twitter (@kaznak_com) Etc., please ask.
see you.
