做者：贺师俊
链接：https://www.zhihu.com/question/21815101/answer/19410993
滥觞：知乎
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. 根据https和谈设置开理的缓存。详细的缓存战略(如永世缓存+重定名)、布置战略(如反背代办署理、CDN等)那里便没有睁开了。
7. 利用撑持SPDY的效劳器。SPDY可以为是将来的https 2.0的晚期真现，Chrome、Firefox 13+、Opera 12+、IE 11+均已撑持SPDY。SPDY战https2可参考其中文演讲：https://www.youtube.com/watch?v=r74RAcrc1ZA(请自备提子)，那里便没有睁开了。
8. 资本的lazyload或postpone。(lazyload：提早到其他资本下载完成后再减载，postpone：提早到元素可睹再减载。)今朝根本上皆要用剧本掌握。将来hTML战CSS会删减相干的掌握属性，睹：Resource Priorities。
9. 资本的prefetch。可用，睹https://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等尺度提案，那个话题比力年夜，还没有构成遍及承认的最好理论，那里也没有多睁开了。
以上。
