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;}

目前在互联网上，图片流量仍占据较大的一部分。因此，在保证图片质量不变的情况下，节省流量带宽是大家一直需要去解决的问题。传统的图片格式，如 JPEG，PNG，GIF 等格式图片已经没有太多的优化空间。因此 Google 于 2010 年提出了一种新的图片压缩格式 — WebP，给图片的优化提供了新的可能。 WebP，JPEG 的升级版WebP 就像 JPEG 的升级版。它是 Google 推出的图片文件格式，它的目的就是为 Web 上的图片资源提供卓越的有损、无损压缩。在与其他格式同等质量指数下提供更小，更丰富的图片资源，以便资源在 Web 上访问传输。 WebP 图片格式来源于 VP8 视频编解码器，也就是 WebM 视频容器，是 WebM 视频格式地单个压缩框架。VP8 编解码器的一个强大功能就是能够进行帧内压缩，或者更确切地说，能将视频的每个帧都被压缩，再压缩帧与帧之间的差异。 WebP 特性 有损压缩：有损压缩基于 VP8 关键编码。VP8 是 On2 Technologies 创建的视频格式，是 VP6 和 VP7 格式的后续版本。无损压缩：采用预测变换，颜色变换，减去绿色，LZ77 反响参考等技术进行压缩。透明度：8位 Alpha 通道对图形图像很有用。Alpha 通道可以于有损 RGB 一起使用。与其它格式图片所不支持的 WebP 特有的功能。动画：它支持真彩色动画图像，即可以支持动态图( 类Gif 图)元数据：它可能具有 EXIF 和 XMP 元数据颜色配置文件：它可能具有嵌入式 ICC 配置文件。关于压缩 为什么可以对图片进行有损压缩，因为使用有损压缩的一个关键原则是：人类的感知能力并没有计算机那么精确。科学证明，人的眼睛只能区分 1000 万种不同的颜色，并且人眼对亮度比色度更敏感，这意味着我们会忽略较大的色度变化，而不影响我们对图片的敏感度。这就是为什么“黑蓝白金裙”事件能引起那么大的讨论，它一定上也是受到我们人类的视觉敏感度所影响。 有损压缩 WebP 的压缩是使用与 VP8 相同的方式来预测帧。VP8 基于块预测与任何基于块的编解码器一样，VP8 将帧划分为称为宏块(MarcoBlocking)的小块。在每个宏块内，编码器可以基于先前处理的块来预测冗余运动和颜色信息。图像帧是“关键”，意思是它仅使用已经在每个宏块的直接空间邻域中解码的像素。并试图对它们的未知部分进行赋值。这就称为与预测编码。然后可以从块中减去冗余数据，进而有效压缩。 ...

