常见图片格式总结--网页设计必备

旧城等待， 2022-11-28 00:52 303阅读 0赞

######  在学习PS切图时，需要将切出来的图转换为不同格式(不同格式的图片优缺点不同)，为了适应不同的需求；在这里记录下常见图片格式的不同，便于以后使用 ######

我们常见的图片格式有：jpg、jpeg、png、gif、PSD、Bmp、Tiff、Webp等；

#### 1.jpg: ####

可支持有损压缩，不支持透明，不支持动画，非矢量;  
色彩还原度比较好，可以支持适当压缩后保持比较好的色彩度;  
如果你图片颜色很多的，建议使用这个图片格式，可以使生成的图片大小比较小而不会使图片看起来很模糊（失真），产品类的图片经常用jpg格式的。

#### 2.jpeg: ####

可支持有损压缩，不支持透明，不支持动画，非矢量;  
与jpg格式相似，经常在拷相片的时候看到得，但我们制作图片的时候一般是保存jpg，该种图片格式是文件相对jpg大，因为里面存储了很多相机里的拍摄参数，像色相、饱和度、对比度等;  
可用于直接打印和印刷（相对于jpg要好）**\[一般情况下jpg与jpeg没有太大区别，后缀名二者可相互书写，小写哦\]。**

#### 3.png: ####

不支持压缩,支持透明、半透明、不透明,不支持动画,非矢量;  
网页设计中为了使图片下面的背景颜色显示出来，我们经常会使用png24透明的图片;  
png8是类似gif的透明度，有带半透明（alpha为50%）的地方的时候以不透明处理。

png图片如果色彩较多或复杂，则图片生成后的格式是很大的，相比较jpg的放有5~6倍之多，所以没特别要求不能以png替代jpg的使用  
png图片多用于网页中的图标设计;  
IE6不支持png透明特性，有png的地方会以灰色底显示，相当难看，不过ie6已经慢慢淡出了我们的视线，相信png的应用会得到更广泛。

#### 4.gif: ####

可支持有损压缩，不支持全透明，支持半透明，支持动画，非矢量；  
GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果。  
3. png图像格式是-种新兴的网络图形格式，结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景.如果想要切成背景透明的图片,请选择png格式.

#### 5. PSD： ####

PSD格式是Photoshop的专用格式 ,里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说最大的优点我们可以直接从上面复制文字，获得图片，还可以测量大小和距离。

#### 6.Bmp： ####

可支持有损压缩，不支持透明，不支持动画，非矢量；  
Windows格式，windows操作系统特有的图片，该图片保存了大量的图片数据，所以图片相对是比较大的，色彩度很真实，windows的桌面就是bmp格式的，通过设了桌面背景后，会在系统生成张bmp的图片用于保存该桌面壁纸；  
缺点：图片格式较大。

#### 7.Tiff： ####

不支持压缩，不支持透明，不支持动画，非矢量；  
印刷格式，色彩真实，支持保存图层(像psd，但像路径、蒙版等不可保存)，通常发给印刷公司的图片就是用这种格式的。

#### 8.WebP: ####

Webp是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。

#### 9.矢量图： ####

还有ai、cdr、eps（这三种也是图片格式）是矢量图形 **\[矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，文件占用空间较小，适用于图形设计、文字设计和一些标志设计、版式设计等\]**，根据自己的使用习惯，可以调整，并没有特别的界限。