前端开发中的图片优化

百度权重查询 词库网 网站监控 服务器监控 seo监控 手机游戏 iPhone游戏

文/来自竹林

现在的互联网，是一个用户体验至上的时代，大多数公司都会把如何提高产品的易用性放在首要位置。如何提高产品的质量则体现在项目开发的许多阶段，例如产品设计、UI设计和前端开发等。而图片优化在提高产品质量上也起到了举足轻重的作用，这也就是为什么越来越多的产品团队更加关注这个问题。

本文关于图片优化的内容主要由两部分构成：

1. 整顿总结网上关于图片优化的一些体例方法。

2. 自己在项目开发过程中现实碰到的问题以及用到的图片优化方案。

如有不足之处，迎接大家指出并增补。

1. 简约而不简单

Win8和iOS7的出现，将互联网行业中许多产品设计带回到原点，或许更是另一个新的起点。Win8的Metro UI、iOS7中图标的扁平化设计、一向崇尚简约的豆瓣网、还有顶着时代工匠称号的老罗所设计的锤子ROM，无一不体现着简约的风格。

言归正传，回到我们图片优化的主题上。在产品设计和UI设计阶段，除了内容图片，其他的图片都是起修饰的作用。也就是对于传递信息来说并非本质性的。所以好大的优化就是不要图片。在进入到研发阶段之前，就要确认设计，设计自己是否需要用到那么多的图片，照旧说可以做到更简洁！

2. 样式代替图片

Chrome，FF等浏览器厂商为互联网的发展做了这么多贡献，为什么我们还要让那些不兼容CSS3的浏览器阻碍互联网的发展呢。因此，让我们直接使用CSS样式代替图片来实现修饰效果！例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够好支撑，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。至于什么是渐进增强，这里不再用过多篇幅去诠释，假如感爱好可以参考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. 削减了HTTP请求

2. 避免了图片重新上传，还要清理缓存的问题 

不足之处是：

1. IE6, IE7不支撑该类型编码的图片作为背景图

2. 增添了CSS文件的尺寸

3. 维护成本较高

按照HTTP协议设置合理的缓存

具体的缓存策略（如永远缓存 + 重命名）、部署策略（如反向代理、CDN等）这里就不睁开了。

Responsive设计

为了适应现在众多分辨率和设备像素比的移动设备，要产生多套不同大小和分辨率的图片，然后配合Media Query进行开发。这里推荐在进行移动端页面开发时使用SVG或Icon Font等技术。这些技术可以好支撑Retina设备。关于更多响应式方案，可以参考《响应式Web设计: HTML5和CSS3实践》这本书或网上相关资料，这里不再睁开。

以上为项目中常用的图片优化技术，只有更多地关注细节，才能做出优异的产品。往后会介绍更多文章中出现的技术细节。