PS切图应该保存哪种格式？各种格式之间又有什么不同呢?对web前端来说，图片格式是需要重要掌握的知识。

保存，即存储所需内容。 // Ctrl+N新建，背景一般设为透明

独立图片，使用拖动工具到新的文件即可；

已合并图片，使用矩形选框工具+魔棒选择 > 复制、新建、粘贴或拖到新文件 > 存储为Web所用格式(Ctrl+Shift+S)

图片格式

目前在前端开发中常用的图片格式有jpg、png(分为png8和png24)、gif。最近svg格式也开始流行起来。

gif

gif是无损的，具有文件小、支持动画及透明的特点。但gif无法支持半透明，且仅支持8bit的索引色，即在整个图片中，只能存在256中不同的颜色。

但实际上，gif是一种逐渐被抛弃的图片格式，PNG格式的出现就是为了替代它。

由于gif支持动画的这个“一招鲜”的本领，在网络中仍然占有一席之地，主要用于一些小图标。

jpg

jpg又称为jpeg，是有损的，但采用了直接色，保证了色彩的丰富性。

jpg图片支持透明和半透明，所有空白区域填充为白色，主要用于高清图、摄影图等大图。

png8

png8是无损的，是png的索引色版本。

前面提到过，png是gif格式的替代者，在相同图片效果下，png8具有更小的文件体积，且支持透明度的调节，但png8不支持半透明，也不支持动画。

png24

png24是无损的，是png的直接色版本。

png24支持透明，也支持半透明，但png24有文件体积较大的缺点。

png24的目标是替换jpg，但一般而言，png24文件的大小是jpg文件的5倍之多，但显示效果只有一点点的提升，所以，一般的，使用半透明效果时，考虑使用png24格式。

svg

svg是无损的矢量图，svg与上面的图片格式最大的不同是，上面的图片都是位图，而svg是矢量图，具有无论如何缩放都不会失真的优点。

svg格式非常适应于绘制logo、图表等，但由于低版本浏览器支持不足，应用不广泛。

保存设置

一般地，在对设计图进行修改前，首先要保存一份PSD源文件，然后再在其副本上进行修改。

通过PS将设计图切成需要的素材时，涉及到图片格式的设置问题，应注意以下几点：

a. 当图片色彩丰富且无透明需求时，建议存为jpg格式并选择合适品质，来对图片进行压缩。

// 品质越大，图片质量越高，图片也会越大；设置原则：品质不要100(相当于没压缩)，根据项目需要，一般60-80比较合适

b. 当图片色彩不太丰富时，无论有无透明需求，请保持为PNG8格式。

// PNG8格式只有256种颜色，文件比较小，比较适合网络传输；

设置：存储为Web所用格式 > PNG8 > 颜色默认256，杂边：无，扩散：无仿色(右上角可存储)

c. 当图片有半透明需求时，请保持为PNG24格式。

// 特点：对图片不进行压缩，所以文件比较大；且支持半透明效果(保持面板采用默认设置即可)

Webpiece_整合分析、记录点滴