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/imgext...!!6000000002909-0-tps-520-280.jpg_q75_.webp'; const image = new Image(); image.src = imgUrl; image.onload = function() { ...

如想获得最佳浏览体验，请拜访:https://blog.projectoms.com/p...家喻户晓，敬爱的苹果至今还没有齐全反对WebP压缩格局，而就当WebP还没有齐全取得反对时（仿佛就苹果不齐全反对）一个打着当年WebP的口号的全新图片压缩格局--AVIF半道杀了进去，它到底是什么来头，又会让苹果消耗多少年去反对呢.....咱们明天就来简略的理解一下。 图片WebP 支持性图表AVIF？WebP是基于Google的VP9视频压缩技术的，所以，你会惊奇的发现：AVIF是基于一种名为AV1（别想歪）的视频压缩技术的图片格式。 至于AV1是啥。。看看维基百科的介绍。 AV1 视频压缩格局AOMedia Video 1（简称AV1）是一个凋谢、免专利的视频编码格局，专为通过网络进行流传输而设计。它由凋谢媒体联盟（AOMedia）开发，该联盟由半导体企业、视频点播供应商和网页浏览器开发商于2015年成立。联盟最后由七家公司：Amazon、Cisco、Google、Intel、Microsoft、Mozilla 和 Netflix所组成，并发表技术重点为提供高质量网络影像。互联网工程工作组（IETF）也将这项工作标准化为互联网视频编解码器（NetVC）。 AV1的指标是取代其前身，即由Google开发的VP9视频压缩格局，并与动静图像专家组（MPEG）领导开发的高效率视频编码（HEVC）竞争。 AV1能够与Opus音频格式一起封装在WebM容器格局中，并可用于HTML5网络视频和网页即时通信。 初始版本 2018年3月28日最新版本 1.0.0 Errata 12019年1月9日AV1 版本信息AV1领有三种设置供解码器应用Main、High与Professional。Main容许8、10比特的色调深度以及4:0:0（灰阶）和4:2:0的色度抽样。High后续会反对4:4:4的色度抽样。Professional将会残缺反对4:0:0、4:2:0、4:2:2、4:4:4的色度抽样以及8、10、12位的色调深度。 图片AV1 视频压缩格局截止2021年11月，已取得75%的浏览器反对。 图片AVIF 图片压缩格局AV1图像文件格式（AVIF）是一种图像文件格式，用于存储与压缩基于AV1在HEIF容器格局标准的图像或图像序列。AVIF 正式版 1.0.0 版于 2019 年 2 月最终确定。 文件扩展名 .avif网络媒体类型 image/avif开发商 凋谢媒体联盟初始发行 v1.0.0，2019 年 2 月 19 日格局类型 图像格式 无损/有损压缩算法蕴含于 HEIF扩大自 HEIF , ISOBMFF , AV1AVIF 图片压缩格局AVIF 反对以下性能： 多种色调空间，包含： HDR（具备PQ或HLG传递函数、BT.2020原色和BT.2100色调空间） SDR（应用sRGB / BT.709或应用广色域） 通过CICP（ITU-T H.273 和 ISO/IEC 23091-2）或ICC 配置文件的色调空间信号 无损压缩和有损压缩 8、10、12 位色深 单色（alpha/depth）或多重量 4:2:0, 4:2:2, 4:4:4 色度子采样 胶片颗粒 ...

