What is a "appropriately sized image" from Page Speed Insights?

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 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.

Screenshot of properly sized image
Screenshot of "Appropriately sized image" on Page Speed Insights

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

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.

https://web.dev/uses-responsive-images/#how-lighthouse-calculates-oversized-images

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

Serve responsive images
Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" appr…

▼ About distribution of responsive images

Images | Web Fundamentals | Google Developers
A picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of t…

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".

[WordPress / Display speed] What is image distribution in the next-generation format? / Page Speed Insights
First, I will briefly summarize for those who want to take immediate action. The content of the instruction is to reduce the weight of the image. Anyway, if you want to have fun, you can use a plug-in. If you can afford it, read the article below and manually compress the image.

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.

Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"
Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"