移动端的图片优化方式与技巧

5. 使用data url。资源内嵌于CSS或HTML中，而不必单独请求。注意，多个地方都要使用的资源不一定适合用此优化方式，因为图片数据重复多了，增加流量。另外许多浏览器对data url有长度限制，注意资源的大小。

6. 按照HTTP协议设置合理的缓存。具体的缓存策略（如永久缓存+重命名）、部署策略（如反向代理、CDN等）这里就不展开了。

7. 使用支持SPDY的服务器。SPDY可认为是未来的HTTP 2.0的早期实现，Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。SPDY和HTTP2可参考此中文演讲：http://www.youtube.com/watch?v=r74RAcrc1ZA（请自备梯子），这里就不展开了。

8. 资源的lazyload或postpone。（lazyload：延迟到其他资源下载完成后再加载，postpone：延迟到元素可见再加载。）目前基本上都要用脚本控制。未来HTML和CSS会增加相关的控制属性，见：Resource Priorities。

9. 资源的prefetch。可用<link rel=prefetch>，见http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch。注意prefetch只是hint，Firefox会预取资源（如果网络空闲的话），而IE 9则是对该资源的hostname进行DNS预解析。如果你真的需要更强的控制，则得用脚本。注意：Chrome支持与prefetch相近但更进一步的<link rel=prerender>，另外SPDY加入了与prefetch相近但语义不同的subresource link支持，这两个新特性我也没用过，有兴趣的可以尝试。


图片的其他优化技巧如字体图标、CSS Sprites等，不过我不推荐。用字体图标不如用SVG。使用了SPDY和data url后，CSS Sprites完全没有必要用了。

再有各种特定的图片问题，超出了一般优化的范畴。如许多手机浏览器有黑夜模式，其中有的浏览器允许定制黑夜模式；有的手机浏览器允许在用户开启不加载图片选项的情况下让开发者设置必须加载的图片（有点绕）；又如许多手机浏览器有所谓云加速模式，即在服务器端对图片进行处理后再发送给客户端，应该返回怎样的图片给这些服务器有待研究和实践。


10. 最后是responsive设计所需的图片优化，可能要产生多套不同大小和分辨率的图片，配合media query、以及srcset属性、picture元素、src-N等标准提案，这个话题比较大，尚未形成普遍认可的最佳实践，这里也不多展开了。

以上。