This article is compiled by Mingcong He, senior technical advisor of Akamai, who shared the lecture online at LiveVideoStack. In the sharing, Teacher He Mingcong combined Akamai picture and video optimization plan and specific practical experience, and explained in detail how to optimize picture and video intelligently in CDN edge network through automated workflow without modifying source code.

By He Mingcong

Organizing/LiveVideoStack

Good evening everyone, MY name is Mingcong He, senior technical advisor of Akamai. With the booming online business, it is no doubt that good user experience can help improve conversion rate, and high-quality pictures and videos have become the key factor to attract users. However, should not only deliver beautifully made, visual effect is excellent pictures and video, and to ensure that the user experience, especially in the high latency of mobile cellular networks and mobile terminals, find a balance between the two, is a very complicated work, so I combine’s video optimization and solution, and share content today. The first is the current challenges of image and video optimization, the second is the working principle of Akamai image and video optimization, and the third is to share a case with you.

1. Challenges of image and video optimization

The Internet is in continuous evolution, and ultimately to serve the users, and users are the pursuit of experience in the continued ascent, as the network infrastructure extends gradually, and a variety of the popularity of intelligent terminal, we all hope you can see more clear, more pictures and video, the so-called one figure is worth thousand words, pure text has no attraction for many users. The image above is from SONY’s official website. It charts the change of the entire website from 1998 to 2019, which I believe is a microcosm of the continuous evolution of the Internet. We can see that in 1998, the whole website was mainly based on text, and in 2009, some pictures were added. In 2014, the size, quantity and color of pictures were increased. In 2019, the whole website added video content in addition to pictures, which greatly improved the user experience of visiting the website.

More pictures and video content, of course, can attract a lot of users, but on the other hand, it also causes sites across the Internet to become heavier. According to Akamai’s analysis of Alexa’s Top10000 sites, the average site size has increased by more than 70% over the past year, largely due to the growth of rich media content such as pictures and videos. According to some third-party reports, the average page image ratio has reached 63%, and we expect mobile video traffic to account for more than 79% of total mobile traffic by 2022.

Here are a few challenges for our image and video processing. The first is that rich image and video content can increase user engagement and experience, but it can also cause users to open these resources more slowly. Second, it may be necessary to create multiple copies of the same image and video resource, and creating, storing, and managing these copies can be complex. For example, considering the differences in device types, operating systems, and browser capabilities, it is necessary to create different derivative versions and formats. There are also new requirements scenarios, such as the need to transform images, including cropping, flipping, watermarking, face mapping, and so on, which result in a large number of copies that need to be created, stored, and managed. The third point is complex delivery logic, that is, how to distribute the most appropriate copy of the different copies to the end user based on the end user situation, which would involve very complex code logic if implemented at the source site. There are several different challenges to picture and video optimization.

In order to address these challenges,’s pictures and video solutions, was born,’s pictures and video solution, only need the source station’s original file to store a high-definition, of format conversion, file compression, cropping flip, etc. These actions are in CDN, do not need to be in the source station to manage multiple copies of the file, It also saves the cost of source storage. For each file copy created by CDN, CDN will distribute it adaptively according to the device of intelligent terminal, browser type, screen size, etc., avoiding complex code logic in the source site. At the same time, all the conversion is based on the quality of pictures and videos as the premise, the converted video pictures will become smaller, users will open faster, better experience.

2. How Akamai picture & video optimization works

Next, I’m going to walk you through how the image and video solution works. It’s actually broken down into four very simple steps. The first step is to pull the original hd picture or video file from the source station. The second step is to transform the picture and video. If it needs to be clipping, zooming, watermarking and so on, all these are completed in this step. The last step is global user distribution through the edge nodes of Akamai CDN.

2.1 Pull source media content

First of all, let’s look at the first step. Generally speaking, all media resources are placed on the content management platform CMS or DAM. When all users access pictures, they will first go through Akamai’S CDN and IVM platform.

2.2 conversion

The second step is to convert the picture. All conversions are driven by defined policies, which can be customized according to different requirements, including setting the quality of the converted image, the resolution, and the mode of image conversion. After these conversion policies are set up, the end user requests the corresponding resource and the policy triggers the automatic conversion of the image. The Policy of transformation can be invoked in the CDN either through our UI Policy Manager or through APIs. For images, almost all artistic conversion functions are supported, including background adjustment, face recognition, automatic cropping, grayscale, watermarking, flip, and so on.

2.3 Optimize pictures and videos

The third step is how to optimize the picture and video. This step is simply a word: make the picture and video smaller. For pictures, we can use Akamai’s patented compression algorithm based on visual quality, which can make the image compression smaller in the same image format. For video, we can convert some high bit rate video to low bit rate, so that the file size will also become smaller.

The second way is to combine the characteristics of the terminal, the image and video conversion of different formats, for example, for the original JPEG image, WebP format in the same quality, the size will be about 35% smaller than JPEG, we can on the CDN JPEG image automatically converted to WebP format, when the user requests this JPEG image, Distribute the WebP format to him so that he gets about 35% smaller files and opens them faster. Similarly, some browsers support JPEG XR and JPEG 2000. We can also make use of such features to transform images accordingly, and then CDN intelligently distributes the transformed images according to the capabilities of the terminal browser, so that the end users can enjoy the effect of image optimization. For video, our common compression format is H.264, so we can convert H.264 to H.265 or V9 standard. H.265, V9 compared to H.264, compression efficiency is higher, the compressed size is usually about 50% smaller. So if the user is using Safari or Chrome, we can convert the video format based on the capabilities of the client browser, and the byte savings for video compression are much more significant than for images.

