background

As a qualified front-end development siege lion, in the normal development process, not only to ensure the quality and quantity of requirements to complete the development, but also to think about how to maximize the front-end performance, improve user experience.

In modern front-end applications, we generally choose to upload static resources such as pictures to a third-party OSS server, such as Ali Cloud OSS. For some fields that can be customized by users, such as a comment list, each piece of data has a head picture, and the picture here is uploaded by users. In most cases, we will make some restrictions on it when uploading, for example, if the picture exceeds 2M, it will indicate that the picture is too large, but we can also optimize it from another Angle. It is the picture processing capability provided by Ali Cloud OSS.

The sample

Let’s take a look at an example provided by Ali Cloud:

URL:https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg look at it, this is a store in ali cloud OSS ordinary 🐶 figure, we open it in your browser:

The content-Length field in the Response Header indicates that the size of the Response Header is 21.839KB.

resize

Resize is used for image scaling. We will be the width of the picture for 200, into this URL: https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize, w_200

Let’s see what happens to its volume.

(21839B) / 21839 = 69.2%. If it were a head field in a list, we could save nearly 70% of the traffic just by scaling. This is a huge performance boost for mobile 2C content applications where images account for the majority of page requests.

quality

Quality is used for quality conversion, that is, can be used for image compression. We put the pictures of the sample set to 70%, the quality of the URL into such https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/quality, q_70

It can be seen that the volume becomes 11640B, and the compression ratio = (21839-11640) / 21839 = 46.7%. The volume optimization effect is also obvious.

format

Format is used for advanced compression, we can compress it into high compression ratio image formats such as WebP or HEIC. Since heIC is not compatible and webP is well supported on non-ios devices, let’s try converting it to WebP format. The URL looks like this: https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/format,webp

The volume becomes 15374B, and the compression ratio = (21839-15374) / 21839 = 29.6%, which is still significant.

Stack processing

The above three methods are the main methods for optimizing the size of OSS images. Let’s merge them together to see how large the image size can be optimized. https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_200/quality,q_70/format_webp

Han is shocked!! , the image volume is reduced to 3480B and the compression ratio is as high as (21839-15374) / 21839 = 84.05%!!

The project of actual combat

In the actual project, a page was found to optimize, a message list page, with a page layout similar to this:

${url}? ${url}? ${url}? ${url}? ${url}? ${url}? X-oss-process =image/resize, W_200 /quality,q_80/format,webp

Be aware of

  • PNG format images because of its characteristics of itself, after processing part cases can’t get the ideal effect, such as compressed images but may get bigger size, because see: developer.aliyun.com/article/746… , need to further explore (experience is that small images are not processed, PNG images above 50KB will have obvious effects after processing);
  • WEBP image format produced by Google has a smaller volume compared with JPG and other formats with the same picture quality, but iOS does not support WEBP format, so it needs to make compatibility judgment, so after processing similar resolution models, Android will be smaller than iOS image volume;
  • For JPG/JPEG format, conversion to WEBP/with the right proportion of quality compression, while preserving the image quality, the compression ratio can generally reach more than 50%
  • OSS image request processing is in the form of URL query parameters, so any parameter problems will cause image access failure, need to do a lot of boundary processing, such as resize,w parameters if decimal will directly access failure, need to process integer.