基于CDN边缘网络智能优化图片和视频

本文由Akamai高级技术顾问——何明聪在LiveVideoStack线上分享演讲内容整理而成。在分享中，何明聪老师结合Akamai图片和视频优化方案及具体实践经验，详细解析了如何在无需修改源站代码的前提下，通过自动化的工作流程在cdn边缘网络智能优化图片和视频。

文 / 何明聪

整理 / LiveVideoStack

大家晚上好，我是Akamai的高级技术顾问何明聪，随着在线业务的蓬勃发展，好的用户体验有助于帮助提升转化率已毋庸置疑，高质量的图片和视频已经成为吸引用户的关键因素。但是，既要交付制作精美，视觉效果出色的图片和视频，又要保证用户体验，尤其是在高延迟的移动蜂窝网络和移动终端上，这两者之间找到平衡，是一个非常复杂的工作，所以我结合Akamai的视频优化和解决方案，今天和大家分享几个方面的内容。第一是当前图片和视频优化的挑战，第二是Akamai图片和视频优化的工作原理，第三也和大家有一个案例分享。

1.图片和视频优化的挑战

互联网是在持续进化中，最终服务于用户，而用户对体验的追求是在持续提升的，随着网络基础设施的逐步延伸和各种智能终端的普及，大家都希望可以看到更高清、更丰富的图片和视频，所谓一图胜千言，纯粹的文字对很多用户来说已经没有吸引力了。上图是来自索尼官网的展示，它记录了从1998年到2019年整个官网变化的过程，我相信这也是互联网持续进化的一个缩影。我们可以看到在1998年时，整个网站主要以文字为主，在2009年多了一些图片，到了2014年，图片的大小、数量和色彩度都是有增加的，到2019年时，整个网站除了图片还增加了视频内容，这大大提升了访问网站的用户体验。

更多的图片和视频内容，当然能够吸引很多用户，但是另一方面，也导致了整个互联网的站点变得更加沉重。通过Akamai对Alexa Top10000的站点分析，近一年平均网站的大小增长在70%以上，这很大程度上都是因为图片和视频等富媒体内容的增长而导致的。通过一些第三方的报告，我们可以看到，平均页面图片的占比已经达到了63%，并且我们也预计在2022年移动端的视频流量将会占到整个移动流量的79%以上。

这里就出现了我们图片和视频处理的几个挑战，第一是丰富的图片和视频内容能够提升用户参与度和体验，但是也会导致用户打开这些资源时变得更慢。第二是对同一个图片和视频资源，可能需要创建多个副本，而创建、存储和管理这些副本是比较复杂的。比如考虑到设备类型、操作系统、浏览器能力的差异，需要针对性的创建不同的衍生版本以及格式；还有一些新的需求场景，比如需要对图片进行转换，包括裁剪、翻转、加水印、人脸贴图等等，这些都会导致非常多的副本需要创建、存储和管理。第三点是复杂的交付逻辑，也就是如何将创建的不同副本，基于终端用户的情况，将最适合的一份分发给最终用户，这些如果在源站实现会涉及到非常复杂的代码逻辑。这是图片和视频优化几个不同的挑战。

为了应对这些挑战，Akamai的图片和视频解决方案，就应运而生了，Akamai的图片和视频解决方案，只需要在源站存储一份高清的原始文件，对格式的转换，文件的压缩，裁剪翻转等这些动作都是在CDN进行，不需要在源站管理文件的多个副本，同时也节省了源站存储的成本。对CDN创建的各个文件副本，CDN会根据智能终端的设备、浏览器的类型，屏幕大小等做自适应的分发，避免在源站做复杂的代码逻辑。同时所有的转换都是以图片和视频的质量为保证前提的，转换后的视频图片会变得更小，用户打开后也会变得更快，体验会更好。

2.Akamai图片&视频优化的工作原理

接下来，我为大家介绍一下图片和视频解决方案的工作原理，实际上从整体而言分成了4步，非常简单。第一步是从源站拉取原始高清的图片或视频文件，第二步是对图片和视频进行各种转换，如果需要对它进行裁剪、缩放、加水印等都是在这步完成，第三步就是对图片和视频按照不同格式、大小兼顾质量去做各种维度的优化，最后一步是通过Akamai CDN的边缘节点做全球用户分发。

