前端中用到的图片（png图片）

　　作为前端工程师，将设计师的设计稿转化为html页面，其中有一个必不可少的环节就是将psd文件中的一些图片随心所欲的使用，而我们经常用到的就是png图片。

　　

第一部分：基本介绍

　　首先我们先对比几种图片：

　　1.jpg

　　优点:体积比png小,打开速度比png快
　　缺点:属于有损压缩，每次保存都会产生数据损失(jpeg artifacts), 故不适合用于多次编辑保存。压缩率过高图像会失真。

　　PS:网络上最最常见的格式，也是静态图片(不只是照片)就常用的保存格式,就算是同一小组开发的jp2(相当于jpg第2代)也无法取代它。一般如果肉眼无法识别与png的差别和没有特殊要求就用jpg格式图片。

　　

　　2.png

　　优点:无损压缩，有透明选项，压缩效率高于bmp，小图标用png存储最好

　　缺点:一般体积比同尺寸的90%压缩率的jpg要大很多(通常是5倍以上),但人眼很难识别其中的区别

　　PS:最常见的无损压缩图片格式,如果是经常对某图片进行编辑保存,要求图片数据100%完整,或需要透明效果(给PS当素材或用作图标等)则推荐使用

　　

　　3.gif

　　一般只作为动态图像格式使用

　　点击这里查看更多。

第二部分：获取方法

　　对于这几种图片，如果可以直接获取当然是最好的，但是如果不能就要采取其他的方法了。

　　如：从psd中获取png图片--打开pdf，找到想要的小图标（这也是png存在的最大意义），然后将其他无关的图层关掉（最重要的是关掉背景层，如果一时找不到，就慢慢尝试吧）， 但后在该分组下，单击右键，选择快速导出为png，即可导出png图片。