13.图片格式总结

一。PS

学习使用ps的基本使用以及ps中关于切图这一块的知识，目的是能熟练使用ps查看UI设计师的设计效果图，同时利用ps切图来制作专业html页面。

二。常用图片格式   常用前4个

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

1.psd

ps的专用格式

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

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

2.jpg

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

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

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

3.gif

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

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

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

4.png

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

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

缺点：不能制作动画

5.webp

将要取代jpg的图像格式

优点：同jpg格式，容量相对比jpg还要小

缺点：同jpg格式，目前不支持所有的浏览器

6.位图和矢量图

位图也叫点阵图，是由一个个的方形的像素点排列一起拼接而成的，位图在放大时，图像会失真，上面讲的5种图像都属于位图。

矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易的放大，而不会出现像素块，图像边缘也不会出现锯齿。

7.svg

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

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

缺点：色彩不够丰富

 

8.flash

退出历史的重量级网页矢量图格式

优点：图像容量小，图像放大不失真，支持透明背景和半透明色彩，图像边缘光滑，还可以制作动画，可编写交互。

缺点：不支持搜索引景。运行慢，浏览器需要装插件才能支持

 

总结：

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

1.使用大幅面图片时，如果要使用不透明背景的图片，就是用ipg图片；如果要使用透明或者半透明背景的图片，就使用png图片。

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