2.1 拉取源站媒体内容

首先我们看第一步，通常来说所有的媒体资源都是放在内容管理的平台CMS或是DAM，所有的用户访问图片时，它会是先经过Akamai的CDN和IVM的平台，IVM只需要回源拉取一份高清的图片，接下来的工作就都在CDN平台去完成的。

2.2 转换

第二步是图片的转换。所有的转换都是通过定义的策略去驱动的，这些策略可以根据不同的需求去做自定义，包括设定转换后的图片质量，分辨率，以及做哪种方式的图片转换。设定好这些转换策略后，终端用户请求对应的资源就会触发策略开始对图片进行自动转换。转换的策略在CDN都可以通过我们的UI Policy manager，也可以通过APIs去调用。对于图片来说，几乎所有的艺术转换功能都支持，包括调整背景图片、面部识别、自动裁剪、灰度化、加水印、翻转等等。

2.3 优化图片和视频

第三步就是怎么样去优化图片和视频，这一步简单而言就是一句话，让图片和视频变得更小。对于图片而言，我们可以采用Akamai基于视觉质量的专利压缩算法，在相同的图片格式下，能够让图片压缩变得更小。对于视频来说，我们可以把一些高码率的视频转化成低码率，这样文件的大小也会变得更小。

第二种方式是结合终端的特性，对图片和视频进行不同格式的转换，比如对原始的JPEG图片来说，WebP格式在相同的质量下，大小会比JPEG来说要小35%左右，我们可以在CDN上把JPEG的图片自动转成WebP格式，当用户请求这张JPEG图片时，给他分发WebP格式，这样他获取到的文件大小会小35%左右，打开也会更快。同样部分浏览器是支持JPEG XR和JPEG 2000的，我们也可以利用这样的特性，对图片进行相应的转换后，之后CDN根据终端浏览器的能力智能分发转换后的图片，终端用户就能享受到图片优化的效果。对视频来说，我们通常常见的视频压缩格式是H.264，那我们可以把H.264转化为H.265或者是V9的标准。H.265、V9相比H.264来说，压缩效率更高，压缩后的大小通常会小50%左右。所以如果用户是使用Safari或Chrome浏览器，我们就可以针对客户端浏览器的能力，去做视频格式的转换，相比图片来说，视频压缩对字节的节省会更加明显。

第三种方式是针对客户端的屏幕大小，可以对图片和视频做Resize，比如说原始文件宽度是2048，考虑不同移动终端的情况，可以设置转换策略支持320、640、1024和2048这几种不同的宽度，之后CDN可以针对不同终端自适应的分发最佳尺寸的图片。如果屏幕比较小时，我们可以分发相对比较小的图片；如果比较大时，可以把大尺寸的图片分发给最终用户。同样对于视频来说，我们也可以做类似的Resize。所以结合这三种优化方法，我们可以让图片和视频变得更小。

接下来我们也分享更多的细节，非常重要的一点是平衡尺寸、质量和文件大小的关系。Akamai后台有工具可以帮助我们在设定策略时，选择合适的尺寸、质量和格式。比如一个1920px宽度的mp4视频文件，通过工具我们可以看到选择转换成不同的尺寸、质量和格式时文件大小的节省是不一样的。如果保持1920px的宽度，选择转换成high的质量和webm的格式，相比原始文件可以节省10.2%的大小。同样保持1920px的像素宽度，我们把它转成medium质量的话，可以节省32.8%的大小。对于一些小屏幕的终端设备，可以把它转成 853px的像素，同时保持high的视频质量，这时大小可以节省70.9%。通过这样的工具，可以提前看到使用之后的效果，平衡尺寸、质量以及文件大小的关系。

接下来我们可以看一下在后台设置Policy的界面。上面分别是Image Policy Editor和Video Policy Editor的配置界面。整个过程非常的简单，如果是图片，可以设置转换后图片的质量和宽度，如果需要对图片进行艺术转换，可以设置转换的策略。转换的策略有非常多的类型，前面也有提到，比如说加水印、裁剪、翻转、图片镜像等，这些功能一应俱全。对视频来说只需要设置好转化后的视频质量和视频宽度就可以了。

