做一个合格的切图妹，要掌握什么时候切什么格式的图，及如何切出这个图，肯定不是直接ctrl+s保存就好了是吧！（ps:不太喜欢切图妹这名字，能换成切图小仙女么)。切图小仙女就给你简单说一下。
网页常用图片格式有哪些？
png-24、png-8、jpg、gif
webp是最小保质最高的图片格式，可惜现在兼容性还不好。如果能使用webp的话下文就没有什么意义了。下文只说关于通用图片格式
什么图片格式最小
- png-8最小，透明和不透明，大小差别不大
- gif 介于png-8和jpg之间，他与png-8一样，都是透明时毛边很重
- jpg如果小到png-8那么小的话，质量会比png-8差
- png-24永远大，高质量杆杠的
什么时候用什么格式？
什么时候都用png-24？
不对！这样一来图片质量高了，但是图片体积也很大了，加载起来也慢了
png-8那么小，能不能一直用png-8呢？
不能！有时候png-8的图片会比jpg的躁
按需使用图片格式：
- 使用png-24：图片需要透明，切其它格式的会出现毛边，合适要求透明的图片
- 使用png-8：图片不需要透明，或者图片透明后毛边不严重，合适m版大图
- 使用jpg：图片不需要透明的大部分时候。
- 使用gif：建议不用了吧，动画可用css3画就行了
ps如何切图片
使用command+option+shift+s（mac）或者ctrl+shift+art+w（window）打开存为网页图片面板， 这个面板存储的图片比直接ctrl+s存的要小。
我们只需要关注3个点：
红框1 选择图片格式，里面是区分png-24和png-8的，直接直接ctrl+s的png都是png-24 选择了jpeg后还有出现蓝框2和橙框3，这两个框的数值可以帮助我们把继续把图片压缩
蓝框2 选择图片质量，品质可以输入0-100，数值越高图片质量越高。60以上算是高品质，根据自己的图片调整数值，没有硬性规定要填多少，如果不出现毛边，这个数值越小越好。
橙框3 连续和优化
- 连续： 选择连续后图片，在网页上显示的时候，图片是先加载整体，一个模糊的整体，然后再从上而下变清楚，这种图片对用户更友好，但是比较吃内存，
- 优化： 选择优化的图片，网页上显示的时候是从上而下的显示，渲染多少显示多少，不难想像，网页上的图片基本都是这样子的。
图片的延伸：
fonticon：站内众多小icon做成font， 整个站下来这个字体的体积要比一张合拼成的图片要小。
