1. 去掉无意思的润饰。嗯，我会瞎说吗?除了内容图片，其余的图片的作用是润饰，也就是对转达信息来说并非实质性的。最大的优化就是压根不要图片!所以在优化之前要做的，首先是确认设计，设计自身是否须要用那么多图片?仍是说能够更简练?

　　2. 不必图片。嗯，切图是一件扯淡的事件!不要隔靴搔痒了少年，直接应用CSS替换图片来实现润饰后果吧!如半透明、边框、圆角、暗影、渐变等，在当前主流阅读器中都能够用CSS达成。未来CSS滤镜得到普遍支撑后，还能够做到alpha混杂、正片叠底等各种后果。

　　3. 应用矢量图替换位图。对绝大多数图案、图标等，矢量图更小，且可缩放而无需天生多套图。当初主流阅读器都支撑SVG了，所以可释怀应用!

　　4. 应用适当的图片格局。咱们常见的图片格局有JPEG、GIF、PNG。基础上，内容图片多为照片之类的，实用于JPEG。而润饰图片通常更合适用无损紧缩的PNG。而GIF基础上除了GIF动画外不要应用。且动画的话，也更倡议用video元素跟 视频格局，或用SVG动画代替。除了这些格局之外，Chrome、新版Opera、Android 4+支撑WebP格局，IE 9+、IE mobile 10+支撑JPEG XR。这两个新格局都支撑无损跟 有损紧缩，都存在更良好的紧缩比。当然这须要为不同的阅读器返回不同的图片，增添了开发本钱，也增添存储本钱。不外你省了流量或者雷同流量下改良了图片品质，晋升了用户体验。你会如何取舍呢?对了，别忘了应用优良的图片编码器及适合的参数。好的图片编码器，尤其是有损图片格局的编码器，能通过算法或手动调剂，取得更高的紧缩比。

　　以下是广泛实用各种资源而不限于图片的优化手腕：

　　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。可用，见http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch。留神prefetch只是hint，Firefox会预取资源(假如网络闲暇的话)，而IE 9则是对该资源的hostname进行DNS预解析。假如你真的须要更强的把持，则得用脚本。留神：Chrome支撑与prefetch相近但更进一步的，另外SPDY参加了与prefetch相近但语义不同的subresource link支撑，这两个新特征我也没用过，有兴致的能够尝试。

　　图片的其余优化技能如字体图标、CSS Sprites等，不外我不推举。用字体图标不如用SVG。应用了SPDY跟 data url后，CSS Sprites完整不必要用了。

　　再有各种特定的图片问题，超越了个别优化的范围。如很多手机阅读器有黑夜模式，其中有的阅读器容许定制黑夜模式;有的手机阅读器容许在用户开启不加载图片选项的情况下闪开发者设置必需加载的图片(有点绕);又如很多手机阅读器有所谓云加速模式，即在服务器端对图片进行处置后再发送给客户端，应当返回怎么的图片给这些服务器有待研讨跟 实际。

　　10. 最后是responsive设计所需的图片优化，可能要发生多套不同大小跟 辨别率的图片，配合media query、以及srcset属性、picture元素、src-N等尺度提案，这个话题比拟大，尚未构成广泛认可的最佳实际，这里也未几开展了。