How to improve your pagespeed score via image SEO?

How does image SEO work?

PageSpeed Insights (https://pagespeed.web.dev/) is Google's official webpage speed measurement tool.

In EC-Center, as long as the website does not have any special effects, almost all webpage speed tests can reach more than 90 points (mobile terminal) after SEO optimization.

For example, the picture below is a comparison between before and after we optimize the image.

Below the speed measurement results, you can see which elements are "slowing down." Let's look at the yellow part of the icon one by one. There are four common problems with pictures.

1. Adopt a new generation of image format Webp.
The Webp format is an image format launched by Google that supports lossy and lossless compression on the Web.
Jpg format is converted to webp, and the compression effect of webp is usually better than PNG (not recommended) and JPG.
Why is PGN not recommended? Although we know that PNG is clearer, the file is too large, the original clarity will be lost after compression, and the zoom-in and zoom-out are the same, so the website designers do not recommend the PNG format.

2. Adjust the image size appropriately.
That is the image size (width * height). After we convert the Jpg format to Webp, we also need to check the image size.
As shown in the picture:

Intrinsic size is the original size of the image, and Rendered size is the rendered size of the image.

Usually, the original size is a bit larger than the rendered size, which is not a problem, but the rendered size of each image on this page is the same size.

Just converting the image to webp is useless, but also check the width * height of the original size. Then resize it in PS (according to the rendered size), but pay attention to the image's resolution and don't let it get distorted.

If you don't know what resolution should be appropriate for the image size?

Designer's recommendation.

The recommended size for a Banner is about 1500px wide;

The recommended size of images for products, blogs, etc., is between 600px and 800px wide.

3. Efficient coding of images (compression of image size).

Some people may think that the larger the picture, the higher the resolution. But the site is not, and it will affect the page load time.

We require all website product images to be less than 100KB.

4. The last item is not set as the width * height of the image.

Just make up the size in the background, and also, make up the picture ALT tag (alternative text).

An ALT tag is the appearance of the Html code inside the introduction of this picture, generally related to the title. Googlebot's through the crawl page text to understand the page's content; the picture has a text alternative, which can improve the relevance of the content. Also, keywords may rank in Google images to bring traffic to the website.

The following screenshot shows the optimized image HTML code:

After optimizing the above 4 picture problems, the speed test scored 91 points.

So you can use PageSpeed Insights to test your own website according to the above steps, optimize the image and improve the speed of the page.

Understanding Core Web Vitals

6/8/2021 - News

Core Web Vitals(CWV) are a specific set of factors that Google evaluates the overall user experience of your webpage. In short, it's a "Page Experience" score...

Learn more..

How to integrate your website in DataStudio and create data insight reports?

20/7/2022 - News

Google Data Studio, GDS (now called Looker Studio) is a very powerful free Google data integration and analysis tool. As a Google SEO optimizer, you play a...

Learn more..

How to choose a reliable SEO supplier?

18/3/2021 - News

Learn more..

How to improve your pagespeed score via image SEO?

How does image SEO work?

Related Blogs

Contact EC Center

THANK YOU!