关于图片选型那些事我们需要了解不同图片格式之间的区别，基于不同图片的优缺点及性能特征，选择最优的图片格式，给用户最佳的访

项目里有图片引入，不是简单的问UI要张图就结束了~

图像类型

矢量图

矢量图的图形元素被定义为一个对象，包括颜色、大小、形状及屏幕位置等属性
优点：在任何缩放比例下呈现出细节同样清晰的展示效果
缺点：对细节的展示效果不够丰富，对于复杂图像，用SVG绘制，文件会很大，而且很难达到照片真实效果

位图

通过对一个矩阵中的栅格进行编码来表示图像的，每个栅格只能编码表示一个特定的颜色
一个像素点4个通道是4字节，一张图像整体的大小与其包含的像素数成正比，图像包含像素越多，展示细节越丰富，图像就越大

图像格式

JPG【JPEG】（Joint Photographic Experts Group）

出现最早，使用范围最广的格式
也是一种有损压缩算法，通过去除相关冗余图像和色彩数据获得较高的压缩率，同时展现相当丰富的图像内容
不支持透明度
处理logo和图标时，会出现一些边界模糊的不佳体验
压缩模式
- 基线模式：加载顺序是自上而下的
- 渐进式【主流，但解码速度稍慢】：将图像文件分为多次扫描，首先展示一个低质量模糊的图片，随着扫描信息增多，图像清晰度会不断提升

渐进式.png

GIF（Graphics Interchange Format）

由于对支持颜色数量的限制，256色远小于展示图片需要颜色的数量级，gif不适合展示图片，后来推出的PNG对图像展示更佳，所以只有使用动画时才用gif

PNG

无损压缩的高保真图片格式
对线条处理细腻，增强了色彩的表现力，不足是文件体积太大
有三种子类型：PNG-8、PNG-24、PNG-32
PNG-8称为调色板PNG，使用单帧图形图像时，尽量用PNG-8代替GIF
当图像颜色超过256种时，就需要用真彩PNG或JPEG。PNG-24不包括alpha透明通道，加上8位的alpha透明通道的是PNG-32

WebP

目标是以较高的视觉体验为前提，尽可能降低有损压缩和无损压缩后的文件尺寸，同时支持透明和动画
WebP有损文件大小比JPEG小25%-34%
WebP无损文件大小比PNG小26%
有兼容问题

webp兼容.png

SVG（Scalable Vector Graphics）

通过图像的形状轮廓、屏幕位置等信息描述图片
适合表示logo等图标图像
学习成本较高
由于显示器的本质是元素点构成位图，所以渲染矢量图时比位图多一步光栅化的过程，所以用预定义形状<circle>, <rect>, <line>, <polygon>，少用path甚至曲线

Base64

不是图像格式，是一种用于传输8位字节码的编码方式，可以将代表图像的编码写入到html中实现图像的展示

格式选择建议

图表logo的场景用矢量图
相同图像质量下具有更高的压缩比且支持动画，WebP是首选
考虑兼容性的话，包含动画则GIF，对图像要求用高分辨率展示细节且需要透明度则PNG，追求高压缩比则JPEG
位图对于不同缩放比例的响应式场景，建议提供多张不同尺寸的图像
img的srcset属性可针对不同设备，提供不同分辨率图像文件

<img src="a.jpg" srcset="a@2x.jpg 2x, a@3x.jpg 3x, a@4x.jpg 4x" />

picture标签会在多图像文件选择时，获得更多的控制维度，如屏幕方向、设备大小、屏幕分辨率等

<picture>
    <source media="(min-width: 800px)" srcset="a.jpg, a-2x.jpg 2x"/>
    <source media="(min-width: 450px)" srcset="a-s.jpg, a-s-2x.jpg 2x"/>
    <img src="a.jpg" />
<picture/>

选图总览.png

总结

我们需要了解不同图片格式之间的区别，基于不同图片的优缺点及性能特征，选择最优的图片格式，给用户最佳的访问体验。目前市面上的工具，figma、zeplin等都支持直接导出不同格式的图片文件，和你的UI小伙伴商量好即可~

关注公众号：不zhi前端，一起学习，一起进步~

关于图片选型那些事

图像类型

矢量图

位图

图像格式

JPG【JPEG】（Joint Photographic Experts Group）

GIF（Graphics Interchange Format）

PNG

WebP

SVG（Scalable Vector Graphics）

Base64

相关概念

分辨率

压缩

图像的加载和显示

格式选择建议

总结