常用图片格式介绍（了解

常用图片格式

 

• 图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，可以方便我们在制作网页时选取适合的图片格式，图片格式及特性如下：

1、psd

photoshop的专用格式。

优点：完整保存图像的信息，包括未压缩的图像数据、图层、透明等信息，方便图像的编辑。

缺点：应用范围窄，图片容量相对比较大。

2、jpg

网页制作及日常使用最普遍的图像格式。

优点：图像压缩效率高，图像容量相对最小。

缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。

3、gif

制作网页小动画的常用图像格式。

优点：无损压缩，图像容量小、可以制作成动画、支持透明背景。

缺点：图像色彩范围最多只有256色，不能保存色彩丰富的图像，不支持半透明，透明图像边缘有锯齿。

4、png

网页制作及日常使用比较普遍的图像格式。

优点：无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。

缺点：不能制作成动画

 

位图和矢量图

位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。上面讲的5种图像都属于位图。矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。

 

svg

目前首选的网页矢量图格式。

优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。

缺点：色彩不够丰富。

 

总结

在网页制作中，如何选择合适的图片格式呢？

 

• 1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；
• 如果要使用透明或者半透明背景的图片，就使用png图片；

 

• 2、使用小幅面图片或者图标图片时，
• 如果图片含多种颜色，可以使用gif或png图片；
• 如果图片是单色，而且要求有很好的显示效果，可以使用svg；
• 如果是图片时动画的，可以使用gif。

 

 

psd

jpg

gif

png

svg

photoshop

常用

网页小动画,

常用

 

保存所有图片信息

,压缩效率高,容量小

无损压缩,容量下,支持透明

无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。

图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑

应用范围窄,容量大

有损压缩,

不支持透明,和动画

图像色彩不丰富,不支持半透明,透明有锯齿

不能制作成动画

色彩不够丰富。

常用图片:

jpg(不透明),

png(透明),

动画:gif

色彩单一要求很高:svg