不同图片类型以及区别

2018-07-01 本文已影响20人阿r阿r

一些名词：jpg(jpeg)，png，gif，webp，bmp，apng，base64，svg，雪碧图，图标字体

图片格式	压缩方式	动画	适应浏览器
JPG	有损	不支持	所有
PNG	无损	不支持	所有
GIF	无损	支持	所有
APNG	无损	支持	firefox、safari
WebP	有损/无损	支持	chrome、opera

基本概念

1.矢量图和位图(BMP)

矢量图：通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。
这里有一点要注意的是web开发中用到的图片都不是矢量图，即使是一个三角形，只有一个边框，都是位图。
矢量图：图标字体 font-awesome ,svg

位图：又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。
位图：jpg,png,gif

2.有损压缩和无损压缩

有损压缩：是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。
JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。
我们在保存图片为jpg格式时，会有一个品质选项这里指的就是对图片的损耗程度，如果压缩的话一般选择品质在60-80之间，60以下图片失真会很严重。

无损压缩：先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。
PNG是我们最常见的一种采用无损压缩的图片格式。
无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。这点在PNG8中体现的尤为明显。PNG8最多只能索引256种颜色，所以在图像上出现的颜色数量大于我们可以保存的颜色数量时，我们就不能真实的记录和还原图像了。

不同图片类型

1.GIF

一种无损8位图片格式（无损8位是指一个8位图像仅最多只能支持256中不同颜色，多于256种颜色再用gif格式保存便会失真），不适用于色彩太过丰富的照片存储，但比较适用在logo、icon图标、一些小布局的边框图片、不超过256种色彩的简单小型图片。
gif是一种透明背景的图片，对透明对支持仅仅局限于全透明或者不透明，被放置在网页中可以看到页面上其它图片背景，对于页面的呈现非常有用。gif若作为非动图来说，只能用于颜色不太复杂的图片。
gif有个动画的功能，在APNG兼容性十分不友好的情况下，如果仅仅想引入一个动图的话，gif是目前很好的选择。
gif还有个特别的功能便是隔行扫描，这个特性可以加快页面加载的速度，对于网速比较慢的浏览者就比较实用了

GIF是一种正在逐渐被抛弃的图片格式。PNG格式的出现就是为了替代它。PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩（GIF仅支持索引透明）。

当图片颜色简单到一定程度，大小小到一定程度的时候，gif格式图片大小要小于png8。比如一个1*1像素的纯黑色点，在PNG8下是124byte，在GIF下是43byte。

2.JPG

压缩方式为有损，支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。对于图片中，没有透明效果的，以及图片更为颜色丰富的图片，我们多可以采用压缩60%-80%的jpg图像。
jpg的每一次压缩，对图片都是有损的，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。因此，对于一些有线条，或者文字的图片，应该尽量避免对jpg的使用。
JPG和PNG8都适合颜色较少的图片，因为JPG在栅格化时精确记录少数点，其它点用差值补齐。但是当图像颜色数少于一定值比如256的时候，PNG8可能更合适
JPG不适合具有大块颜色相近的区域或亮度("锐度")差异十分明显的较简单的图片。
JPG在存储摄影或写实图像一般能达到最佳的压缩效果，比如网站的背景图，轮播图，用户头像等等。

3.PNG

PNG可以细分为三种格式:PNG8，PNG24，PNG32。

后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。

格式	位数	透明支持
png8	8	不支持
png8+索引透明	8	仅支持完全透明
png8+alpha透明	8	支持
png24	24	不支持
png32	32	支持

关于透明：

PNG8支持索引透明和alpha透明，体积小，用的比较多
PNG24不支持透明;
而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。

PNG的特性：

• 无损压缩，能在保证不失真的情况下尽可能压缩图像文件的大小
• PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据
• 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在web页面上

在存储图像时采用JPG还是PNG？

1.依据图像上的色彩层次和颜色数量进行选择。
一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。
特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。
而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。
2.用于页面结构的基本视觉元素
如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

4.APNG

作为想取代gif的新格式，他比我们常用的gif更为优秀。从其名称中可以看出，APNG其实可以说是会动png，因为png支持24位的颜色，而gif最多仅支持8位的颜色，因此，APNG的显示效果比gif更为清晰。可惜APNG并没有加入png标准，因此我们日常生产中很难将其纳入使用。

5.WebP

是由谷歌推出的图片格式，想让其作为web中专用的图片格式。
是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％的文件大小。
与jpg作对比，WebP有对透明的支持，以及完全不亚于JPG的压缩率。而与PNG对比，WebP更小，加载更快。不过可惜的是，其兼容性也是不太友好。
同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

6.base64

概念：Base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。
写法：
img的src属性开头是data:image/png;base64，这种开头表示的就是Base64编码后的图片格式，鼠标放在src属性上，可以看出实际的图片。
图片采用Base64编码后的字符串非常长，可能达到几十KB。
优点：
1.减少网络请求。采用Base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载，这样就可以减少http请求的次数，对于网页优化是一种比较好的手段。
2.采用Base64编码的图片是随着页面一起加载的，不会造成跨域请求的问题。
3.不会造成清理图片缓存的问题
缺点：
1.Base64格式编码，生成的字符串体积可能会大于原图片或url，使 css文件的大小剧增，造成代码可读性差，请求传输的数据量递增。
2.兼容性问题，对于IE8以下的浏览器，不支持data url格式，IE8开始支持data url，却对大小作出了限制，在使用时不是很方便。

对于极小或者极简单的图片，例如只有几像素的图片不用考虑跨域问题不想页面的图片缓存，可以用base64编码

7.svg

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

概念：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

8.雪碧图

雪碧图被运用在众多使用了很多小图标的网站上。

相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。

优点：
1.将多张图片合并到一张图片中，可以减小图片的总大小。
2.将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

9.图标、矢量图标、图标字体

图标

在Windows操作系统中，单个图标的文件名后缀是.ICO。这种格式的图标可以在Windows操作系统中直接浏览；后缀名是.ICL的代表图标库，它是多个图标的集合，一般操作系统不直接支持这种格式的文件需要借助第三方软件才能浏览。

在Windows中的图标文件(*.ico)使用类似BMP文件格式的结构来保存，但它的文件头包含了更多的信息以指出文件中含有多少个图标文件以及相关的信息，另外，在每个图标的数据区中，还包含有透明区的设置信息，对于图像信息数据的组织则与BMP相同，这是一种无损的图像。

矢量图标

矢量图标的好处是自由缩放不失真，并且容易控制整体风格

阿里巴巴的矢量图库IconFont.cn http://www.iconfont.cn/，可下载svg图标，AI图标，png图标
国内的原创矢量图库网站貌似确实不多，阿里巴巴的这个质量也比较高，主要摘录的是它自家的一些图标，不过大部分的时候也够用了。

图标字体

利用字体文件来写图标，直接用CSS控制，兼容性好，使用方便，图标多而全。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。不过貌似没有找到单独下载某些图标的方法。

优化

1、不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
基本上，内容图片多为照片之类的，适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG。
GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等。
6、用CSS或JavaScript实现预加载。
7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

参考
https://www.cnblogs.com/pqjzxq/p/5749304.html
https://www.cnblogs.com/duanzhange/p/8747392.html
http://web.jobbole.com/83670/
https://blog.csdn.net/AndyNikolas/article/details/78910768