网页中嵌套图片的输出格式说明

写前端网页的时候不乏涉及ps切图，如果能选择正确的切图格式，不但能保证图片的质量，还能减小图片尺寸、加快图片在网络上的传输，尤其是logo或者静态图较多的页面，切图尤为重要。

一般来讲，前端切图输出的常用格式有三种：png8，png24，jpg(jpeg)，gif动图作为静态图片格式的时候，已经被压缩更好的 png8 代替（相同质量的图gif格式更大）， gif在动图中应用的更为广泛。

1.何时使用png8

对于一些常规的，倾向于矢量效果的图片，颜色比较单纯，没有大幅度高要求的渐变，不含有自然界真实人物的图片，常用 PNG8 格式；当图片带有布尔透明（也就是要么全透明，要么全不透明）的时候，使用 PNG8。

常规 PNG8 用 PS 输出的时候，直接使用如图参数即可：

2.何时使用png24

对于自然界中比较真实的人物，出现在图片中时，如果图片因为特殊的效果要求，带有 alpha 透明通道（也就是有透明度，从全透明到全不透明之间是有等级区别的）的时候，我们选用 PNG24。但如果图片很真实很艳丽，不带有 alpha 透明通道，那 JPG 才是最佳选择。

PNG24 的输出参数为：

要注意上面的透明度选项，一般是肯定要勾选的。而交错选项是让图片在 web 中传输时以多条路径下载，但勾选这个选项之后，一般 PNG24 的文件尺寸会增大很多，所以我们一般不选择“交错”选项。
更重要的是：PNG24 用 PS 输出之后，体积会非常大，往往一点小图标可能就高达几百K，这对网络传输的要求会比较高，用户体验很差。所以输出的 PNG24，一定要去https://tinypng.com/上压缩之后再使用到页面中。
至于有的工作流工具的插件，如 gulp、webpack 等，里面有图片优化的插件，但这些插件用于处理带 alpha 通道的 PNG24 的时候，效果都比 tinypng 差，所以针对 PNG24，还是建议去 tinypng 上压缩（还有另一个网址：http://tu.qikegu.com/）。

3.何时使用jpg

上面已经说过了，对于自然界中比较真实的人物，或者设计师在设计的时候，图片中出现大量的光线、气泡、渐变、模糊效果的时候，并且不带有 alpha 透明度，那么我们输出图片使用 JPG 格式。

一般使用的参数如下：

注意“连续”这个选项，它能让图片以多条路径下载，提高用户体验，但与 PNG24 的“交错”选项不同的是，JPG 勾选这个选项之后，图片的体积会减小，所以我们默认勾选。另外 72 的高品质，加上 0.2 的高斯模糊，可以平滑设计图中的字体边缘并减小图片体积。