网页性能的优化：资源合并与压缩（html/css/js压缩合并）图片相关优化（不同业务场景选择不同的图片格式，雪碧图等）css/js装载与执行（引用先后顺序及方式，是否阻塞，相互之间的依赖关系）懒加载／预加载（dns预读取、多个CND域名、异步读取JS（script 的defer、async））缓存优化重绘与回流... 网页性能测试工具工具：Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用（移动端）的质量。目前测试项包括页面性能、PWA、可访问性（无障碍）、最佳实践、SEO。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。工具安装： Chrome开发者工具（Devtools）的Audits，作为Chrome拓展程序使用，或者作为命令行工具使用（仅能在Chrome60及以上使用）2.命令行工具： npm install -g lighthouselighthouse https://example.com// 配置项查看 lighthouse --help常见的图片及特点矢量图与位图我们的电脑在显示图片的时候也可以分为这两种：矢量图与位图 矢量图：（矢量：既有大小又有方向的量，也称为向量）也称为面向对象的图像或绘图图像，矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。 优点： （1）文件小，图像中保存的是线条和图块的信息，所以矢量图形文件与分辨率和图像大小无关，只与图像的复杂程度有关，图像文件所占的存储空间较小 （2）图像可以无限缩放，对图形进行缩放，旋转或变形操作时，都不会不会产生锯齿效果或者模糊 （3）可采取高分辨率印刷，矢量图形文件可以在任何输出设备打印机上以打印或印刷的最高分辨率进行打印输出 缺点： （1）难以表现色彩层次丰富的逼真图像效果 （2）暂时还不存在一种标准格式和标准处理流程，目前主要有SVG和Adobe Flash。因此处理矢量图只能靠CPU 适用场景：图形设计、文字设计和一些标志设计、版式设计等。 位图：位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图到一定程度时，能看到拼片一样的像素点 优点： （1）利于显示色彩层次丰富的写实图像 缺点： （1）一定程度的缩小或者放大都会让位图变形失真 （2）文件较大 我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即使他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别——是否失真。 无压缩、有损压缩、无损压缩无压缩。无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP格式就是其中之一。无损压缩。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。聊一聊常见的web图片格式gifGIF是CompuServe公司在 1987年开发的，是一种无损(100%的保持原始图片的像素数据信息)的8位(存储8位索引,也就是最多能表达2^8=256种颜色)图片格式，色彩复杂、细节丰富的图片不适合保存为gif格式。 特点： （1） 透明特性：GIF支持基本的透明特性，这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时，我们就可以看到通过这些不可见区域看到此图片后面的背景颜色（图片）。 （2） 压缩特性：GIF格式采用LZW算法进行压缩，此算法是Unisys申请的一项专利。在十多年前，如果你想使用GIF格式，你还要给Unisys公司交专利费的。不过这项专利技术已于2003年6月20日过期，我们现在使用GIF是完全免费的。 （3） 快速加载特性：GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。这种特性能够提升慢网速用户的用户体验。 （4） 动画GIF：一个动态的GIF文件，是由若干帧图片所联结而成的动态图片。在显示时，这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。 jpg是一种有损的基于直接色的图片格式，JPG（JPEG），文件后缀名为"．jpg"或"．jpeg"，由于采用直接色，jpg可使用的颜色有1600w之多（2^24），而人眼识别的颜色数量大约只有1w多种，因此jpg非常适合色彩丰富图片、渐变色。jpg有损压缩移除肉眼无法识别的图片细节后，可以将图片的尺寸大幅度地减小。 特点： （1）表现力强，能较好地摄影作品或写实作品； （2）可以利用可变的压缩比来控制文件大小； （3）JPG（JPEG）兼容性较好； （4）有损耗压缩会使原始图片数据质量下降，当我们编辑和重新保存 JPG（JPEG） 文件时，JPG（JPEG） 会混合原始图片数据的质量下降。这种下降是累积性的； （5）JPG（JPEG） 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片（例如icon、logo，相比gif/png-8，它在文件大小上毫无优势）。 pngpng的产生一定程度上源于gif，初始是被当作gif的免费替代格式而生，采用公共专利压缩算法。 PNG-8： 是基于8位索引色的位图格式，最多只能索引256种颜色，所以对于颜色较多的图像不能真实还原； 特点： （1）相比gif对透明的支持更好，同等质量下，尺寸也更小 （2）不支持动画 PNG-24： 是基于直接色的位图格式，可以保存1600多万种颜色，这基本能够真实还原人类肉眼所可以分别的所有颜色。 特点： （1）png-24的图片质量堪比bmp，但是却有bmp不具备的尺寸优势 （2）因为其高品质，无损压缩，非常适合用于源文件或需要二次编辑的图片格式的保存 （3）图片存储为png-24比存储为jpg，文件大小至少是jpg的5倍，但在图片品质上的提升却微乎其微，所以除非对品质的要求极高，否则色彩丰富的网络图片还是推荐使用jpg webpWebP图片是一种采用有损和无损压缩的图像格式，由Google开发，是基于VP8视频格式的衍生产品,目标是减少文件大小但达到和JPEG格式相同的图片质量，能够减少网络上的请求时间。 历史： （1）该格式于2010年9月30日首次公布，作为网络上有损压缩真彩色图形的新开放标准，生成与旧JPEG方案相当的较小文件质量 （2）2011年10月3日，Google宣布WebP支持动画，ICC配置文件，XMP元数据和平铺（合成来自最大16384×16384平铺的非常大的图像） （3）2011年11月18日，谷歌开始尝试无损压缩和无损和有损模式下的透明度（alpha通道）支持， 而在2012年8月16日的参考实做libwebp 0.2.0中正式支持 优点： （1）与png、jpg相比，相同的视觉体验下，WebP图像的尺寸缩小了大约30％。（意味着更小的体积，更高的质量） （2）WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式 缺点： （1）目前webp的还没有得到全面的支持，参考webp兼容性。（2）根据Google的测试，目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍（编码方面，一般来说，我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片，对用户体验的影响基本忽略不计。解码方面，WebP虽然会增加额外的解码时间，但由于减少了文件体积，缩短了加载的时间，页面的渲染速度加快了。同时，随着图片数量的增多，WebP页面加载的速度相对JPG页面增快了） ...

