目前的网络，是一个客户体验至上的年代，大部分公司都会把如何进步商品的易用性放在最重要地方。如何进步商品的水平则体目前项目开发的很多阶段，比如商品规划、UI规划和前端开发等。而图片优化在进步商品水平上也起到了无足轻重有哪些用途，这也便是为何愈加多的商品团队更加看重这个问题。
本文关于图片优化的内容最重要由两部分构成前端开发中的图片优化半通明、圆角、暗影、高光、突变等。这类用途主流的浏览器都可以好支撑，而关于那些低端浏览器，咱们并不会完全抛弃他们，“渐进增强”则是一个非常不错的解决计划。至于什么是渐进增强，这儿不再用过多篇幅去解释说明，倘若有兴趣可以参考CSS“渐进增强”在web制造中容易见到运用举例。
3. 挑选比较合适的图片
咱们容易见到的图片格局有JPEG、GIF、PNG。
基本上，内容图片多为照片之类或图片构成较复杂的情况，适用于JPEG。如网站中的Banner图、轮播图、大尺度背景图等。
润饰图片一般更合适用无损紧缩的PNG。而咱们最重要用到的PNG图片又分为PNG-8和PNG-24两种，PNG-8格局不支撑半通明，也是IE6兼容的图片存储方法。倘若对图片水平需要较高的半通明或全通明背景，保存成PNG-24更适合。有时会遇见在IE6下运用PNG-24图片的情况，关于IE6下PNG Alpha通明的解决计划可以参考IE6中PNG Alpha通明。我在项目中常见的方法是AlphaImageLoader挑选器。
GIF基本上除去GIF动画外不要运用。
除去这类格局以外，Chrome、新版Opera、Android 4+支撑WebP格局，IE 9+、IE mobile 10+支撑JPEG XR。这两个新格局都支撑无损和有损紧缩，都具备更好的紧缩比。当然这需要为不一样的浏览器回来不一样的图片，添加了开发本钱，也添加存储本钱。不过你省了流量或者相同流量下改进了图片水平，提高了客户体验。这就需要依据项目需要进行取舍了。
4. 常见的图片优化方法
CSS Sprites，将相同种类型的图标或按钮等背景图合到一张大图中，削减页面恳求。
Icon Font，将图标做成字体文件。长处是图标支撑多个尺度，兼容所有浏览器，削减页面恳求等。美中不足的是只支撑纯色的icon。
SVG，关于绝大部分图案、图标等，矢量图更小，且可缩放而不需要生成多图库。目前主流浏览器都支撑SVG了，所以可放心运用！
图片紧缩工具，可以在图片上线前运用紧缩工具进行紧缩，获得更高的紧缩比。我常见的紧缩工具为Yahoo的Smush.it。
5. 适用各种资源而不限于图片的优化
data url
base64是互联网上最容易见到的用于传输8Bit字节的编码方法之一，可用于在HTTP环境下传递较长的标明信息。将图片转化为base64编码格局，资源内嵌于CSS或HTML中，不需要一个人恳求。
该方法的长处是前端开发中的图片优化
1. IE6, IE7不支撑该种类编码的图片作为背景图
2. 添加了CSS文件的尺度
3. 保护本钱较高
根据HTTP协议设置适当的缓存
详细的缓存方案（如永久缓存 + 重命名）、布置方案（如反向署理、CDN等）这儿就不展开了。
Responsive规划
为了习惯目前海量分辨率和设施像素比的手机，要发生多套不同大小和分辨率的图片，然后配合Media Query进行开发。这儿推荐在进行手机端页面开发时运用SVG或Icon Font等技能。这类技能可以好支撑Retina设施。
以上为项目中常见的图片优化技能，只有更多地看重细节，才干做出出色的商品。
推荐名字前端开发中的图片优化
