“能用表情包解决的问题,绝不多说一个字。”

“当不知道回复什么的时候,甩过去一个表情包就好了。”

放眼望去,谁的 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攻击?

这些表情包你有吗?来 Battle 啊的更多相关文章

  1. 获取QQ所有的表情包,包括emoji,动态gif

    获取QQ所有的表情包,包括emoji,动态gif,代码如下. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xht ...

  2. 一个超级简单的node.js爬虫(内附表情包)

    之所以会想到要写爬虫,并不是出于什么高大上的理由,仅仅是为了下载个表情包而已-- 容我先推荐一下西乔出品的神秘的程序员表情包. 这套表情包着实是抵御产品.对付测试.嘲讽队友.恐吓前任的良品, 不过不知 ...

  3. Python自动生产表情包

    作为一个数据分析师,应该信奉一句话--"一图胜千言".不过这里要说的并不是数据可视化,而是一款全民向的产品形态--表情包!!!! 表情包不仅仅是一种符号,更是一种文化--是促进社交 ...

  4. 项目中使用emoji表情包与表情的解析过程详情

    菜鸡一只,刚开始写博客文笔不好,有问题欢迎相互讨论.闲话不多说. 用到了三个插件 Emoji Picker 第一步 这个emoji表情包插件是我找到比较好 的一个,input框中是不能放入图片的,效果 ...

  5. 使用纯css3写出来的表情包 (^v^)

    效果如图所示: 不多说,我们直接一个一个来写出,主要列出每个表情的结构,样式我们统一写出,基本全部会用到,颜色以及结构可以根据自己的需求来调整.(里面可是没有一张图片的哦) 页面预览:http://2 ...

  6. WordPress中添加自定义评论表情包的方法

    先来看看效果: 现在由于WordPress版本更新,再加上WordPress主题也越来越多,而现在的主题一般都是禁用了WordPress自带的评论表情,其实自带 的评论表情也是很丑的,但是以前我们可以 ...

  7. Python爬虫入门教程 13-100 斗图啦表情包多线程爬取

    斗图啦表情包多线程爬取-写在前面 今天在CSDN博客,发现好多人写爬虫都在爬取一个叫做斗图啦的网站,里面很多表情包,然后瞅了瞅,各种实现方式都有,今天我给你实现一个多线程版本的.关键技术点 aioht ...

  8. problem: 记一次聊天框的表情包弹框不显示的找问题过程

    左边是列表,包含了群和成员,右侧是聊天窗口.点击群列表,右侧显示群聊窗口,点击学员,右侧显示私聊窗口. 群聊窗口和私聊窗口是不同的组件,但是窗口中的子组件,例如窗口的头部.中间内容部分.输入框都是复用 ...

  9. 【腾讯Bugly干货分享】舞动的表情包——浅析GIF格式图片的存储和压缩

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/v0pffOhjFWnVbU2lXjuEmw 导语 G ...

随机推荐

  1. day29 Pyhton 面向对象 多态 封装

    # coding:utf-8 # py2中的经典类 # class D:#没有继承object是经典类# pass # # def func(self): # # print('d') # class ...

  2. super函数

    Python面向对象中super用法与MRO机制:https://www.cnblogs.com/chenhuabin/p/10058594.html python 中 super函数的使用:http ...

  3. vi/vim系统编辑命令使用技巧

    01前言 在Linux系统中会有很多的文件信息,这些文件的内容如果需要编辑,就必须借助vi或vim编辑命令. vi是Linux命令行界面下的重要文字编辑器.vim是vi命令的增强版. [语法格式] v ...

  4. Spring笔记(4) - Spring的编程式事务和声明式事务详解

    一.背景 事务管理对于企业应用而言至关重要.它保证了用户的每一次操作都是可靠的,即便出现了异常的访问情况,也不至于破坏后台数据的完整性.就像银行的自助取款机,通常都能正常为客户服务,但是也难免遇到操作 ...

  5. python numpy输出排名

    python numpy排序后输出排名 问题: 假设某班的成绩为: 姓名 成绩 名次 小红 95 小黑 67 小白 58 小绿 82 小蓝 76 小橙 79 小可爱 99 请根据表格,输出对应的名次 ...

  6. bzoj2539 丘比特的烦恼、黑书P333 (最优二分图匹配)

      丘比特的烦恼 题目描述 Description 随着社会的不断发展,人与人之间的感情越来越功利化.最近,爱神丘比特发现,爱情也已不再是完全纯洁的了.这使得丘比特很是苦恼,他越来越难找到合适的男女, ...

  7. oracle sql developer 启动java.exe设置错误

    1.找到oracle安装目录下的jdk,如:E:\app\Administrator\product\11.2.0\dbhome_1\jdk 2.找到oracle安装目录下的developer路径:E ...

  8. 通过代码实现 `OutOfMemory

    通过代码实现 OutOfMemory Intro 来尝试写一个发生 OutOfMemoryException 的代码吧,开启煞笔代码第三篇 -- OutofMemory OutOfMemory Out ...

  9. Api版本控制

    版本控制是计算机软件行业人士使用的术语.但进化是我们所有人都要经历的事情,它适用于这个世界上的每个对象. 在计算机软件行业,可以看到每3至4年,每台计算机软件都会附带不同的发行版/版本,以满足当前/现 ...

  10. 【1】TensorFlow光速入门-tensorflow开发基本流程

    本文地址:https://www.cnblogs.com/tujia/p/13862339.html 系列文章: [0]TensorFlow光速入门-序 [1]TensorFlow光速入门-tenso ...