论坛 › 西藏 › 基于CDN边缘网络智能优化照片和视频

tw4ld6 发表于 2024-8-31 04:19:26

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

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由Akamai高级技术顾问——何明聪在LiveVideoStack线上分享演讲内容整理而成。在分享中，何明聪老师结合Akamai<span style="color: black;">照片</span>和视频优化<span style="color: black;">方法</span>及<span style="color: black;">详细</span>实践经验，<span style="color: black;">仔细</span>解析了<span style="color: black;">怎样</span>在无需修改源站代码的前提下，<span style="color: black;">经过</span>自动化的工作流程在CDN边缘网络智能优化<span style="color: black;">照片</span>和视频。</p><span style="color: black;">文 / 何明聪</span><span style="color: black;">整理 / LiveVideoStack</span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SI0g4VuUjQ3ryRlmCQbg9QWCfjHULNVBYzvrkj3fcTLRQgttiboEiaWYg/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">大众</span><span style="color: black;">夜晚</span>好，我是Akamai的高级技术顾问何明聪，随着在线业务的蓬勃发展，好的用户体验有助于<span style="color: black;">帮忙</span><span style="color: black;">提高</span>转</span><span style="color: black;">化率已毋庸置疑，高质量的<span style="color: black;">照片</span>和视频<span style="color: black;">已然</span><span style="color: black;">作为</span>吸引用户的关键<span style="color: black;">原因</span>。<span style="color: black;">然则</span>，既要交付制作精美，视觉效果出色的<span style="color: black;">照片</span>和视频，又要<span style="color: black;">保准</span>用户体验，尤其是在高延迟的移动蜂窝网络和移动终端上，这两者之间找到平衡，是一个非常<span style="color: black;">繁杂</span>的工作，<span style="color: black;">因此</span>我结合Akamai的视频优化和<span style="color: black;">处理</span><span style="color: black;">方法</span>，今天和<span style="color: black;">大众</span>分享几个方面的内容。<span style="color: black;">第1</span>是当前<span style="color: black;">照片</span>和视频优化的挑战，第二是Akamai<span style="color: black;">照片</span>和视频优化的工作原理，第三<span style="color: black;">亦</span>和<span style="color: black;">大众</span>有一个案例分享。</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">1.<span style="color: black;">照片</span>和视频优化的挑战</strong></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SJUrdVwsLrQZekiaMvLE9atT8qTNZZh3b8WjT0icrfaoqaMC1A9etkcbA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">互联网是在<span style="color: black;">连续</span>进化中，<span style="color: black;">最后</span>服务于用户，而用户对体验的追求是在<span style="color: black;">连续</span>提升的，随着网络<span style="color: black;">基本</span><span style="color: black;">设备</span>的逐步延伸和<span style="color: black;">各样</span>智能终端的普及，<span style="color: black;">大众</span>都<span style="color: black;">期盼</span><span style="color: black;">能够</span>看到更高清、更丰富的<span style="color: black;">照片</span>和视频，<span style="color: black;">所说</span>一图胜千言，纯粹的文字对<span style="color: black;">非常多</span>用户<span style="color: black;">来讲</span><span style="color: black;">已然</span><span style="color: black;">无</span>吸引力了。上图是来自索尼官网的展示，它记录了从1</span><span style="color: black;">998</span><span style="color: black;">年到2</span><span style="color: black;">019</span><span style="color: black;">年<span style="color: black;">全部</span>官网变化</span><span style="color: black;">的过程，我相信这<span style="color: black;">亦</span>是</span><span style="color: black;">互联网<span style="color: black;">连续</span>进化的一个缩影。<span style="color: black;">咱们</span><span style="color: black;">能够</span>看到在1</span><span style="color: black;">998</span><span style="color: black;">年时，<span style="color: black;">全部</span>网站<span style="color: black;">重点</span>以文字为主，在</span><span style="color: black;">20</span><span style="color: black;">0</span><span style="color: black;">9</span><span style="color: black;">年多了<span style="color: black;">有些</span><span style="color: black;">照片</span>，到了</span><span style="color: black;">20</span><span style="color: black;">1</span><span style="color: black;">4</span><span style="color: black;">年，<span style="color: black;">照片</span>的<span style="color: black;">体积</span>、数量和色彩度都是有<span style="color: black;">增多</span>的，到2</span><span style="color: black;">019</span><span style="color: black;">年时，<span style="color: black;">全部</span>网站除了<span style="color: black;">照片</span>还<span style="color: black;">增多</span>了视频内容，这大大<span style="color: black;">提高</span>了<span style="color: black;">拜访</span>网站的用户体验。</span></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SsVsS4swXicY7rmEqWBS7f5iace1vqyceHDLic2bEWMzVc1eWqVdRER7BQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">更加多</span>的<span style="color: black;">照片</span>和视频内容，当然能够吸引<span style="color: black;">非常多</span>用户，<span style="color: black;">然则</span>另一方面，<span style="color: black;">亦</span><span style="color: black;">引起</span>了<span style="color: black;">全部</span>互联网的站点变得更加沉重。<span style="color: black;">经过</span>Akamai对Alexa Top10000的站点分析，近一年平均网站的<span style="color: black;">体积</span>增长在70%以上，这很大程度上都是<span style="color: black;">由于</span><span style="color: black;">照片</span>和视频等富媒<span style="color: black;">身体</span>容的增长而<span style="color: black;">引起</span>的。<span style="color: black;">经过</span><span style="color: black;">有些</span>第三方的报告，<span style="color: black;">咱们</span><span style="color: black;">能够</span>看到，平均页面<span style="color: black;">照片</span>的占比<span style="color: black;">已然</span>达到了63%，并且<span style="color: black;">咱们</span><span style="color: black;">亦</span>预计在2022年移动端的视频流量将会占到<span style="color: black;">全部</span>移动流量的79%以上。</span></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SicwiaQA1t34L0ibtic5uNicSyBHILbG8qAwG1RibZI696F68GHib3AbO46c5Q/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">这儿</span>就<span style="color: black;">显现</span>了我们<span style="color: black;">照片</span>和视频处理的几个挑战，<span style="color: black;">第1</span>是丰富的<span style="color: black;">照片</span>和视频内容能够<span style="color: black;">提高</span>用户参与度和体验，<span style="color: black;">然则</span><span style="color: black;">亦</span>会<span style="color: black;">引起</span>用户打开这些资源时变得更慢。第二是对同一个<span style="color: black;">照片</span>和视频资源，可能需要创建多个副本，而创建、存储和管理这些副本是比较<span style="color: black;">繁杂</span>的。<span style="color: black;">例如</span><span style="color: black;">思虑</span>到设备类型、操作系统、浏览器能力的差异，需要针对性的创建<span style="color: black;">区别</span>的衍生版本以及格式；还有<span style="color: black;">有些</span>新的<span style="color: black;">需要</span>场景，<span style="color: black;">例如</span>需要对<span style="color: black;">照片</span>进行转换，<span style="color: black;">包含</span>裁剪、翻转、加水印、人脸贴图等等，这些都会<span style="color: black;">引起</span>非常多的副本需要创建、存储和管理。第三点是<span style="color: black;">繁杂</span>的交付<span style="color: black;">规律</span>，<span style="color: black;">亦</span><span style="color: black;">便是</span><span style="color: black;">怎样</span>将创建的<span style="color: black;">区别</span>副本，基于终端用户的<span style="color: black;">状况</span>，将最适合的一份分发给<span style="color: black;">最后</span>用户，这些<span style="color: black;">倘若</span>在源站实现会<span style="color: black;">触及</span>到非常<span style="color: black;">繁杂</span>的代码<span style="color: black;">规律</span>。这是<span style="color: black;">照片</span>和视频优化几个<span style="color: black;">区别</span>的挑战。</span></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SMDjMhKL3cPCSSHKGKKLYiaIwcP7oKjwnZnic1rYfxFWKvkuEdsQ8gwSQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">为了应对这些挑战，Akamai的<span style="color: black;">照片</span>和视频<span style="color: black;">处理</span><span style="color: black;">方法</span>，就应运而生了，Akamai的<span style="color: black;">照片</span>和视频<span style="color: black;">处理</span><span style="color: black;">方法</span>，只需要在源站存储一份高清的原始文件，对格式的转换，文件的压缩，裁剪翻转等这些动作都是在C</span><span style="color: black;">DN</span><span style="color: black;">进行，不需要在源站管理文件的多个副本，<span style="color: black;">同期</span><span style="color: black;">亦</span>节省了源站存储的成本。对C</span><span style="color: black;">DN</span><span style="color: black;">创建的各个文件副本，C</span><span style="color: black;">DN</span><span style="color: black;">会<span style="color: black;">按照</span>智能终端的设备、浏览器的类型，屏幕<span style="color: black;">体积</span>等做自适应的分发，避免在源站做<span style="color: black;">繁杂</span>的代码<span style="color: black;">规律</span>。<span style="color: black;">同期</span>所有的转换都是以<span style="color: black;">照片</span>和视频的质量为<span style="color: black;">保准</span>前提的，转换后的视频<span style="color: black;">照片</span>会变得更小，用户打开后<span style="color: black;">亦</span>会变得更快，体验会更好。</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">2.Akamai<span style="color: black;">照片</span>&amp;视频优化的工作原理</strong></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SPHKTLK4bDV68w6TeISibqbYMwnA9D9c5NtDgDUlSPzkEtNJic0LXR8kw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">接下来，我为<span style="color: black;">大众</span>介绍一下<span style="color: black;">照片</span>和视频<span style="color: black;">处理</span><span style="color: black;">方法</span>的工作原理，<span style="color: black;">实质</span>上从整体而言分<span style="color: black;">成为了</span>4步，非常简单。<span style="color: black;">第1</span>步是从源站拉取原始高清的<span style="color: black;">照片</span>或视频文件，第二步是对<span style="color: black;">照片</span>和视频进行<span style="color: black;">各样</span>转换，<span style="color: black;">倘若</span>需要对它进行裁剪、缩放、加水印等都是在这步完成，第三步<span style="color: black;">便是</span>对<span style="color: black;">照片</span>和视频<span style="color: black;">根据</span><span style="color: black;">区别</span>格式、<span style="color: black;">体积</span>兼顾质量去做<span style="color: black;">各样</span>维度的优化，最后一步是<span style="color: black;">经过</span>Akamai</span><span style="color: black;">&nbsp;CDN</span><span style="color: black;">的边缘节点做<span style="color: black;">全世界</span>用户分发。</span></span><span style="color: black;"><strong style="color: blue;">2.1 拉取源站媒<span style="color: black;">身体</span>容</strong></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SKSJiaXk8SUaY1wDwXGWSIPCXWbzbeFJb2wt5oukMZ2GNrk0ibmchPfKw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">首要</span><span style="color: black;">咱们</span>看<span style="color: black;">第1</span>步，<span style="color: black;">一般</span><span style="color: black;">来讲</span>所有的<span style="color: black;">媒介</span>资源都是放在内容管理的平台C</span><span style="color: black;">MS</span><span style="color: black;">或是D</span><span style="color: black;">AM</span><span style="color: black;">，所有的用户<span style="color: black;">拜访</span><span style="color: black;">照片</span>时，它会是先经过Akamai的C</span><span style="color: black;">DN</span><span style="color: black;">和I</span><span style="color: black;">VM</span><span style="color: black;">的平台，</span><span style="color: black;">IVM</span><span style="color: black;">只需要回源拉取一份高清的<span style="color: black;">照片</span>，接下来的工作就都在C</span><span style="color: black;">DN</span><span style="color: black;">平台去完成的。</span></span><span style="color: black;"><strong style="color: blue;">2.2 转换</strong></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SAtmqfdq3ewFU0v6BXICgd1TWicLp7Iw7QibliaRat8I4fofaqib61m1kvQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">第二步是<span style="color: black;">照片</span>的转换。所有的转换都是<span style="color: black;">经过</span>定义的策略去驱动的，这些策略<span style="color: black;">能够</span><span style="color: black;">按照</span><span style="color: black;">区别</span>的<span style="color: black;">需要</span>去做自定义，<span style="color: black;">包含</span>设定转换后的<span style="color: black;">照片</span>质量，分辨率，以及做哪种方式的<span style="color: black;">照片</span>转换。设定好这些转换策略后，终端用户请求对应的资源就会触发策略<span style="color: black;">起始</span>对<span style="color: black;">照片</span>进行自动转换。转换的策略在C</span><span style="color: black;">DN</span><span style="color: black;">都<span style="color: black;">能够</span><span style="color: black;">经过</span><span style="color: black;">咱们</span>的U</span><span style="color: black;">I</span><span style="color: black;">&nbsp;Policy</span><span style="color: black;">manager，<span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">经过</span>A</span><span style="color: black;">PI</span><span style="color: black;">s去调用。<span style="color: black;">针对</span><span style="color: black;">照片</span><span style="color: black;">来讲</span>，几乎所有的艺术转换功能都支持，<span style="color: black;">包含</span><span style="color: black;">调节</span>背景<span style="color: black;">照片</span>、面部识别、自动裁剪、灰度化、加水印、翻转等等。</span></span><span style="color: black;"><strong style="color: blue;">2.3 优化<span style="color: black;">照片</span>和视频</strong></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SpEKSpuMHkaYWT4Sv5CYhcP9l8G5edy36Lux3icVqwOfdVTd5ZAM2dFg/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第三步<span style="color: black;">便是</span>怎么样去优化<span style="color: black;">照片</span>和视频，这一步简单而言<span style="color: black;">便是</span>一句话，让<span style="color: black;">照片</span>和视频变得更小。<span style="color: black;">针对</span><span style="color: black;">照片</span>而言，<span style="color: black;">咱们</span><span style="color: black;">能够</span>采用Akamai基于视觉质量的专利压缩算法，在相同的<span style="color: black;">照片</span>格式下，能够让<span style="color: black;">照片</span>压缩变得更小。<span style="color: black;">针对</span>视频<span style="color: black;">来讲</span>，<span style="color: black;">咱们</span><span style="color: black;">能够</span>把<span style="color: black;">有些</span>高码率的视频转化成低码率，<span style="color: black;">这般</span>文件的<span style="color: black;">体积</span><span style="color: black;">亦</span>会变得更小。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第二种方式是结合终端的特性，对<span style="color: black;">照片</span>和视频进行<span style="color: black;">区别</span>格式的转换，<span style="color: black;">例如</span>对原始的JPEG<span style="color: black;">照片</span><span style="color: black;">来讲</span>，WebP格式在相同的质量下，<span style="color: black;">体积</span>会比JPEG<span style="color: black;">来讲</span>要小35%<span style="color: black;">上下</span>，<span style="color: black;">咱们</span><span style="color: black;">能够</span>在CDN上把JPEG的<span style="color: black;">照片</span>自动转成WebP格式，当用户请求这张JPEG<span style="color: black;">照片</span>时，给他分发WebP格式，<span style="color: black;">这般</span>他获取到的文件<span style="color: black;">体积</span>会小35%<span style="color: black;">上下</span>，打开<span style="color: black;">亦</span>会更快。<span style="color: black;">一样</span>部分浏览器是支持JPEG XR和JPEG 2000的，<span style="color: black;">咱们</span><span style="color: black;">亦</span><span style="color: black;">能够</span>利用<span style="color: black;">这般</span>的特性，对<span style="color: black;">照片</span>进行相应的转换后，之后CDN<span style="color: black;">按照</span>终端浏览器的能力智能分发转换后的<span style="color: black;">照片</span>，终端用户就能享受到<span style="color: black;">照片</span>优化的效果。对视频<span style="color: black;">来讲</span>，<span style="color: black;">咱们</span><span style="color: black;">一般</span><span style="color: black;">平常</span>的视频压缩格式是H.264，那<span style="color: black;">咱们</span><span style="color: black;">能够</span>把H.264转化为H.265<span style="color: black;">或</span>是V9的标准。H.265、V9相比H.264<span style="color: black;">来讲</span>，压缩效率更高，压缩后的<span style="color: black;">体积</span><span style="color: black;">一般</span>会小50%<span style="color: black;">上下</span>。<span style="color: black;">因此</span><span style="color: black;">倘若</span>用户是<span style="color: black;">运用</span>Safari或Chrome浏览器，<span style="color: black;">咱们</span>就<span style="color: black;">能够</span>针对客户端浏览器的能力，去做视频格式的转换，相比<span style="color: black;">照片</span><span style="color: black;">来讲</span>，视频压缩对字节的节省会更加<span style="color: black;">显著</span>。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第三种方式是针对客户端的屏幕<span style="color: black;">体积</span>，<span style="color: black;">能够</span>对<span style="color: black;">照片</span>和视频做Resize，<span style="color: black;">例如</span>说原始文件宽度是2048，<span style="color: black;">思虑</span><span style="color: black;">区别</span>移动终端的<span style="color: black;">状况</span>，<span style="color: black;">能够</span>设置转换策略支持320、640、1024和2048这几种<span style="color: black;">区别</span>的宽度，之后CDN<span style="color: black;">能够</span>针对<span style="color: black;">区别</span>终端自适应的分发最佳尺寸的<span style="color: black;">照片</span>。<span style="color: black;">倘若</span>屏幕比较小时，<span style="color: black;">咱们</span><span style="color: black;">能够</span>分发相对比较小的<span style="color: black;">照片</span>；<span style="color: black;">倘若</span>比<span style="color: black;">很强</span>时，<span style="color: black;">能够</span>把大尺寸的<span style="color: black;">照片</span>分发给<span style="color: black;">最后</span>用户。<span style="color: black;">一样</span><span style="color: black;">针对</span>视频<span style="color: black;">来讲</span>，<span style="color: black;">咱们</span><span style="color: black;">亦</span><span style="color: black;">能够</span>做类似的Resize。<span style="color: black;">因此</span>结合这三种优化<span style="color: black;">办法</span>，<span style="color: black;">咱们</span><span style="color: black;">能够</span>让<span style="color: black;">照片</span>和视频变得更小。</span></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SlBnOSe842otPXPGKBvRH36s0s9favAA2by8nt4b9RLWWlMvIr6ZAow/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">接下来<span style="color: black;">咱们</span><span style="color: black;">亦</span>分享<span style="color: black;">更加多</span>的细节，非常重要的一点是平衡尺寸、质量和文件<span style="color: black;">体积</span>的关系。Akamai后台有工具<span style="color: black;">能够</span><span style="color: black;">帮忙</span><span style="color: black;">咱们</span>在设定策略时，<span style="color: black;">选取</span>合适的尺寸、质量和格式。<span style="color: black;">例如</span>一个1</span><span style="color: black;">920</span><span style="color: black;">px宽度的mp</span><span style="color: black;">4</span><span style="color: black;">视频文件，<span style="color: black;">经过</span>工具<span style="color: black;">咱们</span><span style="color: black;">能够</span>看到<span style="color: black;">选取</span>转换成<span style="color: black;">区别</span>的尺寸、质量和格式时文件<span style="color: black;">体积</span>的节省是不<span style="color: black;">同样</span>的。<span style="color: black;">倘若</span>保持1</span><span style="color: black;">920</span><span style="color: black;">px的宽度，<span style="color: black;">选取</span>转换成high的质量和w</span><span style="color: black;">ebm</span><span style="color: black;">的格式，相比原始文件<span style="color: black;">能够</span>节省1</span><span style="color: black;">0.2</span><span style="color: black;">%的<span style="color: black;">体积</span>。<span style="color: black;">一样</span>保持1</span><span style="color: black;">920</span><span style="color: black;">px的像素宽度，我们把它转成medium质量的话，<span style="color: black;">能够</span>节省3</span><span style="color: black;">2.8</span><span style="color: black;">%的<span style="color: black;">体积</span>。<span style="color: black;">针对</span><span style="color: black;">有些</span>小屏幕的终端设备，<span style="color: black;">能够</span>把它转成&nbsp;</span><span style="color: black;">853</span><span style="color: black;">px的像素，<span style="color: black;">同期</span>保持high的视频质量，<span style="color: black;">此时</span><span style="color: black;">体积</span><span style="color: black;">能够</span>节省7</span><span style="color: black;">0</span><span style="color: black;">.</span><span style="color: black;">9%</span><span style="color: black;">。<span style="color: black;">经过</span><span style="color: black;">这般</span>的工具，<span style="color: black;">能够</span>提前看到<span style="color: black;">运用</span>之后的效果，平衡尺寸、质量以及文件<span style="color: black;">体积</span>的关系。</span></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6S4R3BcaGv2ribrZAKkOsOCVEC2PffzOPcwmHfTQM5nTzPZDvgxckrVgQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">接下来<span style="color: black;">咱们</span><span style="color: black;">能够</span>看一下在后台设置Policy的界面。上面分别是Image</span><span style="color: black;">&nbsp;P</span><span style="color: black;">olicy</span><span style="color: black;">&nbsp;E</span><span style="color: black;">ditor和Video</span><span style="color: black;">&nbsp;P</span><span style="color: black;">olicy</span><span style="color: black;">&nbsp;E</span><span style="color: black;">ditor的配置界面。<span style="color: black;">全部</span>过程非常的简单，<span style="color: black;">倘若</span>是<span style="color: black;">照片</span>，<span style="color: black;">能够</span>设置转换后<span style="color: black;">照片</span>的质量和宽度，<span style="color: black;">倘若</span>需要对<span style="color: black;">照片</span>进行艺术转换，<span style="color: black;">能够</span>设置转换的策略。转换的策略有非常多的类型，前面<span style="color: black;">亦</span>有<span style="color: black;">说到</span>，<span style="color: black;">例如</span>说加水印、裁剪、翻转、<span style="color: black;">照片</span>镜像等，这些功能一应俱全。对视频<span style="color: black;">来讲</span>只需要设置好转化后的视频质量和视频宽度就<span style="color: black;">能够</span>了。</span></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SvRuPtyyeQEEiapYxFMxpluMxh5IuppBzpggpsoLymSbYyTjmFA6dzaw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">设置好策略之后，再去调用这些<span style="color: black;">照片</span>是非常简单的，只需要在<span style="color: black;">照片</span>后带上对应的策略名<span style="color: black;">叫作</span>。<span style="color: black;">这儿</span>举一个例子，<span style="color: black;">咱们</span>想针对左边的<span style="color: black;">照片</span>对脸部进行聚焦之后变成黑白色，<span style="color: black;">咱们</span>只需要调用上面的连接，<span style="color: black;">而后</span>带上Policy的名<span style="color: black;">叫作</span>，对应的<span style="color: black;">照片</span><span style="color: black;">亦</span>就生<span style="color: black;">成为了</span>，是不是非常的简单方便？</span></span><span style="color: black;"><strong style="color: blue;">2.4 <span style="color: black;">全世界</span>CDN边缘网络交付</strong></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SpcbdEq45NYezibemD8wTQYne0xM01qOCpsCgg3eTHFfv4bdD4zsPeog/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">最后一步，<span style="color: black;">咱们</span>结合Akamai在<span style="color: black;">全世界</span>的CDN边缘网络去做交付。<span style="color: black;">大众</span><span style="color: black;">晓得</span>Akamai的IVM<span style="color: black;">处理</span><span style="color: black;">方法</span>是依托于CDN，IVM的客户<span style="color: black;">亦</span><span style="color: black;">能够</span>享受到<span style="color: black;">全部</span>CDN平台高度分布的边缘网络带来的好处。<span style="color: black;">日前</span>这个网络<span style="color: black;">已然</span>分布在<span style="color: black;">全世界</span>130+国家，900+城市，4000+数据中心，1400+ISP的覆盖，这对<span style="color: black;">最后</span>用户<span style="color: black;">来讲</span>，他去获取转换后的<span style="color: black;">照片</span>和视频性能<span style="color: black;">必定</span>是比较好的，<span style="color: black;">由于</span>他在当地就能接入Akamai的CDN节点。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">经过</span>IVM转化后的<span style="color: black;">照片</span>和视频与CDN上其他资源的管理策略是<span style="color: black;">类似</span>的，<span style="color: black;">例如</span>说<span style="color: black;">有些</span>清缓存，TTL时间的设定，都是跟CDN的操作方式是<span style="color: black;">同样</span>的。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">同期</span>，CDN<span style="color: black;">能够</span><span style="color: black;">按照</span>客户端的能力去做自适应，我们有非常庞大而<span style="color: black;">精细</span>的终端设备库，能够<span style="color: black;">按照</span><span style="color: black;">区别</span>终端的类型，去自适应分发最适合的，提前转好的<span style="color: black;">照片</span>和视频给到<span style="color: black;">最后</span>用户。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">IVM<span style="color: black;">亦</span><span style="color: black;">供给</span>了非常<span style="color: black;">仔细</span>的报表给用户，让用户<span style="color: black;">认识</span><span style="color: black;">运用</span>IVM节省了多少流量和带宽，转换之后的<span style="color: black;">照片</span>和视频类型等，这些在后台都有非常<span style="color: black;">仔细</span>的报表<span style="color: black;">能够</span>看到<span style="color: black;">全部</span><span style="color: black;">运用</span>的<span style="color: black;">情况</span>。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3.案例分享</strong></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6Sr1rWibShXNkTiaUSLvaIOr5AQIZoAo9rcLibLFKicPNlbic4aqEbtn7oHJA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">接下来我跟<span style="color: black;">大众</span>分享一个客户的案例，这是一个香港的客户，<span style="color: black;">她们</span>的官网上有比<span style="color: black;">很强</span>的视频和<span style="color: black;">照片</span>，视频的<span style="color: black;">体积</span>差不多占了1</span><span style="color: black;">0</span><span style="color: black;">MB，<span style="color: black;">照片</span><span style="color: black;">亦</span>是非常大的，有1</span><span style="color: black;">0</span><span style="color: black;">MB<span style="color: black;">上下</span>。<span style="color: black;">她们</span>的<span style="color: black;">非常多</span>用户，<span style="color: black;">始终</span>反馈说打开会比较慢，<span style="color: black;">全部</span>视频的下载时间比较长，对用户体验的影响比<span style="color: black;">很强</span>，收到了<span style="color: black;">非常多</span>用户的抱怨。</span></span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SiasPVMTBIjpb1pNtJNDkrrJfGIAZJRqCM25TkILTmW45Tz4DROiasxOw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">她们</span><span style="color: black;">运用</span>Akamai<span style="color: black;">照片</span>和视频<span style="color: black;">处理</span><span style="color: black;">方法</span>之后，<span style="color: black;">帮忙</span><span style="color: black;">她们</span>解决了之前用户体验的问题，效果非常<span style="color: black;">显著</span>。Akamai<span style="color: black;">供给</span>了<span style="color: black;">区别</span>的工具来看到这个效果。<span style="color: black;">首要</span>是客户端上面的，有个叫PIEZ的插件，装上这个插件后，用户<span style="color: black;">能够</span>看到在<span style="color: black;">照片</span>视频优化的效果。上面两个框是视频优化后节省的<span style="color: black;">全部</span>文件的<span style="color: black;">体积</span>和<span style="color: black;">详细</span>转换<span style="color: black;">运用</span>的<span style="color: black;">有些</span>策略，<span style="color: black;">能够</span>看到两个视频<span style="color: black;">帮忙</span>共节省了9.1MB差不多63.8%的大小，<span style="color: black;">照片</span>节省了58%<span style="color: black;">上下</span>的<span style="color: black;">体积</span>，小了6.6MB，<span style="color: black;">最后</span>用户打开官网的速度更快了。下面那个框<span style="color: black;">能够</span>看到转化策略的<span style="color: black;">有些</span>参数，<span style="color: black;">例如</span>源站是两个MP4的文件，经过转换<span style="color: black;">咱们</span>把它变<span style="color: black;">成为了</span>webm的格式，有一列File Chosen<span style="color: black;">表率</span>这个URL转换<span style="color: black;">运用</span>的策略，<span style="color: black;">这儿</span>用到了更<span style="color: black;">有效</span>的VP9视频压缩算法，这<span style="color: black;">亦</span>是<span style="color: black;">为何</span><span style="color: black;">全部</span>视频大小能过大大降低的<span style="color: black;">原由</span>。</span></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CZeKj44ymYbvSyb0r7k3ic2sblzbyTz6SAkzcFfxS3p41y8Qr1R28Uom9j2C5ibVibe7Tu3exss94VRoBwGY36cjA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">前面是单个用户的<span style="color: black;">状况</span>，<span style="color: black;">经过</span>A</span><span style="color: black;">kamai RUM</span><span style="color: black;">工具mPulse<span style="color: black;">能够</span>看到整体用户<span style="color: black;">运用</span>的效果。对比优化前和优化后，从Page</span><span style="color: black;">load</span><span style="color: black;">time<span style="color: black;">来讲</span>，在4</span><span style="color: black;">.21</span><span style="color: black;"><span style="color: black;">运用</span>I</span><span style="color: black;">VM</span><span style="color: black;">之前，<span style="color: black;">全部</span>页面的加载时间是7-</span><span style="color: black;">8</span><span style="color: black;">s，<span style="color: black;">然则</span>在优化之后，平均</span><span style="color: black;">Page load time</span><span style="color: black;">变<span style="color: black;">成为了</span>2-</span><span style="color: black;">4</span><span style="color: black;">s，这其实是个非常明显的效果。<span style="color: black;">一样</span>在其他维度，T</span><span style="color: black;">TVR</span><span style="color: black;">和它的Hero</span><span style="color: black;">&nbsp;I</span><span style="color: black;">mage的<span style="color: black;">照片</span>，都有类似优化的效果。</span></span><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">咱们</span>以<span style="color: black;">全部</span>时间轴来看，变化的趋势更加<span style="color: black;">显著</span>，有点需要提醒<span style="color: black;">重视</span>的是，所有的数据都是以50%分位的数据对比，<span style="color: black;">能够</span>看到在4.21之前它的TTVR、Page load time还有Hero Image加载的时间都是有非常<span style="color: black;">明显</span>的下降的。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这是这个客户<span style="color: black;">运用</span>IVM的案例分享，我相信在<span style="color: black;">区别</span>客户的应用场景中Akamai的IVM<span style="color: black;">亦</span>能够发挥它<span style="color: black;">照片</span>和视频优化的巨大价值。</span></p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">最后简单的总结下，Akamai的IVM给<span style="color: black;">咱们</span>带来的<span style="color: black;">有些</span>关键收益。<span style="color: black;">第1</span>只需要在源站存储一份高清的原始文件，对文件的转换在CDN进行，降低了在源站创建、存储和管理文件多个副本的<span style="color: black;">繁杂</span>度和成本。第二对CDN创建的各个文件副本，CDN会智能地<span style="color: black;">按照</span>终端的设备，浏览器的类型，屏幕<span style="color: black;">体积</span>做自适应的分发，避免在源站实现<span style="color: black;">繁杂</span>的分发<span style="color: black;">规律</span>。第三所有的转换都是以<span style="color: black;">照片</span>和视频的质量为<span style="color: black;">保准</span>前提的，转换后的视频<span style="color: black;">照片</span>会变得更小，用户打开更快，体验会更好。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">以上<span style="color: black;">便是</span>我分享的<span style="color: black;">重点</span>内容，谢谢！</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">视频回放<span style="color: black;">位置</span>：https://www.bilibili.com/video/BV1zq4y1j7KW</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><strong style="color: blue;">详情请扫描图中</strong></span><span style="color: black;"><strong style="color: blue;">二维码</strong></span><span style="color: black;"><strong style="color: blue;">或点击</strong></span><span style="color: black;"><strong style="color: blue;">阅读原文</strong></span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">认识</span>大会<span style="color: black;">更加多</span>信息。</strong></span></span></p>

情迷布拉格 发表于 2024-9-7 02:40:14

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

4lqedz 发表于 2024-10-24 00:40:31

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

查看完整版本: 基于CDN边缘网络智能优化照片和视频