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。

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

9. 资源的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等标准提案，这个话题比较大，尚未形成广泛认可的最佳实践，这里也不多展开了。

TikTok千粉号购买平台：https://tiktokusername.com/