今天下午二狗子照常上班摸鱼的时候,突然看到了一则消息,消息说 GIF 的发明人因新冠去世了。作为一个自诩理性的互联网人,二狗子第一反应是看到了一个离谱谣言,可是查看了多方消息后,二狗子难过地发现这是真的。

斯蒂芬·威尔海特就职于 CompuServe(全球第一家网络服务提供商),当时这家公司想要在网上展现彩色天气图等信息,但因受限于网络带宽而束手无策。斯蒂芬·威尔海特了解一些压缩技术,于是他参与了创造 GIF 格式的工作。在之后的1978 年,CompuServe 公司推出 GIF 格式,诞生了世界上第一张动图。

GIF 全称 Graphics Interchange Format,即图形交换格式,以8位色(即256种颜色)重现真彩色的图像。它有效地减少了图像文件在网络上传输的时间,是目前互联网广泛应用的网络传输图像格式之一。

除去 GIF,目前互联网广泛使用的图像格式还有以下种类:

  • JPEG

  • png

  • WebP

GIF

前面我们也提到了一点关于 GIF 的介绍,作为它最大的,与 JPEG 和 PNG两种格式不同的特点,就是 GIF 是“能动”的。我们通常将 GIF 用于从图像文件创建动画,可以通过在压缩中合并无损质量,无损传输和存储这些文件,并且对图像库的存储影响较小。

GIF 是无损的,采用 GIF 格式保存图片不会降低图片质量。得益于数据的压缩,文件体积小,也是 GIF 格式的优点。此外,它还具有支持动画以及透明背景。

GIF 格式适用于对色彩要求不高同时需要文件体积较小的场景,比如企业 Logo、线框类的图等。因其体积小的特点,现在 GIF 也已经被广泛应用在各类网站中。

JPEG

JPEG 全称 Joint Photographic Expert Group,即联合照片专家组。是由国际标准化组织(ISO)制定的面向连续色调静止图像的一种压缩标准。它是我们常说的 JPG 的正式扩展名,那为什么会出现 JPG 这种说法呢?这是因为 DOS、Windows 95 等早期系统采用的 8.3 命名规则只支持最长 3 字符的扩展名,所以为了兼容性使用了 .jpg 的形式。而后来所有的 apple 旗下机体都不限制扩展名长度,让 JPEG 能够完整出现。不过因为大家已经喜欢了 JPG 的喊法,所以现在 JPG 也依然很流行。

JPEG 图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能压缩文件大小。这意味着JPEG 去掉了一部分图片的原始信息,也就是进行了有损压缩。JPEG 的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG 非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。

然而,JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,又会导致图片文件体积更大。

PNG

PNG 全称 Portable Network Graphics,即可移植网络图形。是 1994 年由万维网联盟(W3C)的一个工作组开发的,当初的开发目的是为 GIF 格式创建一种现代的、免费的替代方案。

PNG 采用无损压缩算法的位图格式,文件后缀名为 .png。使用的是从 LZ77 派生的无损数据压缩算法,一般应用于 JAVA 程序、网页中,它的压缩比高,生成文件体积小。

PNG 格式是我们在数字设计项目中最常使用的格式,通常比其他格式的文件大小要大。但是它保留了硬性边缘效果,且可以处理大量颜色。另外 PNG 有个比较有趣的特性,那就是支持透明背景,因此大多数网站PNG 格式作为 Logo 。

看到这里相信大家都发现了三者的一点共同点,它们都提到了压缩和损坏,有的是有损的,有的是无损的。难道所有的图片都必须压缩吗?其实是可以不压缩的,比如 BMP 就可以不压缩存储。但是一两张图还可以这么做,如果图片多起来那对于存储和传输就造成了极大的压力。

因此如何在保证图片质量不变的情况下,压缩图片进而节省流量带宽,让传输更快,带来更好的观看体验就变得重要起来。

但是作为传统的图片格式 JPEG,PNG,GIF 等其实已经没有很大的优化空间了,那唯一剩下的道路就是发掘一种新的图片格式,或者压缩格式来解决这个问题,WebP 应运而生。

WebP

WebP 是 Google 于 2010 年提出了一种新的图片压缩格式,目的就是为 Web 上的图片资源提供卓越的有损、无损压缩。在与其他格式同等质量指数下提供更小,更丰富的图片资源,以便资源在 Web 上访问传输。

WebP 图片格式来源于 VP8 视频编解码器,也就是 WebM 视频容器,是 WebM 视频格式的单个压缩框架。VP8 编解码器的一个强大功能就是能够进行帧内压缩,或者更确切地说,能将视频的每个帧都被压缩,再压缩帧与帧之间的差异。

作为专为压缩而推出的格式,WebP 具有以下特性:

  • 有损压缩:有损压缩基于 VP8 关键编码。VP8 是 On2 Technologies 创建的视频格式,是 VP6 和 VP7 格式的后续版本。

  • 无损压缩:采用预测变换,颜色变换,减去绿色,LZ77 反响参考等技术进行压缩。

  • 透明度:8位 Alpha 通道对图形图像很有用。Alpha 通道可以与有损 RGB 一起使用。与其它格式图片所不支持的 WebP 特有的功能。

  • 动画:它支持真彩色动画图像,即可以支持动态图( 类Gif 图)

  • 元数据:它可能具有 EXIF 和 XMP 元数据

  • 颜色配置文件:它可能具有嵌入式 ICC 配置文件。

