图片格式

psd

1. photoshop的专用格式，用作效果图，不压缩，保留了图层、透明、半透明等图片信息；
2. 保存了图片的原始数据，方便对图片的修改，相对地，psd图片的容量也很大；
3. 前端工程师使用psd格式的效果图进行切图，制作网页，而不是在网页中直接使用psd图片。

jpg

1. 一种有损压缩格式，压缩效率高，容量小，网络传输速度快；
2. 不能保存为透明背景，在网页中应用广泛。

gif

1. 一种无损压缩格式，最多只有256种颜色，对于颜色丰富的图片转化为gif格式会失真；
2. 背景可以透明，但不能是半透明；
3. 对于透明背景中的图像，如果边缘轮廓使曲线，会产生锯齿；
4. 还可以保存为动画格式。

png

1. 无损压缩格式，用于替代gif；
2. 背景可以是透明或半透明，且透明背景中的图像边缘光滑，没有锯齿；
3. png也是firework的专用格式，可以包含图层信息，firework也是一款图像处理软件。

webp

1. 谷歌于2010年推出的新一代图片格式；
2. 在压缩方面比jpg格式更优越，在质量相同的情况下，webp图像的体积比jpg的小40%；
3. 尚未得到浏览器的广泛支持，只在Chrome和Opera上有效。

位图和矢量图

1. 位图：也称为点阵图，由一个个的方形像素点排列拼接而成，放大时会失真；
2. psd、jpg、gif、png、webp都是位图；
3. 矢量图：与位图的原理不同，其图像轮廓是由函数曲线生成的；
4. 放大矢量图时，其原理就是将曲线乘以一个倍数，不会出现锯齿。

svg

1. 一种矢量二维图片格式，基于xml标记语言描述的，可以通过任何文本编辑器创建；
2. 文件容量小，放大不会失真，背景可以是透明的，很适合做高质量、单色调的图标；
3. 目前，网页图标/地图大量使用svg格式，这种矢量图在不同终端屏幕上的显示效果都很好。

flash

1. 一种适量动画文件格式，很多优秀特性都可以用HTML5取代，如今已逐渐退出历史的舞台；
2. 既可以是静态图片，也可以是多媒体动画，还可以加入用户交互和数据；
3. 格式名为swf，flash是对它的统称，swf文件中衍生出一种流媒体视频格式flv；
4. flv格式的容量小，可以边下载、边观看，广泛应用于视频网站。

总结

1. 网页制作中，不透明背景的图片就使用jpg，透明或者半透明背景的图片就使用png；
2. 制作网页图标
    1. 多颜色的图标使用gif/png格式；
    2. 单色且对显示效果要求高的图标使用svg格式；
    3. 动画图标使用gif格式。
3. 雪碧图/精灵图：HTML网页中的图片需要网络请求，为了减少网络请求的次数，将装饰性图片
   按照一定的距离，排列在一张透明背景的图片上，这样只需要做一次网络请求即可；
   HTML在使用时，通过CSS的定位取出对应图片的位置。