⽹页开发中常见图⽚格式，以及它们的特点和区别
⾸先你先要了解我们平时看到的图⽚是如何存储图⽚信息的。在你所能看到的所有⾊彩当中，有三个⾮常重要的颜⾊，分别是：红、绿、蓝，我们称之为三原⾊。如下图：
image.png
三原⾊会根据原⾊的浓度不同，在计算机⾥我们⽤1-255的数值来进⾏表⽰，如下：
image.png
当三种颜⾊以不同的数值混合在⼀起的时候，就产⽣了各种各样的颜⾊，如下：
image.png
当我们把⼀张图⽚⽆限放⼤的时候，我们会看到⼀个个的像素点，每⼀个像素点都会保存⼀个颜⾊信息，也就是我们通常所说的rgb值，R代表红⾊，G代表绿⾊，B代表蓝⾊。如下：
image.pngsvg图
⽹络上常见的图⽚格式有三种，分别是：jpg、gif、png，这三种都属于压缩格式。图⽚为什么要压缩呢？举个例⼦：专业的相机拍出来的照⽚清晰度⾼⾊彩鲜艳，这是因为图⽚本⾝的像素就很⾼，记录的信息很多，数据量⾃然就很⼤，因此这种⽂件的体积通常也⾮常⼤，这不利于我们保存，也不利于我们在⽹络上进⾏传输。因此我们会将这些图⽚进⾏压缩处理，将那些可以忽略的，不重要的颜⾊细节统⼀的处理⼀下，这样的话我们⽤⾁眼看起来这两张图⽚的差别并不⼤，但是体积却减⼩很多。如下：
image.png
除此以外，对于图像中颜⾊⼀致的区域，我们可以记录下这块区域的位置，然后只保存⼀个颜⾊就可以了，这样也能进⼀步减少这个图⽚的体积。如下：
image.png
三种图⽚类别的特点和差别：
1、gif：⽀持动画、只有全透明和不透明两种模式、只有256种颜⾊
它最⼤的特点是⽀持动画，但对于图⽚透明度的⽀持并不好，只有全透明和不透明两种模式，由于它只有256种颜⾊，所有⽤来保存⾊彩丰富的照⽚就不⾏了。它可以⽤来做⼀些常见的图形、图表之类的，如：
image.png
对于动画图像我们肯定会选择gif，这也是为什么动态图⽚通常看起来颜⾊都⽐较失真的原因。
2、jpg：采⽤有损压缩算法、体积较⼩、不⽀持透明、不⽀持动画
3、png：采⽤⽆损压缩算法、体积也相对较⼩、⽀持背景透明、不⽀持动画
svg图，这种格式的图⽚不会保存每个像素的信息，它只会记录每个图像形状和颜⾊。例如我们看到的⼀个扇形，在svg图⽚格式中，它会保存类似于这样的信息：
默认半径：30px
⾓度：0-45度
颜⾊：rgb(255,0,0)
假设我们现在要把图⽚放⼤三倍，我们只需要把半径改成“90px”就可以了，然后计算机会根据我们的半径、⾓度、颜⾊在屏幕上重新绘制出⼀个扇形图，这样我们看到的图⽚也就不会失真。但是svg这种特殊记录信息的⽅式不太适合应⽤于照⽚。如下图：
image.png
上图中的图⽚拥有⾮常丰富的⾊彩信息，如果采⽤svg这种⽅式去存储的话⼏乎是不可能的。⾸先提取颜⾊的形状就很困难，⽽且这个数据量会⼤的惊⼈，因此svg⼀般会⽤于保存颜⾊以及形状⽐较简单的图像，如下图：
image.png

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。