IT旅店的作者：大腰
网络技术为多媒体信息传播提供的快速可靠的方法。 在多媒体信息中，图像信息占有很大的比例。 通过网站分发的图像信息大多作为图像文件提供。 所以，了解常用图像文件的格式和特征需要一点时间，很有意义！
的表达内容只是个人观点，仅供参考。 未经许可拒绝转载。
bmp、jpg、png、gif和svg的常用图像格式
作为网站前端开发者，掌握的图像文件格式和要点是：优化有意发布的图像，为网站用户提供最高质量、流畅的浏览体验，作为互联网参与者，了解图像的格式和特征。 主要网站技术为用户生成内容(UGC )的处理)例如，上传到百度贴吧的图片应该如何处理，用微信聊天发送图片时为什么要压缩优化， 一方面有助于理解淘宝详细页面使用大量图片有什么坏处等)，另一方面用户知识水平的提高，会促进评价能力的提高，对网站开发者、网站开发者产生相反的效果，从而促进
评价图像文件本身的质量(不是评价图像内容的质量，例如照片拍摄、书画的意境等，本文不讨论) )可以综合考虑这些要素。 像素数)大小分辨率)、失真情况)有无损失、损失、压缩)、字节数)图像文件的二进制大小)。
贴士：“尺寸”一词，英语是Size。 传统意义上，尺寸(Size )是一种空间维度的测量方法，如物体的纵横高度、单位为厘米、毫米等。 随着计算机技术的诞生，“尺寸”一词出现了新的含义。 它是二进制维的测量值，即字节数，常用的是字节) Byte、千字节) KB、兆字节) MB、千兆字节) GB等。 这给某个场景中的“尺寸”的表现带来了理解的混乱。 例如，如果被问到某个图像文件的大小是多少字节，对方也无法分辨出想知道的是图像的纵横各多少厘米，还是图像文件占了多少字节。 为了避免难以理解“大小”一词，建议您只使用空间维的含义，而使用二进制维的测量要求。
需要处理图像时，综合考虑上述参数，结合不同的图像文件格式特征，有助于选择最佳的图像保存格式。
bmp、jpg、gif、png、svg不同文件格式的特征比较表
什么是像素数？
计算机利用数字化技术处理信息，第一步是对信息进行采样。 以一定的单位剪切自然界连续的信息量，并断续地进行存储。 例如，如果将声音数字化，自然界声音的波形可以看作连续的一维曲线，采样是指隔一定的时间在声波上获取一系列的信息点。 信息点密度足够大时，足以表现声音的特征。 这里只简单说明一下，因为想全面地理解声音采样，所以请官员亲自理解采样频率的采样比特深度等概念。 请参阅计算问题。 WAV格式、采样频率44.1KHZ、双向、32位量化位数、播放4分钟、USB容量的大小至少是多少？
声波数字采样的示意图
对于自然界的图像收集的信息点的数量是像素数。 与一维声音曲线采样相比，图像采样多一维，有纵横二维。 例如，如果纵横各采样10点，则采样的像素数为1010=100像素。 平时手机的摄像头是800万像素。 也就是说，用照相机拍摄的照片最多可以采样800万个。 像素数越多，图像中包含的有效信息越多，图像也越接近自然界的实际情况。
图像的数字采样图像
如何减少保存在图像文件中的字节数？
如上所述，像素数越多，越足以说明图像内容的特征。 所以，现实中很多数字图像拥有800万像素等庞大的像素数。 通常，每像素的比特深度为24比特，即3B (字节)，因此存储800万个像素点所需的存储区域为800万 3B=8M 3B=24MB )，这是较大的字节数。 那么，需要压缩并保存图像，减少字节数。
如何进行压缩存储？ 说明一下印象吧。
bmp格式文件的保存方法——无压缩：
描述一：对于上述800万像素的图像，一般说明为：第1像素的颜色为蓝色，第2像素的颜色为蓝色……第100万像素的颜色为蓝色，第100万像素的颜色为红色，第100万像素的颜色为第2像素
颜色红……第200万个像素颜色红、第200万零一个像素颜色蓝、第200万零二个像素颜色蓝……第800万个像素颜色蓝。800万像素简单图像示意图
好了，终于把800万个点的颜色说完了。显然，这种存储方式要进行大量的描述，反映到计算机上就是需要占用很大的字节数。
当然，这种方式也有优势，那就是计算机在处理bmp图像时，按描述，逐个像素绘制，就可以完成图片的显示了，不需要做额外的翻译工作。其实bmp是Windows操作系统中的标准图像文件格式，其他格式的文件在被处理的过程中都会被转换成bmp格式，才能进一步进行显示等处理。
jpg、png等格式文件的存储方式——有压缩：
描述二：对上面的描述方式，我们可以作一些改变，第1到100万个像素颜色蓝、第100万零一到第200万个像素颜色红、第200万零一到第800万个像素颜色蓝，三句话就把800万个像素描述完了，写起来连省略号都不需要！
这就是一种对信息的压缩，大多数情况下，压缩之后的图片文件字节数会减小，达到了减小图片文件存储的字节数的目标。极少数情况下压缩没效果，比如800万个像素颜色各异，当然，这种情况很少用到。
什么是图像失真？
图像失真分为采样失真和存储失真，这里只介绍存储失真。前面提到了jpg、png等格式文件的存储方式——有压缩，怎么进行进一步的压缩呢？那就是把类似的颜色当作一种颜色来看，比如浅蓝、深蓝各种蓝色全部看作一个标准的蓝色。显然，经过这种“颜色简化”之后，图片内容跟原始情况就有了差距，不真实了，就叫做失真。
很多情况下，都会采取这种失真的存储方式，来进一步减少图片的字节数。虽然有失真，不过不必担心，计算机可以表示出来的颜色非常丰富，很多相近的颜色肉眼是识别不出来的，所只要不是太过分的简化颜色，是不会影响我们用眼睛欣赏图片内容的！jpg格式的图片就是用这种方式存储的。
什么叫索引方式存储？
前面说到，通畅每个像素的颜色需要用3个字节（3B）来表示，有些场景下，采样获得的图片颜色只有有限的种类。那我们可以给颜色起一个简短的名字（简短名字只占1个字节），比如：红色的名字就是“1”，蓝色的名字就是“2”，这就叫做图片的颜色索引表，是和图片存储在一起的，会占用部分的字节。有了颜色索引表，我们就可以改变一下描述一的内容，如下。
描述三：颜色索引表内容为：1-红色，2-蓝色；第1个像素颜色2、第2个像素颜色2……第100万个像素颜色2、第100万零一个像素颜色1……你看，图片的字节数就得到了减小，之前是800万×3字节，现在只需要800万×1字节，在花费少量的字节存储颜色索引表即可。
这就是索引方式存储，gif、png（8bit）就是使用这种方式。
什么是位图和矢量图？
位图是将图像采样，记录有限个像素点的颜色来进行存储的；矢量图更像是通过数学公式的方式，记录和存储图像中各个形状的特征，显示时再通过计算这些数学公式，把形状呈现出来。
位图适合存储场景复杂、色彩丰富的图像，不过，因为其存储的像素数量总是有限的，所以图片放大了会失真；矢量图适合存储各种点、现、面构成的图像，色彩也不宜太多，但是其支持无限放大而不会失真。本文列出的svg格式是矢量图，其他都是位图。
位图与矢量图放大失真对比示意图
svg在移动端应用广泛。为了自动缩放以适应不同的屏幕尺寸，在面向移动端的网页中多采用svg图片文件，比如logo、图标等等，使网页在不同的显示比例下都能确保边缘清晰不失真，能够为用户提供更好的访问体验。要注意的是，在PC端，svg不被老版本的IE浏览器支持。
此文暂时就谈这些内容，对于图片的背景透明、gif动态图、如何在PhotoShop中操作等问题，后续开贴继续浅谈，敬请关注！