⚡️ Save 90%! This is how I optimize my website images

2021 has not been updated much, and 2022 is going to start off well, so I pick some simple content to write, and record how I reduced the file storage fee of my personal site by 90% .

If you like my article, I hope you like it 👍 Favorite 📁 Comment 💬 Three consecutive support, thank you, this is really important to me!

Service selection

I started writing about three years ago, when there was a very real problem that didn't know where to upload the pictures to .

Before, most people would host pictures on Sina Tubed, but Sina Tubed enabled the authentication operation at that time (restricted by referer), and non-Sina sites would not display pictures. Although it can be bypassed by empty referer, it is not A long-term solution; there are also people who host images on GitHub Gitee, but it is not the best choice due to the speed and capacity.

Later, after some research, I found that it can actually be implemented with the file storage functions of major cloud manufacturers, and the fees are not expensive. Because I couldn't understand Alibaba Cloud's file storage documents, I chose Tencent Cloud's COS file storage service.

After the storage service is completed, it is time to choose a convenient client. There are many image bed clients on the market:

name	Is it free	Is it cross-platform	application volume
iPic	no	Mac only	small
uPic	Yes	Mac only	small
PicGo	Yes	Based on electron, cross-platform	very large

I chose the free and lightweight uPic , which perfectly meets my image uploading needs.

There was a problem

After configuring the personal image bed service, I was unconscious for almost two years. Last month, I found that this year's traffic cost doubled, so I thought about optimizing the image and reducing the cost.

First of all, I analyzed my articles and tutorials. The main traffic is " web scraper tutorial " written by me. The reading volume of the whole network is estimated to be 80w, of which 80% of the image requests will fall on my COS source site, causing traffic costs.

After investigation, the current main consumption channels of COS traffic are 3 places:

• Blog Park : Blog Park does not support pictures in md files to be directly transferred to Blog Park public chain.
• minority : The editor is weak and does not support automatic transfer to the public chain. It also uses the COS link
• Personal blog : Small traffic can be ignored

After finding the problem, we can gradually optimize it.

Optimization 1: referrer authentication

This optimization is relatively early, about a few months after using COS. Because after the article was published for a period of time, I found that many original articles were "collected" by the station group website to optimize SEO.

This kind of thing cannot be prevented, but for me, these sites will cause bandwidth and tariff pressure to my picture COS service. After weighing the pros and cons, I decided to learn the practice of Sina Weibo Tubed and restrict access:

• Only the domain names in the whitelist are allowed to request pictures
• a step further, 161de3d3d16795 restricts empty referrer requests to , because many SEO sites will configure <meta name="referrer" content="noreferrer"> in HTML, bypassing authentication through empty referrers

After enabling the referrer authentication, after observing that the traffic has dropped to a certain extent, there are also a lot of 403 error codes, indicating that the interception is still effective. But because the processing time is relatively long, I also forgot the specific benefits.

Optimization 2: Compress pictures

After the referer optimization, I haven't processed images for a long time (about a year and a half). At the end of 2021, I found that the quantitative traffic package I bought was used up every mid-month. The quickest way to reduce traffic occupancy is compressed picture , so I did the following work:

1.tinify compression

Here I use the tinify.cn , which I personally think has the highest quality, and supports the application for the developer API , with 500 free shares per month, and a total of 450 pictures on COS, just in Within the limit, open the pressure without hesitation.

The final compression result is as follows:

Before compression	after compression
111MB	75MB

Overall, it seems that 33% has only been reduced. In fact, the compression ratio is higher than this, which can save about 60% , because tinify does not support GIF compression, and there are many GIF pictures in 450 pictures, so pulled the data down.

In order to control the variables, after compressing the pictures, I observed the volume for a week, and the data effect is still very obvious. When the number of daily requests (about 7000) remains unchanged, the traffic consumption has dropped by 40% and about

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

2. gzip compression

After opening the HTTP Gzip compression of the image, it is found that the effect is not very good, and the volume gain is almost 0 .

After thinking about it, this is normal. PNG and jpg are actually compressed files. If you compress the compressed files, the benefits are generally not obvious. Because compression also consumes server resources, Gzip compression of images is turned off.

3. Transfer gif image source

PNG jpg images can be compressed to reduce traffic consumption. Since gif images cannot be compressed, " transfer payment "!

I replaced all the blog post gif images posted on the blog garden with the CDN of the blog garden, and the effect was very obvious. The number of requests decreased by 15% , and the traffic consumption decreased by 50% :

Minority websites are not replaced for the time being because they are in the text editor mode and the operations are cumbersome.

4. webp online conversion

After I migrated some pictures to CDN later, Tencent's CDN service supports intelligent conversion webp . the service, I tested a few pictures, and the volume can be reduced by about 161de3d3d169d5 30% , but because the CDN volume is small, the overall profit is not very obvious.

Optimization three: CDN acceleration

In fact, COS has always been supporting CDN services, but it has not been opened before. This optimization was turned on by the way, and then I fell into endless regret - Why didn't I turn it on earlier 😭 .

After the CDN service is turned on, the biggest benefit is the loading speed direct an order of magnitude . Before COS pictures are requested from the source station, the response speed of each image was about 200ms-300ms , falls directly after opening the CDN 20ms-30ms , the degradation condition can be maintained at 100ms within:

After turning on CDN acceleration, another surprise is that the Lighthouse score of my blog is close to the full score of . I have to say that the document framework of docusaurus is really well optimized, and the CDN is really fragrant.

Summarize

At this point, my picture optimization has come to an end. On the whole, the traffic tariff has dropped by 90% . In general, the idea of optimization is not difficult, it is all obvious learning, and the benefits are so great because it has never been optimized before🌚.

In fact, you can continue to iterate in the later stage, for example, replace all the image links of old articles with CDN links, HTTP2 for the whole site, etc. However, because the benefits of optimization are already obvious, the marginal effect of re-optimization is too small, and it is not too late to optimize when the next bottleneck is encountered.

---

If you like my article, I hope you like it 👍 Favorite 📁 Comment 💬 Three consecutive support, thank you, this is really important to me!

Welcome everyone to pay attention to my WeChat public account: Ludan Lab, currently focusing on front-end technology, and also has some small research on graphics.

Link to the original text 👉 How did I reduce the picture service fee of my personal website by 90% : The update is more timely and the reading experience is better