设置好策略之后，再去调用这些图片是非常简单的，只需要在图片后带上对应的策略名称。这里举一个例子，我们想针对左边的图片对脸部进行聚焦之后变成黑白色，我们只需要调用上面的连接，然后带上Policy的名称，对应的图片也就生成了，是不是非常的简单方便？

2.4 全球CDN边缘网络交付

最后一步，我们结合Akamai在全球的CDN边缘网络去做交付。大家知道Akamai的IVM解决方案是依托于CDN，IVM的客户也可以享受到整个CDN平台高度分布的边缘网络带来的好处。目前这个网络已经分布在全球130+国家，900+城市，4000+数据中心，1400+ISP的覆盖，这对最终用户来说，他去获取转换后的图片和视频性能一定是比较好的，因为他在当地就能接入Akamai的CDN节点。

通过IVM转化后的图片和视频与CDN上其他资源的管理策略是相似的，比如说一些清缓存，TTL时间的设定，都是跟CDN的操作方式是一样的。

同时，CDN可以根据客户端的能力去做自适应，我们有非常庞大而精准的终端设备库，能够根据不同终端的类型，去自适应分发最适合的，提前转好的图片和视频给到最终用户。

IVM也提供了非常详细的报表给用户，让用户了解使用IVM节省了多少流量和带宽，转换之后的图片和视频类型等，这些在后台都有非常详细的报表可以看到整个使用的状况。

3.案例分享

接下来我跟大家分享一个客户的案例，这是一个香港的客户，他们的官网上有比较大的视频和图片，视频的大小差不多占了10MB，图片也是非常大的，有10MB左右。他们的很多用户，一直反馈说打开会比较慢，整个视频的下载时间比较长，对用户体验的影响比较大，收到了很多用户的抱怨。

他们使用Akamai图片和视频解决方案之后，帮助他们解决了之前用户体验的问题，效果非常明显。Akamai提供了不同的工具来看到这个效果。首先是客户端上面的，有个叫PIEZ的插件，装上这个插件后，用户可以看到在图片视频优化的效果。上面两个框是视频优化后节省的整个文件的大小和具体转换使用的一些策略，可以看到两个视频帮助共节省了9.1MB差不多63.8%的大小，图片节省了58%左右的大小，小了6.6MB，最终用户打开官网的速度更快了。下面那个框可以看到转化策略的一些参数，比如源站是两个MP4的文件，经过转换我们把它变成了webm的格式，有一列File Chosen代表这个URL转换使用的策略，这里用到了更高效的VP9视频压缩算法，这也是为什么整个视频大小能过大大降低的原因。

前面是单个用户的情况，通过Akamai RUM工具mPulse可以看到整体用户使用的效果。对比优化前和优化后，从Page load time来说，在4.21使用IVM之前，整个页面的加载时间是7-8s，但是在优化之后，平均Page load time变成了2-4s，这其实是个非常明显的效果。同样在其他维度，TTVR和它的Hero Image的图片，都有类似优化的效果。

我们以整个时间轴来看，变化的趋势更加明显，有点需要提醒注意的是，所有的数据都是以50%分位的数据对比，可以看到在4.21之前它的TTVR、Page load time还有Hero Image加载的时间都是有非常显著的下降的。

这是这个客户使用IVM的案例分享，我相信在不同客户的应用场景中Akamai的IVM也能够发挥它图片和视频优化的巨大价值。

最后简单的总结下，Akamai的IVM给我们带来的一些关键收益。第一只需要在源站存储一份高清的原始文件，对文件的转换在CDN进行，降低了在源站创建、存储和管理文件多个副本的复杂度和成本。第二对CDN创建的各个文件副本，CDN会智能地根据终端的设备，浏览器的类型，屏幕大小做自适应的分发，避免在源站实现复杂的分发逻辑。第三所有的转换都是以图片和视频的质量为保证前提的，转换后的视频图片会变得更小，用户打开更快，体验会更好。

以上就是我分享的主要内容，谢谢！

视频回放地址：https://www.bilibili.com/video/BV1zq4y1j7KW

详情请扫描图中二维码或点击阅读原文了解大会更多信息。

原文链接：https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/117719067?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918469516782248547387%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918469516782248547387&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-25-117719067-null-null.article_score_rank_blog&utm_term=%E9%A6%99%E6%B8%AFcdn