以后网络中，图片仍是占用流量较大的一部分，在网站的视觉效果和加载速度之间，咱们始终面临着两难抉择。一个网站的内容，不仅仅只有文字，图片、动图、视频等泛滥元素都在帮忙用户从咱们的网站获取更多的信息，当然，图片比起文字会耗费更多的网络资源，并且最令人担忧的是，它会减少网站的加载实现工夫，影响用户体验。 为了在尽可能不影响图片品质的前提下压缩体积，谷歌公司在 2010 年提出了 WebP 格局。 有一些事实的问题摆在咱们背后。 在互联网碎片化的大趋势下，绝对于文字来说，大部分人会更违心承受图片所传递的信息，因为看图总是那么的简略高效，咱们不必破费那么多的脑细胞去咬文嚼字，而后还得加上本人的一丢丢想象力，能力勉强领会作者想要表白的意思，而看图片，会将这些信息间接灌输给咱们的脑子，所有的信息都将会被传播。 问题也随之而来，当网站所展现的图片越多，加载速度则会越慢，这对于户外工作应用挪动设施或者网络环境较差的用户来说则更为显著。 所以咱们想尽办法去缩小图片的体积，晋升咱们页面的速度，有时甚至会甘于冒着图片品质重大降落的危险，只是为了可能帮咱们的用户节俭一点带宽或者缩小一点耗电量，但这种代价过于惨重，无论是对于搜索引擎还是用户来说，都太不敌对了。在保障图片品质和网站速度之间，咱们始终面临着两难抉择。 WebP 格局咱们通常应用的图片格式有 JPG，JPEG 和 PNG，但当初，WebP 也逐步倒退成为大部分开发者乐于承受并应用的图片格式之一。如果你还没有听过 WebP，那也很失常，不可否认的是它当初依然存在少部分浏览器的兼容性问题，然而就目前来说，谷歌，火狐，Edge 都曾经反对了 WebP 格局。 应用 WebP 格局，能够将等同品质的 PNG 图片体积缩小至 30%，而比照 GIF，WebP 则能够将体积缩小约 30%，国外当初曾经有取代 GIF 的趋势，这都还得从 WebP 的工作原理说起。 WebP 压缩形式应用帧内编码技术，并且基于像素块预测，帧内编码其实是一种视频压缩技术，像素块预测应用帧内相邻像素块的值进行预测，三个在下面，一个在右边，WebP 因而能够实现有损压缩，无损压缩，透明化和动图，并且体积还比 JPG，PNG 和 GIF 要小，劣势不堪称不显著。 效果图上面是应用 COS 数据处理的 WebP 压缩技术压缩 PNG 和 GIF 格局图像的成果比照图： PNG 压缩为 WebP：图像体积缩小 68.9% GIF 压缩为 WebP：图像体积缩小 67.14% 如图，WebP 图像压缩能够缩小均匀 70% 的图像大小，而且原图品质越高、越清晰，压缩收益率越大，个别压缩收益率在 35%-80%。 简略五步，失去 WebP 格局的图片1、首先登录腾讯云对象存储：https://console.cloud.tencent... 2、在存储桶列表中创立一个桶，而后进入桶内，并将提前准备好要进行转换的图片上传到桶中 ...

原文地址：https://segmentfault.com/a/1190000038458838作者：Fw恶龙本文首发于：思否一、前言对于 WebP 的反对状况，以及实用场景此处不做具体阐明，具体见官网文档。 先说论断，目前 WebP 反对状况占比拟大（数据如下），在适宜的场景下能够应用 WebP 格局图片来进步页面加载速度。 反对的浏览器占比达到近90%（数据起源：Can I Use）安卓零碎下大部分浏览器已反对，而安卓零碎在国内挪动端系统中占比达80%（数据起源：statcounter）目前使页面反对 WebP 格局图片有两种形式： 前端开发过程生成对应格局图片并编写 WebP 相干代码（本文介绍）服务器端反对生成 WebP 格局图片，前端编写相干加载代码（这部分未深入研究）二、压缩成果设置压缩品质为81时，能够在尺寸和品质两者间获得较好的均衡。（测试后果与图片类型以及色调丰盛度无关，具体的压缩品质能够依据理论状况自行调整） 三、在开发中如何应用？1. html<picture> 标签会依据浏览器反对状况加载对应资源。 <picture> <source srcset="./webp/demo.webp" type="image/webp"> <img src="./images/demo.png"/></picture>2. css通过 js 检测以后浏览器是否反对 WebP 格局的图片（细节见下文 js 代码），在 html 标签上动静增加类名 webp，依据浏览器反对状况加载不同格局的图片。 .box { width: 5.73rem; height: 6.57rem; background-image: url(../images/demo.png); background-repeat: no-repeat; background-size: 100% 100%}.webp .box { background-image: url(../webp/demo.webp)}3. js通过创立 canvas 标签生成 WebP 格局图片，依据其是否生成胜利，来判断浏览器是否反对 WebP 格局的图片。 var isSupportWebp = function () { if(document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0) { document.getElementsByTagName('html')[0].classList.add('webp'); } else { console.warn("The browser doesn't support WebP."); }}isSupportWebp();四、开发流程以下流程仅提供大抵思路，具体的 webpack 相干配置会依据我的项目有所出入。 ...

浏览器是否反对webP格局图片对于更多日常应用的公共类的操作方法，能够关注下小滑轮网站 webP格局webp格局的图片在品质雷同的状况下，能够领有更小的体积。而且当初很多资源存储的云服务商都反对申请webp格局的图片。所以说，在网站中应用时webp格局，能够让网站关上更快，也更节俭网络带宽。然而并不是所有的网站都反对webP格局的，所以在应用之前，先判断下是否反对webP格局，上面的代码就提供了判断的办法。 /** * * @desc 判断浏览器是否反对webP格局图片 * @return {Boolean} */function isSupportWebP() { return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;}