前端开发-图片使用规范

Posted 2021-04-08 insightLabs

前端开发中，经常会遇到如何选择图片格式的问题。图片是影响前端体验和性能一个非常重要的因素，能否选择正确格式的图片，是体现前端工程师能力的一个关键点。

矢量图与位图

矢量图

位图

位图又叫像素图或栅格图，他是通过记录图像中每个点的颜色、深度、透明度等信息来存储图像。一张位图就好比一张大的拼图，只不过每个拼块都是一个纯色的像素点，当我们吧这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以，当我们放大一幅像素图时，能看到这些图片的像素点。
位图的优点是利于显示色彩层次丰富的写实图像。缺点是文件较大，放大和缩小图像会失真尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即它们都是通过记录像素点的数据来保存显示图像的，但这些不同格式的图像在记录这些数据时的方式却不一样，这就涉及到有损压缩和无损压缩的区别。

有损压缩与无损压缩

有损压缩

有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，他会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。
JPG是最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分成==8 * 8==像素的栅格，然后对每个栅格的数据进行压缩处理，当我们放大一张图像的时候，就会发现这些==8 * 8==像素栅格中很多细节信息被删除，而通过一些特殊算法用附近的颜色进行填充。这也是为什么我们用JPG存储图形有时会产生块状模糊的原因。

无损压缩

无损压缩则是真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采用一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空只需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。

不同的图片格式

PNG

PNG有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可展现256级透明程度。PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。8代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。
因为PNG中的压缩算法是无损的，你可以选择性地减少它的颜色，从而通过外部工具减小图片尺寸。 Pngquant就是一个很好的工具，它可以在保证透明度不变的情况下同时减少文件大小。请注意，这一过程会创建一个8位文件，即该文件最多可以有256种颜色。可能看起来不多，但是用这么多颜色足以获得很好的效果。

PNG特性

• 能在保证不失真的情况下尽可能压缩图像文件的大小

• PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据

• 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在web页面上

使用规范

• 少用图片元素，尽量用css3代替。 比如圆角，提示框，不会二次渲染的元素的阴影。

• 尽量少用png32格式，太大了。在某些情况下，如果损失一定的视觉可以获得性能较大的提升，可以和设计师协商去掉一些效果。

• JPG适合摄影图像或写实图像，同时也适合颜色较少图像；PNG8 适合所含颜色很少(少于256)、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片；PNG32适合图片较为复杂且有透明效果且透明效果无法用css来实现的情况。

• 如果页面中有较多的小icon，首先考虑使用webfont，如果webfont不能满足需求，必须使用css sprite将图片合并，来压缩总体图片的大小，同时减少页面请求提高访问速度。

JPEG

JPEG是一种针对照片视频而广泛使用的一种有损压缩标准方法。 JPEG本身只有描述如何将一个视频转换为字节的数据流，但并没有说明这些字节如何在任何特定的存储媒体上被封存起来。JPEG的压缩方式通常是破坏性数据压缩（lossy compression），意即在压缩过程中图像的质量会遭受到可见的破坏，有一种以JPEG为基础的标准Lossless JPEG是采用无损的压缩方式，但Lossless JPEG并没有受到广泛的支持。使用JPEG格式压缩的图片文件一般也被称为JPEGFiles，最普遍被使用的扩展名格式为.jpg，其他常用的扩展名还包括.jpeg、.jpe、.jfif以及.jif。
JPEG是万维网（World Wide Web）上最普遍的被用来存储和传输照片的格式。它并不适合于线条绘图（drawing）和其他文字或图标（iconic）的图形，因为它的压缩方法用在这些类型的图形上，得到的结果并不好（PNG和GIF格式通常是用来存储这类的图形；GIF每个像素只有8比特，并不很适合于存储彩色照片，PNG可以无损地存储照片，但是文件太大的缺点让它不太适合在网络上传输。

JPEG特性

• 支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

• 有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

• JPG和PNG8都适合颜色较少的图片，因为JPG在栅格化时精确记录少数点，其它点用差值补齐。但是当图像颜色数少于一定值比如256的时候，PNG8可能更合适。

• JPG不适合具有大块颜色相近的区域或亮度("锐度")差异十分明显的较简单的图片。

GIF

是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50%左右。
GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小。GIF主要分为两个版本，即GIF 89a和GIF 87a。
GIF是一种正在逐渐被抛弃的图片格式。PNG格式的出现就是为了替代它。PNG8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩（GIF仅支持索引透明）。

GIF优点

• 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小；

• 可插入多帧，从而实现动画效果；

• 可设置透明色以产生对象浮现于背景之上的效果；

GIF缺点

• 由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩色图片；

• 不能半透明（有阴影效果图片、渐变效果，会被处理掉），处理锯齿效果不好。

SVG

SVG与前面讲的栅格格式不同，顾名思义，它是矢量格式。这意味着它不会基于像素存储数据，而是通过记录坐标的形式存储图形信息。SVG在线条艺术，LOGO，图标，插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节的复杂图片。SVG使用基于XML的语义化标签结构，这有点像html。由于是DOM结构，你可以通过ID获取SVG元素，并操纵它们。这带来了很多可能性，例如使用Java和CSS修改并对元素进行动画操作或者创建响应式图形。
SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML命名空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。

SVG优点

• 图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件）；

• 与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入javascript（严格地说，应该是ECMAScript）脚本来控制SVG对象；

• SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索；

• SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果； SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户；

• 矢量图形，文件比较小，同时也能提供高清晰的画面，适合于直接打印或输出。

SVG缺点

• SVG的本地运行环境下的厂家支持程度；

• 由于原始的SVG档是遵从XML语法，导致数据采用未压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。Adobe因此使用gzip压缩开发出压缩的SVG档格式，附档名为 .svgz， 但此种文件格式除了Adobe旗下的软件以外，未被广泛支持使用；

• 旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。

WebP

是一种同时提供了有损压缩与无损压缩的图片文件格式，WebP支持无损压缩和透明色的功能，派生自视频编码格式VP8，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。 目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。
根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。

参考文档：
CSDN博文：https://blog.csdn.net/charlene0824/article/details/51178837
进击的小皮：https://www.cnblogs.com/pqjzxq/p/5749304.html
伯乐在线：http://web.jobbole.com/91599/