关于图像格式jpg、gif、png、svg、bmp、WebP的区别以及应用场景

在某个公司的在线笔试中，遇到了这个问题，有点理不清，特来整理一次：
一、jpg格式
全名应该是JPEG。JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式JPEG文件支持交错。可以提高或降低 JPEG文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。有时，压缩比率会低到5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG 压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
Jpeg格式特点：
1、透明性：它不支持透明性
2、动画：它不支持动画
3、损耗性：除了一些比如说（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理都会使得它的质量损失，所以我们在编辑过程一般用png作为过渡格式。
4、隔行渐进显示，它支持隔行渐进显示（但是ie浏览器并不支持这个属性，但是ie会在整个图像信息完全达到的时候显示）。
由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。根据惊叹我们在页面中使用的商品图片、采用人像或者好、实物素材制作的广告更适合采用JPG格式保存。
二、gif格式
GIF(GraphicsInterchange Format)的原义是“图像互换格式”，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
gif 格式特点：
1、透明性：gif是一种布尔透明类型，即它可以使全透明，也可是全不透明，但是它并没有半透明的（alpha透明）。
2、动画：gif格式支持动画。
3、无损耗性：gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
4、水平扫描：gif是使用一种叫做LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif更加小。例如500*10的图片比10*500的图片更加小。
5、间隔渐进显示：gif支持可选择性的间隔渐进显示。
由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标、图表等）。
三、png格式
PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s NotGIF”，是一种位图文件(bitmapfile)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
Png格式特点：
1、类型：Png这种图片格式包括了许多类，但是在实践的大致中可以分为256色的png和全色的png，你完全可以用256色的png代替gif，用全色的png代替jpeg。
2、透明性：png是完全支持alpha透明的（透明、半透明、不透明），尽管有两个怪异的现象在ie6（下面详细讨论）
3、动画：它不支持动画
Png8的在ie中的怪异表现
半透明的png8在ie6以下的浏览器显示为全透明。
alpha透明的全色PNG（png32）在ie6中会出现背景颜色（通常是灰色）
上面可以总结：全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其一下的浏览器下错误的显示成全透明，其它的浏览器都能正常显示半透明。图像上颜色较少、并且主要以纯色或者平滑的渐变色填充以及具备较大的亮度差异的图像适合以png8格式存储。
四、svg格式
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
SVG格式特点：
1、SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2、SVG 用来定义用于网络的基于矢量的图形
3、SVG 使用 XML 格式定义图形
4、SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
5、SVG 是万维网联盟的标准
6、SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体
SVG跟上面这些图片格式最大的不同，是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企业Logo、Icon等。
五、bmp格式
BMP是一种与硬件设备无关的图像文件格式，使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。
这是一种比较老的图片格式。BMP是无损的，但同时这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常具有较大的文件大小。虽然同时支持索引色和直接色是一个优点，但是太大的文件格式格式导致它几乎没有用武之地，现在除了在Windows操作系统中还比较常见之外，我们几乎看不到它。
六、WebP格式
WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。
想象Web上的图片之多，百分之几十的提升，是非常非常大的优化。只可惜，目前只有Chrome浏览器和Opera浏览器支持WebP格式，所以WebP的应用并不广泛。为了使用更先进的技术，比如WebP图片格式，来压缩互联网上传输的数据流量，谷歌甚至提供了Chrome Data Compression Proxy，设置了Chrome Data Compression Proxy作为Web代理之后，你访问的所有网站中的图片，在经过Proxy的时候，都会被转换成WebP格式，以降低图片文件的大小。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

关于图像格式jpg、gif、png、svg、bmp、WebP的区别以及应用场景相关推荐

保存图像_设计干货知识：SVG vs PNG vs JPG｜图像格式的优缺点
首发于小智LOGO:https://xzlogo.com 及同名公众号在为网站和其他数字媒体创建图像时,哪种文件格式会给你带来最佳效果?让我们深入了解每种图像格式的优缺点. SVG SVG是可缩放矢 ...
聊一聊几种常用web图片格式：gif、jpg、png、webp？大厂必问
gif.jpg.png-8.png-24.webp的区别 (1)gif是一种无损的基于索引色的图片格式,支持透明和动画, 缺点是由于gif只存储8位索引,所以色彩,细节丰富的图片不适合保存位gif格式 ...
HTML5: SVG （可缩放矢量图形）
ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...
SVG关注复杂图形的网页绘制技术
SVG 是使用 XML 来描述二维图形和绘图程序的语言. 学习之前应具备的基础知识: 继续学习之前,你应该对以下内容有基本的了解: HTML XML 基础如果希望首先学习这些内容,请在本站的首页选择 ...
d3 svg path添加文本_10 倍高清不花！大麦端选座 SVG 渲染
作者 | 阿里文娱无线开发专家波涛责编 | 夕颜出品 | CSDN(ID:CSDNnews) 背景介绍用户在大麦上购票,需要自行选座.在大型场馆下,如何让 10 万+座位绘制达到闪开?这需要技 ...
HTML/CSS——网页SVG ICON(小图标)解决方案
一.基本概念 SVG: SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大 ...
svg载入html,SVG系列教程：SVG简介与嵌入HTML页面的方式
随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等 ...
SVG 教程（一）
SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言. 学习之前应具备的基础知识: 继续学习之前,你应该对以下内容有基本的了解: HTML XML 基础如果希望首先学习这些内容,请在 ...
pydicom 显示jpeg压缩图像_解读常见图像格式
一.图像处理多数图像的存储格式一般都为字节型(char), 每种图像格式包括很多信息,其中主要还是颜色的存储RGB和RGBA.其中图像存储安照矩阵的方式,如下图: 如果有A通道说明这个图片有透明效果 ...
android 将bitmap存为 bmp格式图片大小,把bitmap保存成 BMP的格式并且位深度为1
生成图片的要求:图像格式采用单色位图文件格式(BMP) 要求bmp的位深度为1 参考: 代码有点小瑕疵 : bitmap的图片宽度要求是:8的整数倍 /** * 将Bitmap存为 .bmp格式图片 ...

关于图像格式jpg、gif、png、svg、bmp、WebP的区别以及应用场景

关于图像格式jpg、gif、png、svg、bmp、WebP的区别以及应用场景相关推荐

最新文章

热门文章