⚡️ Save 90%! Here’s how I optimized the images on my website

2021 hasn’t been much better, and 2022 is ready to get off to a good start, so pick something simple and write about how I reduced file storage fees on my personal site by 90%.

If you like my article, hope to like 👍 collect 📁 comment 💬 three support, thank you, this is really important to me!

Service selection

When I started writing about three years ago, THERE was a real problem of not knowing where to upload pictures.

Before most people will host pictures to Sina map bed, but Sina map bed at that time opened the authentication operation (through the referer limit), non-Sina site will not show pictures, although can be bypassed by empty referer, but it is not a long-term solution; There are also people who can host images on GitHub Gitee, but the speed and capacity are not optimal.

Later, after some research, I found that you can use the file storage function of the major cloud vendors to achieve, and the cost is not expensive. Because I could not understand the file storage documents of Ali Cloud, I chose COS file storage service of Tencent Cloud.

After the storage service is done, it is a convenient client. There are many map bed clients out there:

Here I choose free and lightweight uPic, perfect to meet my picture upload needs.

Problems arise

After configuring the personal graph bed service, I have been unconscious for almost two years. Last month, I found that the traffic cost doubled this year, so I thought about optimizing the picture to reduce some cost.

First, I analyzed my article tutorial. The main traffic is my “Web scraper tutorial”. It is estimated that there are 80W views on the whole website, and 80% of the picture requests will fall on my COS source site, causing traffic charges.

After investigation, there are three main consumption channels of COS traffic at present:

• Blog park: blog Park does not support the pictures in the MD file to be directly transferred to blog park public chain, at that time to save trouble to directly use COS link
• Minority: editor ability is weak, also does not support automatic public link, also use COS link
• Personal blog: small flow can be ignored

Once we find the problem, we can gradually optimize it.

Optimization 1: Referrer authentication

This optimization was done early, maybe a few months after using COS. Because the article published after a period of time, I found that a lot of original articles were “collection” to optimize SEO.

This kind of thing is impossible to eliminate, but for me, all these sites will cause bandwidth and charge pressure for my picture COS service. After weighing the advantages and disadvantages, I decided to learn from the practice of Sina Weibo and limit access:

• Only request images for domain names in the whitelist are allowed
• One step closer,Restrict empty referrer requestsBecause many brush SEO sites will be configured in HTML<meta name="referrer" content="noreferrer">, bypassing authentication through the empty referrer

After referrer authentication is enabled, there is a certain decrease in traffic and a lot of 403 error codes observed, indicating that interception is still effective. But I forgot the exact benefits because it was a long time ago.

Optimization 2: compress images

After referer optimization, I didn’t process images for a long time (about a year and a half), and by the end of 2021, I was running out of quantitative packets by the middle of the month. The quickest way to reduce traffic is to compress images, so I did the following:

1. Tinify compression

I used the website tinify.cn, which I think is of the highest quality and supports application of developer API, and has a free share of 500 pictures per month. After calculation, there are 450 pictures on COS, which is just within the quota, so I didn’t hesitate to open it directly.

The final compression results are as follows:

It looks like it’s only a 33% reduction in size, but the compression ratio is actually much higher, probably around 60%, because Tinify doesn’t support GIF compression, and there are a lot of GIFs in the 450 images, so the data is pulled down.

In order to control the variables, I observed the data for a week after compression, and the data effect was still obvious. Under the condition of constant daily requests (about 7000), the traffic consumption decreased by about 40% :

After seeing the relevant data, I wanted to further compress the image volume, so I tried the following.

2. Gzip compression

After enabling HTTP Gzip compression of images, we found that the effect is not very good, and the volume gain is almost 0.

Later I thought about this is normal, PNG and JPG are actually compressed files, and then compressed files, the benefits are generally not very obvious. Since compression also consumes server resources, image Gzip compression is turned off.

3. Transfer the GIF image source

PNG JPG images can be compressed to reduce traffic consumption, GIF images can not be compressed, then “transfer payment”!

I changed the GIF images of blog park into THE CDN of blog Park, and the effect is also very obvious, the number of requests reduced by 15%, traffic consumption decreased by 50% :

Minority website because it is a text editor mode, the operation is more cumbersome on the temporary replacement.

4. Webp online conversion

I will later migrate some pictures to CDN, and Tencent’s supporting CDN service supports intelligent webP conversion. After starting the service and testing a few pictures, the volume can be reduced by about 30%, but the overall benefit is not very obvious because of the small CDN volume.

Optimization 3: CDN acceleration

COS has always been a CDN service, but it hasn’t been on before. This optimization opened incidentally, and THEN I fell into endless regret – why I didn’t open 😭 earlier.

After the CDN service is enabled, the biggest benefit is that the loading speed directly decreases by an order of magnitude. The previous pictures are all requested from COS source station, and the response speed of each picture is about 200ms-300ms. After CDN is enabled, the response speed will be directly reduced to 20ms-30ms, and it can be kept within 100ms even in the case of deterioration:

After enabling CDN Acceleration, another pleasant surprise was that my blog’s Lighthouse score was approaching full score. I have to say that docusaurus is a well-optimized document framework and CDN smells good.

conclusion

Here my picture optimization comes to an end, comprehensive down to see the flow rate decreased by 90%. Overall, the idea of optimization is not difficult, are obvious learning, so large income is completely because never optimized 🌚 before.

In fact, later can also continue to iterate, such as the old article picture links into all CDN links, the whole site HTTP2 and so on. But because the benefits of optimization have been obvious to this point, the marginal effect of optimization is too small, and it is not too late to optimize the next bottleneck.

If you like my article, hope to like 👍 collect 📁 comment 💬 three support, thank you, this is really important to me!

Welcome to follow my wechat official account: Lu Egg Lab. Currently, I focus on front-end technology and have some micro research on graphics.

How did I reduce the cost of photo services on my website by 90% : More timely updates, better reading experience