一、CSS Sprites的原理(图片整合技术) Css精灵雪碧图
1、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background position"来实现背景图片的定位技术。
2、图片整合的优势:
1)通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
2)通过整合图片来减小图片的体积。
二、实现图片整合的方法和技巧
1)使用ps进行小图片整合
2)使用相关软件来进行操作
三、WEB前端开发中常用三种图片格式以及他们之间的区别?
网站设计中，常用的图片格式有三种: JPEG、 GIF、 PNG。
1、JPEG:
①支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小;
②有损压缩会使图像数据质量下降,
③JPG不适合具有大块颜色相近的区域或亮度，适合差异十分明显的较简单的图片，
④JPG在存储摄影或写实图像一般能达到最佳的压缩效果，比如网站的背景图，轮播图，用户头像等
2、PNG的优缺点
①能在保证最不失真的情况下尽可能压缩图像文件的大小。
②PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的a通道数据。
③对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。PNG8可以用来做小图标(icons) ,按钮，背景等。
3、 GIF图片
GIF是一 种调色板型，含有多达256种的颜色。每一个象素点都有一个对应的颜色值。是一种无损压缩的格式，GIF格式可以用来做动画
图片格式的使用规范:
少用图片元素,尽量用css3代替，比如圆角，阴影;尽量少用png32格式，太大了;如果页面中有较多的小icon,首先考虑使用webfont,如果webfont不能满足需求，必须使用Css sprite将图片合并，来压缩总体图片的大小，同时减少页面请求提高访问速度。
拓展： webp格式的图片
WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。
WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。2011年11月8日，Google开始让WebP支持无损压缩和透明色（alpha通道）的功能，而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45%的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28%的文件大小。
相比jpeg，这种格式可以把图片大小减少40%