同时它的效果也是明显的,以 JPEG 作为对比,当 WebP 将 JPEG 压缩到相当于原图 90% 质量时,图片体积可以减少 50% 左右。当 WebP 将 JPEG 压缩到相当于原图 80% 质量时,图片体积则减少了 60%~80%。

在 WebP 出现后,它凭借自己优异的图片压缩性能,以及兼备无损和有损两种压缩算法,以及唯一可以对 GIF 进行压缩的特点,迅速在各大网站、App 普及。那要如何才能让图片变成 WebP 格式呢?

最简单的方法就是直接接入云服务的图片处理功能,比如又拍云 WebP 自适应:

在后台一键开启 WebP 自适应功能,即可通过 CDN 平台智能判断客户端浏览器是否支持 WebP 解码,如果支持则返回 WebP 格式图片,如果不支持则会返回原图,在客户端以及源站无需任何改动。

悲报, GIF 之父因新冠去世相关推荐

  1. 互联网之父确诊新冠,一代传奇:任谷歌副总裁、NASA 访问科学家

    作者 | 年素清 责编 | 伍杏玲 出品 | 程序人生(ID:coder_life) 封图 | 东方IC 据外媒最新消息,谷歌公司副总裁兼首席互联网专家.有"互联网之父"之称的温顿 ...

  2. 纽约时报悼念新冠去世患者页面是怎么做出来的?

    起因是高中同学发微博感叹这个网站的交互做得很漂亮,本能地就去看了一下.这是纽约时报悼念因新冠去世的人的一个页面,确实很漂亮,大家可以先去看看(需要fq)Remembering the Nearly 1 ...

  3. “生命游戏之父”因新冠肺炎逝世,回顾数学顽童的一生

    作者 | 年素清 责编 | 伍杏玲 出品 | 程序人生(ID:coder_life) 普林斯顿大学教授大卫·斯伯格尔(David Sperger)在推特上公布,普林斯顿大学数学系教授约翰·何顿·康威( ...

  4. 英国全能数学家John Conway因新冠去世,他曾发明风靡一个时代的电脑游戏,还能心算万年历...

    点击上方"码农突围",马上关注 这里是码农充电第一站,回复"666",获取一份专属大礼包 真爱,请设置"星标"或点个"在看&quo ...

  5. 著名作曲家范吉利斯因新冠去世,曾写下震撼人心的作品

    一个迟来的悲痛消息--我们熟悉的希腊著名作曲家.电影配乐大师范吉利斯(Vangelis)一周前(5月17日)在法国巴黎去世,死因是感染新冠病毒引起并发症. 前两天,我们在周末剧场分享了范吉利斯最经典的 ...

  6. 关于新冠疫情,美国专家们终于认定了这9大事实

    全文共4366字,预计学习时长11分钟 图源:unsplash 半年多前,美国疾控中心公布了美国第一例确诊的新冠肺炎病例,几天后发出警告称,"这是非常严重的公共健康威胁".然而,卫 ...

  7. 重构ElementUI解决DatePicker日期选择组件修改父组件placement参数问题[Vue.js项目实践: 新冠自检系统]

    新冠疫情自我检测系统网页设计开发文档 Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性.有效性.及时性和完整性,更多内容请查看国家卫健 ...

  8. 新冠最凶变种出现!突变量德尔塔两倍,专家称感染率超原毒株500%,引发全球股市震荡...

    点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 杨净 明敏 发自 凹非寺 量子位 报道 | 公众号 QbitAI 迄 ...

  9. 马斯克员工参与新冠研究,论文登上Nature子刊

    点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 晓查 发自 凹非寺  量子位 报道 | 公众号 QbitAI 全球首 ...

最新文章

  1. 40 个 SpringBoot 常用注解
  2. MECAT: fast mapping,error correction, and de novo assembly for single-molecule sequencing reads
  3. numpy.argwhere 返回的为索引值的array
  4. 2019 训练比赛 记录
  5. esp8266接收到的数据如何存放到数组中_愉快地学Java语言:第七章 数组
  6. 洛谷 P1149 火柴棒等式
  7. 芯片数据手册datasheet哪里找?
  8. 举例讲清楚模型树和回归树的区别
  9. Kubernetes 搭建 ES 集群(存储使用 cephfs)
  10. 陈纪修老师《数学分析》 第07章:定积分 笔记
  11. 如何用计算机计算一组数据的方差,Excel计算一组数据的方差的操作方法
  12. 高效的国产CAD设计工具,云端三维CAD设计平台:CrownCAD
  13. 零基础要如何成为前端工程师?
  14. CIO40: IT男之日常工作(点线面体)
  15. 基于51单片机的便携式输液点滴控制报警器
  16. 计算机中真值的概念,真值和机器数概念
  17. ORACLE中的LTRIM、RTRIM和TRIM
  18. android的手机壳,Android手机壳专场,送礼自用两相宜
  19. pta紧急救援java,PTA——城市间紧急救援
  20. 【报错】onMounted is called when there is no active component instance too be associated with.

热门文章

  1. Hystrix Health Indicator及Metrics Stream支持
  2. 单例模式源码分析(jdk+spring+mybatis)
  3. Spring-- ApplicationContext
  4. mybatis中条件表达式if的test为字符串时值比较
  5. 用css3实现ps蒙版效果+动画
  6. saltstack配置apache
  7. Xilinx下载方式(具体可以参考配置MCS文件时右下角help调出的doc)
  8. 上海网域CEO肖确伟:IDC精细化运营探讨
  9. 使用powershell批量导入AD用户
  10. 江苏:5G先行,智慧江苏再进一步