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

tw4ld6

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

文 / 何明聪整理 / LiveVideoStack大众夜晚好，我是Akamai的高级技术顾问何明聪，随着在线业务的蓬勃发展，好的用户体验有助于帮忙提高转化率已毋庸置疑，高质量的照片和视频已然作为吸引用户的关键原因。然则，既要交付制作精美，视觉效果出色的照片和视频，又要保准用户体验，尤其是在高延迟的移动蜂窝网络和移动终端上，这两者之间找到平衡，是一个非常繁杂的工作，因此我结合Akamai的视频优化和处理方法，今天和大众分享几个方面的内容。第1是当前照片和视频优化的挑战，第二是Akamai照片和视频优化的工作原理，第三亦和大众有一个案例分享。

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

互联网是在连续进化中，最后服务于用户，而用户对体验的追求是在连续提升的，随着网络基本设备的逐步延伸和各样智能终端的普及，大众都期盼能够看到更高清、更丰富的照片和视频，所说一图胜千言，纯粹的文字对非常多用户来讲已然无吸引力了。上图是来自索尼官网的展示，它记录了从1998年到2019年全部官网变化的过程，我相信这亦是互联网连续进化的一个缩影。咱们能够看到在1998年时，全部网站重点以文字为主，在2009年多了有些照片，到了2014年，照片的体积、数量和色彩度都是有增多的，到2019年时，全部网站除了照片还增多了视频内容，这大大提高了拜访网站的用户体验。

更加多的照片和视频内容，当然能够吸引非常多用户，然则另一方面，亦引起了全部互联网的站点变得更加沉重。经过Akamai对Alexa Top10000的站点分析，近一年平均网站的体积增长在70%以上，这很大程度上都是由于照片和视频等富媒身体容的增长而引起的。经过有些第三方的报告，咱们能够看到，平均页面照片的占比已然达到了63%，并且咱们亦预计在2022年移动端的视频流量将会占到全部移动流量的79%以上。

这儿就显现了我们照片和视频处理的几个挑战，第1是丰富的照片和视频内容能够提高用户参与度和体验，然则亦会引起用户打开这些资源时变得更慢。第二是对同一个照片和视频资源，可能需要创建多个副本，而创建、存储和管理这些副本是比较繁杂的。例如思虑到设备类型、操作系统、浏览器能力的差异，需要针对性的创建区别的衍生版本以及格式；还有有些新的需要场景，例如需要对照片进行转换，包含裁剪、翻转、加水印、人脸贴图等等，这些都会引起非常多的副本需要创建、存储和管理。第三点是繁杂的交付规律，亦便是怎样将创建的区别副本，基于终端用户的状况，将最适合的一份分发给最后用户，这些倘若在源站实现会触及到非常繁杂的代码规律。这是照片和视频优化几个区别的挑战。为了应对这些挑战，Akamai的照片和视频处理方法，就应运而生了，Akamai的照片和视频处理方法，只需要在源站存储一份高清的原始文件，对格式的转换，文件的压缩，裁剪翻转等这些动作都是在CDN进行，不需要在源站管理文件的多个副本，同期亦节省了源站存储的成本。对CDN创建的各个文件副本，CDN会按照智能终端的设备、浏览器的类型，屏幕体积等做自适应的分发，避免在源站做繁杂的代码规律。同期所有的转换都是以照片和视频的质量为保准前提的，转换后的视频照片会变得更小，用户打开后亦会变得更快，体验会更好。

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

接下来，我为大众介绍一下照片和视频处理方法的工作原理，实质上从整体而言分成为了4步，非常简单。第1步是从源站拉取原始高清的照片或视频文件，第二步是对照片和视频进行各样转换，倘若需要对它进行裁剪、缩放、加水印等都是在这步完成，第三步便是对照片和视频根据区别格式、体积兼顾质量去做各样维度的优化，最后一步是经过Akamai CDN的边缘节点做全世界用户分发。2.1 拉取源站媒身体容首要咱们看第1步，一般来讲所有的媒介资源都是放在内容管理的平台CMS或是DAM，所有的用户拜访照片时，它会是先经过Akamai的CDN和IVM的平台，IVM只需要回源拉取一份高清的照片，接下来的工作就都在CDN平台去完成的。2.2 转换第二步是照片的转换。所有的转换都是经过定义的策略去驱动的，这些策略能够按照区别的需要去做自定义，包含设定转换后的照片质量，分辨率，以及做哪种方式的照片转换。设定好这些转换策略后，终端用户请求对应的资源就会触发策略起始对照片进行自动转换。转换的策略在CDN都能够经过咱们的UI olicymanager，亦能够经过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 olicy Editor和Video olicy 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能够看到整体用户运用的效果。对比优化前和优化后，从Pageloadtime来讲，在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给咱们带来的有些关键收益。第1只需要在源站存储一份高清的原始文件，对文件的转换在CDN进行，降低了在源站创建、存储和管理文件多个副本的繁杂度和成本。第二对CDN创建的各个文件副本，CDN会智能地按照终端的设备，浏览器的类型，屏幕体积做自适应的分发，避免在源站实现繁杂的分发规律。第三所有的转换都是以照片和视频的质量为保准前提的，转换后的视频照片会变得更小，用户打开更快，体验会更好。

以上便是我分享的重点内容，谢谢！

视频回放位置：https://www.bilibili.com/video/BV1zq4y1j7KW

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

情迷布拉格

回顾历史，我们感慨万千；放眼未来，我们信心百倍。

4lqedz

我深受你的启发，你的话语是我前进的动力。