WebP，淘宝都在用的图片优化方法

WebP 是什么？
WebP 是一种同时提供了有损压缩与无损压缩的图片文件格式。可以大大压缩图片的大小，并且图片的质量和 png、jpeg 等相同。WebP 的无损压缩比 png 格式的文件平均少了 45％的大小。

这里是使用了同一张图片转换为不同格式的图片后，对图片的大小进行对比的测试结果：

格式 webp jpeg png gif
大小 1.65MB 2.24MB 7.51MB 4.64MB
使用 webp 压缩后图片大小减少百分比 ↓ 26% ↓ 78% ↓ 64%
兼容性
目前大约 95.77% 的浏览器都支持 WebP 格式的图片，其中 Safari 浏览器仅在 Big Sur 及以上的macOS 系统才支持 WebP；针对不兼容的情况下，我们需要进行相应的降级措施。

降级处理原则

判断浏览器是否支持 webp 格式的图片
支持，展示 webp 格式的图片
不支持，使用图片原始格式进行展示
降级处理方式

JS 处理

   /** * 判断浏览器是否支持 webp*/// 方法1: 通过尝试加载一张 webp 格式的图片来判断function isSupportWebp() {const imgUrl = 'https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp';const image = new Image();image.src = imgUrl;image.onload = function() {// 加载成功，说明支持 webpreturn true;}image.onerror = function() {// 加载失败，说明不支持 webpreturn false;}}// 方法2: 通过判断 HTMLCanvasElement.toDataURL() 返回的 dataURI 来判断function isSupportWebp() {const str = document.createElement('canvas').toDataURL('image/webp');// 如果支持则会返回传入的类型 image/webp --> data:image/webp;base64,UklGRtgCAABXRUJQVlA4WAoAAAAwAAAAKwEAlQAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgSAAAAAQcQEREQkCT+/x9F9D/tf0MAVlA4IIAAAABwDQCdASosAZYAPm02mUmkIyKhICgAgA2JaW7hdrEbQAnsA99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfasAAD+/9YAAAAAAAAAAA==// 如果不支持则会返回默认值 image/png --> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADGSURBVHhe7cExAQAAAMKg9U9tCF8gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAONUAv9QAAcDhjokAAAAASUVORK5CYIIreturn str.indexOf('image/webp') > -1;}/** * 选择浏览器支持的图片格式*/function getImg(compressedImg, originalImg) {const isSupport = isSupportWeb();return isSupport ? compressedImg : originalImg;}

复制代码


HTML 处理：`<picture>` 元素利用浏览器会选择 `<picture>` 元素中最匹配的子 `<source>` 元素，如果没有匹配的，就选择 `<img>` 元素的 src 属性中的 URL 这一特点。如果浏览器支持 image/webp 类型的图片，则加载 `<source>` 元素中 srcset 属性指向的资源，如果不支持则跳过 `<source>` 元素，加载 `<img>` 元素。

复制代码 ```

降级处理示例

拿淘宝首页举个例子

图片 URL：img.alicdn.com/imgextra/i2…

在 chrome 中加载的是 webp 格式的图片：

在 IE 中加载的则是 jpg 格式的图片：

可以看出淘宝是对图片的 URL 进行了特殊处理，通过在原始图片后加上 _.webp 后缀来做降级处理，如果当前浏览器支持 webp 格式的图片，则加载 webp 格式的图片，若不支持则去掉 _.webp 的后缀加载 jpg 格式的图片。

最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激！

WebP，淘宝都在用的图片优化方法相关推荐

在京东、天猫、淘宝都存在情况下，为什么聚美还能崛起？
咖友提问:在京东,天猫,淘宝都存在情况下,为什么聚美还能起来啊?能崛起根本原因是啥? ▍刘百万烘焙家 CEO 电商的精髓在于长尾,供应链.如果你是做o2o那就是玩刚需.高频次,最后1km.话说回来, ...
python模拟登录网站_Python模拟登录淘宝都实现了，你还怕模拟登录？
文章转载自公众号 :裸睡的猪 , 作者猪哥66 最近想爬取淘宝的一些商品,但是发现如果要使用搜索等一些功能时基本都需要登录,所以就想出一篇模拟登录淘宝的文章! 看了下网上有很多关于模拟登录淘宝,但是 ...
没有基础怎么自学好淘宝美工设计？自学有哪些方法？
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享没有基础怎么自学好淘宝美工设计?自学有哪些方法?大多数人都会觉得,只要掌握了PS,就可以去做淘宝美工了,其实不然,小 ...
淘宝主图优化技巧测试淘宝女鞋主图点击率方法
其实我们在网上购物的时候,第一印象不是说你这个商品有多好,而是说这图片有多美,毕竟视觉上给我们的触动还是挺大的,所以不同的店家都会在图片上下文章,那么对于女鞋店来说,我们要如何优化这个主图呢?估计各位 ...
浅谈淘宝客运营的一些思路和方法
浅谈淘宝客运营的一些思路和方法我在之前的文章<如何吸引淘宝客推广你的商品>中提到:值得注意的是淘宝客这种推广方式可能不太适合入门级的淘宝店家,初级店家可以通过爆款等方式在市场上证明自身的 ...
弘辽科技：淘宝店铺快速引流的简便方法
原标题<弘辽科技:淘宝店铺快速引流的简便方法> 对于新开网店来说,没有销量并不可怕,最可怕的是没有流量.流量对于店铺的意义,是毋庸置疑的,就好比人类生活没有了氧气,所以商家在经营淘宝店铺时 ...
在matlab中怎么录制音频_怎么录制淘宝页面中的视频？简单方法，轻松搞定
原标题:怎么录制淘宝页面中的视频?简单方法,轻松搞定怎么录制淘宝页面中的视频?当前足不出户,大家就可以在很多的电商平台购买到自己心仪的商品.这其中商机也就产生了,如果不太想上班,或者说想要自己当老板 ...
弘辽科技：如何获取淘宝推广链接？有哪些推广方法？
原标题<弘辽科技:如何获取淘宝推广链接?有哪些推广方法?> 今天为大家介绍一种推广方式,名字叫做淘宝客推广.淘宝用户们也可以成为淘宝客,通过淘宝客推广方式来赚取佣金,那么各位淘宝客们知道如 ...
把微信做成找券机器人，淘宝查券返利小助手实现方法分享
把微信做成找券机器人,淘宝查券返利小助手实现方法,淘宝自动查券找券返利机器人实现方法分享一.淘客CMS网站全面打通PC和手机端,只需简单部署一下,就可以拥有属于自己的优惠券cms淘客网站,查券返利 ...

WebP，淘宝都在用的图片优化方法

WebP，淘宝都在用的图片优化方法相关推荐

最新文章

热门文章