For example, the width of the original file is 2048. Considering the situation of different mobile terminals, you can set the conversion policy to support 320, 640, 1024 and 2048 different widths. Then CDN can adaptively distribute pictures of the best size for different terminals. If the screen is small, we can distribute relatively small images. Large images can be distributed to end users if they are large. Similarly, for videos, we can also do a similar Resize. So by combining these three optimizations, we can make images and videos smaller.

We’ll also share more details, but it’s important to balance size, quality, and file size. Akamai has tools in the background to help us choose the right size, quality and format for our strategy. For example, with a 1920px mp4 video file, we can see the difference in saving when choosing to convert to different sizes, qualities and formats. If you keep the width 1920px and choose to convert to high quality and WebM format, you can save 10.2% of the original file size. Also keeping the pixel width at 1920px, we can save 32.8% by converting it to medium quality. For some devices with small screens, you can reduce the size by 70.9% by converting it to 853px while maintaining high video quality. With a tool like this, you can see ahead of time the effects of use, balancing size, quality, and file size.

Next we can take a look at the interface that sets the Policy in the background. The above shows the configuration interfaces of Image Policy Editor and Video Policy Editor respectively. The whole process is very simple, if it is a picture, you can set the quality and width of the converted picture, if you need to do artistic conversion of the picture, you can set the conversion strategy. There are many types of transformation strategies, as mentioned above, such as watermarking, cropping, flipping, image mirroring, etc., all of these functions are available. For the video, you only need to set the video quality and video width after the conversion.

Once the policy is set up, it is very easy to invoke the images with the corresponding policy name. For example, we want to focus on the image on the left and turn it into black and white. All we need to do is call the link above and add the name of Policy, and the corresponding image will be generated, isn’t it very simple and convenient?

2.4 Global CDN Edge network delivery

In the last step, we combined Akamai’s global CDN edge network to deliver. As we all know, Akamai’s IVM solution relies on CDN, and customers of IVM can also enjoy the benefits brought by the highly distributed edge network of the whole CDN platform. At present, this network has been distributed in 130+ countries, 900+ cities, 4000+ data centers and 1400+ISP coverage all over the world. It is better for the end user to obtain transformed pictures and videos, because he can access Akamai CDN nodes locally.

The management strategy of images and videos transformed by IVM is similar to that of other resources on CDN. For example, some clear cache and TTL time Settings are the same as the operation mode of CDN.

At the same time, CDN can make self-adaptation according to the capability of the client. We have a very large and precise terminal equipment library, which can adaptively distribute the most suitable and pre-converted pictures and videos to the end users according to the types of different terminals.

IVM also provides very detailed reports to users, so that users can know how much traffic and bandwidth are saved by using IVM, and the types of pictures and videos after conversion. These detailed reports can be seen in the background.

3. Case sharing

Next, I would like to share with you a case of a client from Hong Kong. There are large videos and pictures on their official website. The size of the videos is about 10MB, and the pictures are also very large, about 10MB. Many of their users have been feedback that it is slow to open the video and the download time of the whole video is long, which has a great impact on user experience and has received many complaints from users.

The Akamai image and video solution helped them solve their previous user experience problems, and it was very effective. Akamai provides different tools to see this effect. First, there is a PIEZ plugin on the client, which allows users to see the optimized effects of images and videos. The above two boxes are the size of the entire file saved after the video optimization and some specific conversion strategies. It can be seen that the two videos have saved a total of 9.1MB, about 63.8%, and the size of the picture has been saved about 58%, 6.6MB smaller, and the end user can open the official website faster. In the box below, you can see some parameters of the conversion strategy. For example, the source site is two MP4 files. After the conversion, we have converted it to webM format. This is why the overall video size can be greatly reduced.

In the case of a single user, the Akamai RUM tool mPulse can be used to see the overall effect of the user. Comparing the Page load time before and after optimization, before the use of IVM in 4.21, the load time of the whole Page was 7-8s, but after optimization, the average Page load time became 2-4s, which is actually a very obvious effect. Also in other dimensions, TTVR and its Hero Image images have similarly optimized effects.

When we look at the whole timeline, the trend of change is more obvious. What needs to be noted is that all the data are compared in terms of 50% quantile data. It can be seen that TTVR, Page load time and Hero Image load time all decrease significantly before April 21.

This is a case share of this customer using IVM. I believe Akamai’s IVM can also play its great value of image and video optimization in the application scenarios of different customers.

Finally, a brief summary of some key benefits Akamai’s IVM brings to us. The first requires storing a copy of the original file in high definition at the source site. The conversion of the file is carried out at the CDN, reducing the complexity and cost of creating, storing and managing multiple copies of the file at the source site. For the second copy of each file created by CDN, CDN will intelligently distribute it adaptively according to terminal device, browser type and screen size, avoiding complex distribution logic in the source site. Thirdly, all the conversion is based on the quality of pictures and videos. The converted video pictures will become smaller, and users will open them faster and have a better experience.

That is the main content I share, thank you!

Video Playback address:www.bilibili.com/video/BV1zq…