WebP,或非正式发音为 weppy ,是 Google开发者大约5年前 推出 的 一种图像格式 。 如果您是网页设计师,或者是努力减少和优化图像文件大小的开发人员,那么WebP能够为您带来微笑。
简而言之,以下是您需要了解的有关这种不那么新但仍然很酷的图像格式的一些重要内容:
简而言之,WebP能够显着降低JPEG,GIF,PNG的图像文件大小。 这里是WebP的复习,你应该在我们进入有趣的东西之前检查一下。
关于网络声明的最好的事情是我们总是可以运行实验来检查真实性和真实性。 以下是我做的一些实验,以了解 图像 从各种图像格式(JPEG,PNG和GIF)转换为WebP后可能会有多小 。
这是我从 Pexels 抓取的随机JPEG图像 。原始文件大小 - 165kb。**↓
使用 JpegMini优化图像 。 *新文件大小 - 101kb 。 ↓*
最后,相同的图像转换为WebP格式。 *最终文件大小 - 70kb 。 ↓*
另请注意: 如果将同一图像转换为以下格式,则以下是不同的文件大小:
现在,让我们尝试透明的PNG。 ( 来源 )。 *原始文件大小 - 587kb 。 ↓*
这是用 tinypng 优化的图像 。 *新文件大小 - 278kb 。 ↓*
最后,图像转换为WebP格式。 *最终文件大小 - 112kb 。 ↓*
转换为WebP时,JPEG图像从165kb变为70kb,而PNG图像从587kb变为112kb。
让我们来看看动画GIF的票价:
这是一个总结整个实验的表格:
有损(JPG) | 无损(PNG) | 动画,GIF | |
---|---|---|---|
原版的 | 165KB | 587KB | 6.8MB |
使用工具进行优化 | 101KB | 278KB | - |
WebP格式 | 70KB | 112KB | 6.3MB |
如果没有大量的数学计算,这些数字表明文件大小大幅减少,从图像来看,你无法真正区分清晰度和分辨率。 较小,较轻的文件大小和相同的图像质量水平,WebP绝对值得研究。
如果您已经加入并希望开始以WebP格式发布图像,那么让我们深入了解如何将图像轻松转换为此格式。 下面提到的所有方法在控制,易用性和方便性方面各不相同。 选择你的毒药。
WebPonize可能是在Mac上将图像转换为WebP格式的最简单,最快捷的方式。 您只需将图像拖放到WebPonize中即可进行转换。 您将收到原始文件的输出,前大小,后大小和减少百分比。 [ 下载WebPonize ]
如果您正在运行Windows,则Webpconv是您应该安装的应用程序。 它还有便携版本,因此您可以在闪存驱动器上独立运行它。 [ 下载Webconv ]
如果你感觉很怪异,你可能想要使用命令行来执行转换。 cwebp 将您的JPEG,PNG或TIFF图像转换为WebP格式, dwebp 将它们转换回PNG格式。 让我们看看它是如何工作的。
注意: 以下指南适用于Mac OS X.对于Windows和Linux用户, 请单击此处 。
首先,确保安装了Xcode,然后按照以下步骤操作:
输入 “ sudo port selfupdate ”并按Enter键。 这会将您的MacPorts更新到最新版本。
接下来,键入“ sudo port install webp ”并按Enter键。 这将安装 libwebp ( WebP Library )。
而已。 现在让我们看一下 如何使用命令行将图像转换为WebP 。
以下是命令:
I - 将JPEG / PNG图像文件转换为WebP格式
格式 :cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]
示例 :
cwebp -q 80 example.png -o example.webp
II - 将WebP图像文件隐藏回PNG
格式 :dwebp [WebP_filename] -o [PNG_filename]
示例 :
dwebp image.webp -o image.png
更多 :如果您通过其他方式进行转换,则以下是使用 Grunt 和 Gulp 任务将JPG / PNG文件转换为WebP的说明。
如果您不想在操作系统上安装任何应用程序来执行此任务,请选择使用这些在线工具。 以下是我所了解的一些内容:
提示: 如果您使用谷歌 convert webp online
,您可能会找到更多选项。
您可能很高兴知道还有一个Photoshop插件允许您通过Photoshop将图像保存为WebP格式。 此插件支持Mac OS X(CS 2- CS 6)和Windows(32位和64位)。 [在 这里 下载插件 。]
注意 :只是认为你应该知道我在Photoshop CC上尝试过它。 没在那里工作。
最后,我们来谈谈兼容性。 目前,您可以在以下浏览器上查看WebP格式图像( 参考 ):
对于 FireFox 和 Safari来说 , 运气并不是那么幸运 ,它本身仍然不支持WebP格式。 但是,您可以使用 WebPJS Javascript库 将WebP图像转换为客户端站点上的dataURI字符串 。
使用回退以避免因不受支持的浏览器而出现图像错误总是一个好主意。 在这种情况下,后备将是JPG或PNG格式的图像。 这是你如何做到的。
<picture>
<source srcset="example.webp 1x" type="image/webp">
<img src="example.jpg" >
</picture>
对于此代码, 如果用户使用Firefox或Safari , 将加载 example.jpg 。
您可以在Chrome和Opera浏览器上预览WebP图像。 但是如果你想在你的机器上本地进行,你需要一些工具。
Mac用户可以使用 WebPQuickLook 使用“快速查看”功能预览WebP格式图像(选择或突出显示图像,按空格键)。
对于Windows用户, WebPCodec 将在文件资源管理器中显示WebP图像的缩略图预览。 将显示WebP和JPEG等效项。 在某些受支持的Window OS(Vista,7,8)上,WebP图像也可以显示在Windows Photo Viewer上。
更多: ReSCR.it 自动提供中的WebP格式的图片,如果你存储与您的图像它的可用 MaxCDN 。 ( 了解更多 )
VM57973 sockjs.min.js:2 Uncaught Error: Incompatible SockJS! Main site uses: "1.4.0", the iframe: "1.5.0".
Chrome 51 开始,浏览器的 Cookie 新增加了一个`SameSite`属性,用来防止 CSRF 攻击和用户追踪。
本文首先会简单介绍下前端的常见缓存方式,再引入serviceworker的概念,针对其原理和如何运用进行介绍。然后基于google推出的第三方库workbox,在产品中进行运用实践,并对其原理进行简要剖析。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。
TCP在连接过程的三次握手完成后,开始传数据,并不是一开始向网络通道中发送大量的数据包,这样很容易导致网络中路由器缓存空间耗尽,从而发生拥塞;而是根据初始的cwnd大小逐步增加发送的数据量,cwnd初始化为1个最大报文段(MSS)大小(**这个值可配置不一定是1个MSS**);每当有一个报文段被确认,cwnd大小指数增长。
我们在平时的开发过程中,或多或少都会涉猎到网络传输这块。 这篇文章,主要是整理一下 TCP 的一些知识要点,作为一名开发者来说,尽管有那么多的基础设施(框架、组件)帮我们屏蔽了这些细节。当我仍然认为了解它的一些基本原理必有些裨益,尤其是当你在分布式环境上遇到一些棘手问题时,一些原理性的知识可能会让你快速找到答案。
WebP,或非正式发音为 weppy ,是 Google开发者大约5年前推出的 一种图像格式 。
感谢Google巢鹏的提供的内容分享。Life of a Pixel这个演讲一开始是Chrome组新人入职的学习资料,给新人一个从高层次去看Chromium如何从HTML / CSS / JS 显示到屏幕的网页。这个演讲一直在更新,所以大家可以通过看这个演讲更新自己对Chromium的理解。
本地测试时,简易忽略chrome浏览器的证书问题
http请求的完整过程
IE6/7浏览器兼容querySelectorAll、 querySelector
preload作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制。Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失。
网站前后端性能优化的34条经验方法
CSRF(Cross-site request forgery跨站请求伪造,也被称成为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用。尽管听起来像跨站脚本(XSS),但它与XSS非常不同,并且攻击方式几乎相 左。XSS利用站点内的信任用户,而XSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比,XSRF攻击往往不大流行(因此对其 进行防范的资源也相当稀少)和难以防范,所以被认为比XSS更具危险性
http常用状态码