Picture optimization of fighting wits and courage with the 2M space of the applet

For various applications such as websites or apps today, all image resources are basically loaded through CDN, and the CDN is most likely to be Alibaba Cloud or Tencent Cloud. One of the things that will be done in CDN must be the optimization and compression of image resources. Over time, everyone seems to gradually forget how to choose the image format and whether the image should be further compressed to save bandwidth.

This saving is not just for the traffic savings used by users through 4G or 5G when they visit the website, but the bandwidth cost of the enterprise on the CDN.

background

In the article "I have nothing to do, toss a small program to play, the face is not Manchester United, it is a face pinching... " It was mentioned in the article that the currently developed face pinching applet does not consider the use of any server, so the picture resources They are all packaged inside the applet, so you need to consider how to use the limited 2M size to load more image materials.

What I think is common knowledge about image optimization

Basically, everyone knows that the current pictures are loaded through CDN requests, and in the CDN, you can set the way of loading pictures, including whether to use the format of high compression rate .webp , such as this URL:

 https://gw.alicdn.com/..省略一串..saturn_solar.jpg_300x300q90.jpg_.webp

300x300 .webp ，如果我们300x300 800x800的话，那么看到的图片是大的； If you look at the http request header information, you will see content-type: image/webp the image type is in the format of .webp _300x300q90.jpg_.webp It should be the original image uploaded to the CDN in the background.

To put it simply, the pictures used in the site will select the picture size and format according to the needs, combined with the function of CDN, in order to save bandwidth resources. Of course, CDNs generally compress images once by default.

what i did in the applet

Since you plan to put pictures into the applet package, and the total size of all static resources and code files cannot exceed 2M, you can only start from pictures if you want to store more picture materials. No matter how much you save on the code, it is only a few K at most, which is completely negligible.

image format selection

In the selection of the picture format, the material for pinching the face is basically a png24/32 picture with an alpha channel, that is, the lossless picture with a transparent effect .png picture, only pictures like background Consider converting to .jpg format picture.

Secondary compression of images

After the image format is selected and exported, the size compression has basically been considered. When I got the material package, I was told that it had been compressed once by a certain image compression software.

Maybe it's my personal habitual behavior. I just throw the picture to the image compression tool I've been using, ImageOptim , and compress it again. It turns out that there is still room for squeezing.

I thought I was compressed to the extreme

5 small programs , from the beginning, after being compressed by ImageOptim , I thought it was compressed to the extreme, from the tips of the small program package

Gradually evolve to prompts like this

In theory, it should be very satisfying. Indeed, from 4368 kb to 2168 kb , which is very close to 2048 kb , it is really impossible to delete a few face-pinching materials.

Yes, I did do this for some of the previous small programs. Although the face pinching material is black and white, I still deleted some materials, and finally met the requirement of less than 2M, and then released it online.

I thought it was wrong

In the later versions of the face pinching applet, the materials used were colored, and the size of the materials was larger. At first, I was very confused. Inadvertently, it suddenly occurred to me that since the size of the picture cannot be reduced and the format of the picture cannot be changed, the only way to change the size of the picture is to try to change a different picture compression tool.

Because, in an image compression project that I participated in early, I probably learned that there are many compression algorithms for png. In this case, is it possible to change a picture compression tool? Therefore, the first choice is tinypng ( https://tinypng.com/ ), which is generally used by everyone. I didn't expect the result to surprise me.

This compression rate is really leveraged. The image that has been compressed originally still has such a large compression space. So go directly to @ Hell Jing for more material.

At first he thought I had reduced the quality of the picture a lot, but after looking at it, he didn't say anything. 😆

you thought that was it

As mentioned earlier, I just threw the locally compressed images on the tinypng website and compress them again, but in order to be able to squeeze more images into the 2M space, I will definitely not miss the opportunity to squeeze.

When I was in Ant Financial, I once put the picture on an internal platform and compressed it again and again until the compression result was 0% . So, it's the same now, I've been trying to squeeze this 2M space, how can it be done just once.

So I was patient and compressed the pictures compressed by tinypng again and again, until 1% or even 0% before giving up and continuing to use tinypng to compress.

Why is it said to be patient, because free things are the most expensive and take time.

20 pictures at a time, and the second or third time, an error will be reported. The operation is too frequent, and I despise a poor ghost like me. But it doesn't matter, I will take 20 at a time, stop for a few minutes in between, and then continue with 20 at a time, after all, I am now poor and only have time left.

And, at the same time, I compress the image that has been compressed to the extreme in tinypng , and continue to compress it again locally through ImageOptim .

finally

I finally completed these 5 face pinching mini-programs initially. Although I failed to release all the picture materials, the latter materials have been squeezed through rounds of rounds, and the amount has increased a lot compared to the previous ones. There are always more methods than problems, it depends on how you choose and how to deal with them.