云式博客

WebP格式CDN自动交付

WebP文件格式选择启动网站速度

向网站访问者显示图像最优化目标之一是在保持高显示质量的同时尽量减少图像文件大小
小图像文件大小直接转换为更快加载时间,降低带宽成本并改进用户浏览经验小文件大小直接转换为低图像质量并可能损及访问者满意度保持正确平衡既关键又难
结果 难得找到解决方案 减少图像文件尺寸 而不牺牲图像质量幸运的是 事实正是如此 谷歌WebP文件格式.
WebP是2010年谷歌首次推出的强图像格式WebP格式使用远小于广受欢迎的JPEG图像格式编译照片
if it's so amazing图像格式, 为什么我们不在每个网站都看到它?广度WebP文件格式应用的主要挫折在于它并没有得到甚至最现代浏览器的广泛支持
谷歌热门 染色体web浏览器 歌剧院浏览器原创支持WebP、Firefox和InternetExplorer不支持支持WebP需要动动地决定是否提供WebP文件格式或JPG/PNG图像
数周前我们介绍Cloudinary支持WebP格式 如何支持WEP图像,保存带宽并改进用户性能.文章中,我们描述你如何设置CloudinaryjQuery插件检查浏览器是否支持WebP,如果支持,则告诉Cloudinary动态生成并交付WebP文件而不是标准JPG/PNG文件
Query懒洋溢客户端方法有其长处,但如果处理整个逻辑本可以简单得多 透明化服务端为您服务这正是我们在过去数周中一直在研究的
博客文章中我们想介绍 云性无缝支持动态发送WebP图像.

启动自动WebP交付

云化系统现在可识别支持WEP浏览器请求图像URL时云形自动转换图像到WebP文件格式并交付缓存优化 上海CDN.
并通知云化时自动使用WebP f_aut'(Format=Auto)至云性智能交付URL
下方可见两幅样本图片左侧图像使用无云式新f_auto标志的URL并因此以JPG格式在所有浏览器中发布(同时按空向300px宽度缩放并保留方位比)。右侧图像包括交付URL中的f_auto,使用Google Chrome即以WebP交付生成WebP图像只权重 6.9KB中意 60%小JPEG版本交付Firefox访问者Safari访问者
PG图像 WebP自动图像
16.9KBJPG6.9KBWEP
就是这样微小加法即为网络应用所需要 快速加载并节省高带宽成本网站为Chrome使用量比其他人多的Chrome服务
注释 :
  • f_auti系统只支持使用AkamaiCDN交付的云用户用户当前不支持云前分发
  • 透明WebP支持工作时,交付URL必须明文包括'f_auto'因此,你不能设置取自格式内命名变换代之以,您可使用命名变换并链化 URL

赋能WebP程序化交付

云化客户集成库已支持新式f_auto特性几个例子说明如何生成网际网际网际网际网际网际网际网际网际网际网际网际网际网际网际网际
Ruby铁路公司
拷贝剪切板
<%=CL_image_tag...样本jpg...,宽度=>300,:crop=>:标度,:fetch_format=>:auto)%>
PHP:
拷贝剪切板

                    回声CL_image_tag...样本jpg...,数组高山市...宽度...=>300,...裁剪...=>...尺度化...,...fack_format...=>...汽车...));? >
Python和Django
拷贝剪切板
cloudinary.CloudinaryImage(...样本jpg....image(width=300..........尺度化...flack_format=...汽车...)
节点js:
拷贝剪切板
cloudinary.image(...样本jpg........宽度:百元,裁剪:...尺度化...,fack_format:...汽车...}
.Net:
拷贝剪切板
cloudinary.Api.UrlImgUp.Transform(新建Transformation().Width(300.H8ER(130.Crop...尺度化....FetchFormat...汽车...中文本不适用BuildingIgageTag...样本jpg...);
Java和Android:
拷贝剪切板
cloudinary.url().transformation(新建Transformation().width(300.crop...填充....fetformat'汽车'中文本不适用生成器...样本jpg...);


远程取用现有图像

webP支持图像优先上传云端,或从服务器代码上传API或直接从访问者浏览器上传API
Cloudinary除直接上传外,还支持通过公共URL取图像,转换这些实时图像并交付通过CDN优化后生成图像(见 博客文章详解)
举个例子,这意味着您可以很容易地将云化与网站整合而无需修改您的基础设施和代码简单前缀图像URL
云形新WebP支持下,您现在可以设置取件格式为' 汽车动态转换图像WebP格式
举例说, URL提供Usain Bolt图片取自远程Wikimedia公共HTTP URL远程图像由云端取取,持久存储云中,动态转换为WebP,通过高端CDN支持并交付优化并缓存
Usain Bolt-cet-WebP
注意WebP上方图像缩放 50% 从33.6KB到16.8KB不影响显示质量可见
可动态应用云化图像变换取图像下示例将图像裁成广场,使其颜色轻化并环绕角角
Usain Bolt-cet-WebP带特效

摘要

WebP文件格式是优化网站应用的高效方式CloudinaryWebP支持我们希望WebP转换和交付过程如此简单,不使用脑机,研发IT方面近乎零技术努力
WebP自动转换和CDN发送WebP图像目前可供所有免费付费计划使用
最好你试一试 告诉我们你的想法任何反馈或建议都非常感激

最近博客文章

2B估价

通过
黑石增长投资云

当我们开始2012年行程时, 我们想改善我们开发者的生活, 使我们更容易处理我们代码中处理图片视频的艰巨任务开发者代码初始线演化成全套媒体经验解决方案,由传教士驱动,在过去十年中逐步露面:帮助公司释放媒体的全部潜力以创造最吸引人的视觉经验

读更多

强制视觉经验强制dTC电子商务

由PradipLal
直接对消费者电子商务需求强制视觉经验

象你这样的牌子直接对消费者电子商务方法没有零售商或市场参与,你直接和及时地深入了解进化购物行为正因如此,你可满足店主偏好,持续调整产品提供量并用欢乐和趣味瞬间插插商购物之旅机会多发 培养客户关系

读更多

自动翻译视频促进国际拓展

通过
自动翻译视频国际观众

不论业务焦点-公共事业B2B集成化-招聘-多媒体,特别是视频-在与听众通信方面非常有效提供视频为不同阅读者提供传播任务,例如引导制作工作室服务人工编译编程、编程并加字幕操作成本高慢,特别是面向全局内容

读更多

流送高品质艺术

通过
云式帮助嵌入式管理

David去年十月首次分享他的想法,本案例研究使用云词缩略版Mindet成功

随着时间的推移,插图设计师、纺织设计师、画家、打包设计师、营销员和居家母亲等核心为薄度世界贡献者,其创举越来越难实现。遗留技术不再割裂它-云形系统应插手

读更多
图像集2021和图像集2022预览

新年趋势不变可视媒体在驱动在线转换方面继续发挥举足轻重作用与视觉经验趋势和最佳做法保持同步,云端组织一年一度会议称为imageCon,这是帮助参与者创建最有吸引力视觉经验的一举一动事件

读更多