共计 2408 个字符，预计需要花费 7 分钟才能阅读完成。
“能用表情包解决的问题，绝不多说一个字。”
“当不晓得回复什么的时候，甩过来一个表情包就好了。”
放眼望去，谁的 QQ/ 微信 珍藏中没有几页代表性的表情包，那真的是 out 了。在当代网络社交生活中，当呈现“只可意会不可言传”的情绪和外延时，表情包大略是最合适的载体。
常见的表情包有动态图片和动静图片两种。
动态图片最常见的格局是 jpg/png，动静图片则是 gif。在平时工作生存中，不仅仅表情包，图片在网页设计中也是重中之重。
常见的三种图片格式
图片格式品种繁多，咱们日常应用最多的图片文件格式是 jpg、png 和 gif。这些格局因为与目前浏览器的兼容性，客户端的网络速度以及用户的广泛需要而成为最受欢迎的格局。
在理解这三种格局的图片之前，咱们须要先理解一个概念，就是图片压缩。
有损 vs 无损
图片文件格式有可能会对图片的文件大小进行不同水平的压缩， 图片的压缩分为有损压缩和无损压缩两种。
- 有损压缩：指在压缩文件大小的过程中，损失了一部分图片的信息，也即升高了图片的品质，并且这种损失是不可逆的，咱们不可能从有一个有损压缩过的图片中复原出原来的图片。
- 无损压缩：只在压缩文件大小的过程中，图片的品质没有任何损耗。咱们任何时候都能够从无损压缩过的图片中复原出原来的信息。
在理解这个简略的状况后，咱们具体来看看这三种图片格式的区别和特点。
JPEG 格局
JPEG（Joint Photographic Experts Group）即联结图像专家组，是用于间断色调动态图像压缩的一种规范，文件后缀名为 .jpg 或 .jpeg，是最罕用的图像文件格式。
JPEG 图片格式的设计指标， 是在不影响人类可分辨的图片品质的前提下，尽可能的压缩文件大小。 这意味着 JPEG 去掉了一部分图片的原始信息，也就是进行了有损压缩。JPEG 的图片的长处，是采纳了间接色，得益于更丰盛的色调，JPEG 非常适合用来存储照片，用来表白更活泼的图像成果，比方色彩突变。
然而，JPEG 不适宜用来存储企业 Logo、线框类的图。因为有损压缩会导致图片含糊，而间接色的选用，又会导致图片文件体积更大。
PNG 格局
PNG（Portable Network Graphics）即便携式网络图形，是一种采纳无损压缩算法的位图格局，文件后缀名为 .png。PNG 应用从 LZ77 派生的无损数据压缩算法，个别利用于 JAVA 程序、网页中，它的压缩比高，生成文件体积小。
PNG 格局是咱们在数字设计我的项目中最常应用的格局。PNG 通常具备比其余格局更大的文件大小，然而它保留了硬性边缘成果，且能够解决大量色彩。另外 PNG 有个比拟乏味的个性，那就是反对通明背景，这也是大多数网站将 Logo 创立为 PNG 格局的次要起因。
GIF 格局
GIF（Graphics Interchange Format）即图像调换格局，是在 1987 年由 Compu Serve 公司为了填补跨平台图像格式的空白而倒退起来的。家喻户晓，它最大的特点就是“能动”。因而，GIF 通常用于从图像文件创立动画。通过在压缩中合并无损品质，能够无损传输和存储这些文件，并且对图像库的存储影响较小。
GIF 是无损的，采纳 GIF 格局保留图片不会升高图片品质。得益于数据的压缩，文件体积小，也是 GIF 格局的长处。此外，它还具备反对动画以及通明背景。
GIF 格局实用于对色调要求不高同时须要文件体积较小的场景，比方企业 Logo、线框类的图等。因其体积小的特点，当初 GIF 也曾经被宽泛的利用在各类网站中。
从左到右，这些文件顺次是：24 位 JPG 压缩文件，8 位 GIF，8 位 PNG，全品质 24 位 JPG 和 24 位 PNG
新兴的图片格式 —— WebP
无论是 PC 端还是挪动端，评估网站性能的一个次要指标就是页面加载工夫，而图片占到了页面大小的 60%-70%。那么如何保障图片品质的前提下，放大图片体积，晋升网页加载速度，成为了一件有价值的事件。
现在，JPEG、PNG 以及 GIF 这些格局的图片曾经没有太大的优化空间。而 Google 推出的 WebP 图片格式给图片优化提供了另一种可能。
WebP 是一种反对无损和有损压缩的图片格式，派生自图像编码格局 VP8。依据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小，即便这些 PNG 文件通过其余压缩工具压缩之后，WebP 还是能够缩小 28% 的文件大小。
WebP 现已成为支流网站喜爱的图片格式，淘宝、豆瓣、京东等网站皆已应用 WebP 图片以降低成本，进步网页加载速度。但目前并非所有浏览器都反对 WebP，反对的状况参见如下图所示：
又拍云省钱大法
很多人都会放心，局部浏览器不反对 WebP 图片，特地是 Safari 也不反对，会不会影响用户的体验？
这里就强势举荐下又拍云 WebP 自适应，无需网站服务器和前端等层面技术上的任何改变，就能解除你的顾虑。那 WebP 自适应是如何做到的呢？
通过 CDN 判断浏览器是否反对 WebP
Google Chrome、Firefox 等浏览器以及许多其余工具和软件库都反对 WebP，然而目前并非所有浏览器都反对 WebP。因而须要对浏览器进行辨认。又拍云 CDN 通过 HTTP Accept 来主动判断浏览器是否反对 WebP 格局的图片。如果反对，又拍云 CDN 则将原图实时转为 WebP 格局的图片，并推送给浏览器；如遇到不反对 WebP 格局的浏览器，则推送原图。
如何实现雷同 URL 拜访，缓存不同正本图片？
如何实现雷同 URL 拜访，缓存不同正本图片？
又拍云 CDN 利用到了缓存外面的 Vary 机制，同一个 URL 依据不同 Header 头的值缓存多份不同的拷贝，同时放弃 URL 不变。例如：
很显著，WebP 是晋升用户体验的一大利器，尽管浏览器对 WebP 的反对仍有须要改良的中央，但齐全能够应用又拍云 CDN 服务，来解决 WebP 兼容问题和解决批量 WebP 图片格式转换，高效地缩小网站带宽老本。
举荐浏览
文言科普，10s 理解 API
文言科普系列——双十一，居然是一场有“预谋”的 DDoS 攻打？