参考谷歌官网：Webp: A new image format for the WebWebp是Google强推的新一代网络图片格式，特点就是：高质量压缩。能压缩多少呢？5MB的原图，不降低效果，转换成webp格式后大小是几百KB。100KB的图，转换后是9KB。虽然目前所有主流浏览器都支持这种图片格式，但不幸的是所有主流系统如Mac、Win等都还没有默认支持打开它的程序，更无法显示它的预览、缩略图。如果想查看，最简单的方法是把*.webp文件的打开方式设定为Chrome等浏览器，双击打开在浏览器中查看。还有很多时候我们需要对这种文件进行转换。Google提供了一组工具集合，叫libwebp，其中包括各种webp相关转换的命令：cwebp – 将其它图片转为webp格式图片 (不包括GIF)dwebp – 将webp格式图片转为其它格式图片vwebp – webp图片浏览器webpmux – WebP muxing toolgif2webp – 将GIF转换为webp图片下载安装参考官网：Downloading and Installing WebPUbuntu安装libweb库：$ sudo apt-get install webpMac安装libwebp库：$ brew install webp注意：Homebrew安装的webp并不包括上面所有的工具，而只有cwebp和dwebp。如果我们想要所有的工具，有两种方法：到官网找到自己OS对应版本的二进制包，直接运行使用自己编译最简单就是到官网下载列表里找到自己的OS对应版本的二进制包，下载下来解压缩直接使用。官方下载列表：https://storage.googleapis.co…比如我的系统是Mac 10.12，那么就找到libwebp-0.6.0-mac-10.12.tar.gz这个压缩包下载：cd /tmpwget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0-mac-10.12.tar.gztar xvzf libwebp-*.tar.gzcd libweb-*然后在~/.zshrc或~/.bash_profile中的PATH环境变量中加入刚才二进制文件包中的bin目录，或者直接设置alias，即可开始像别的命令开始用了。如果没有自己所用系统的二进制包，那么就只能自己编译了。每种平台的编译方法不一样，需要按照官网方法一步一步安装。编译方法参考官方：Compiling the Utilities将各种图片转换为Webp格式参考：https://developers.google.com…目前输入格式支持：png, jpg$ cwebp INPUT.png -o OUTPUT.webp将Webp图片转换为其它格式图片参考：https://developers.google.com…$ dwebp INPUT.webp -o OUTPUT.png将GIF转换为Webp格式参考：https://developers.google.com…$ gif2webp INPUT.gif -o OUTPUT.webp浏览webp图片这个命令不是在命令行终端里浏览图片，而是在桌面上弹出一个GUI窗口显示图片，所以需要依赖本地电脑的GUI桌面。$ vwebp INPUT.webp