前端开发中对图片的优化技巧总结

dackel 发布于2019-08-30 15:52 / 1193人阅读

摘要：使用矢量图替代位图。对于绝大多数图案图标等，矢量图更小，且可缩放而无需生成多套图。基本上，内容图片多为照片之类的，适用于。而修饰图片通常更适合用无损压缩的。使用减少对图片的请求次数。将图片转换为编码字符串到或页面中，减少的请求次数。

1.去掉无意义的修饰。优化之前首先确认一下设计本身是否需要用这么多图片，是否可以更简洁！

2.不用图片。如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用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有长度限制，注意资源的大小。注意：如果 CSS 还是放在head里，使用data URL时文件的增大必然导致性能（开始渲染时间、首屏）变差。

6.设置缓存。缓存策略（如永久缓存+重命名）、部署策略（如反向代理、CDN等）。

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

8.CSS Sprites。使用CSS Sprites,减少对图片的请求次数。

9.使用base64编码代替图片。适用于图片小于2KB，页面引用图片不多的情况。将图片转换为base64编码字符串inline到CSS或页面中，减少http的请求次数。

10.更好的图片格式，使用webp、bpg、sharpP等新图片格式具有更好的压缩比。

GPU云服务器云服务器前端开发技巧前端开发性能优化技巧总结应用技巧总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116442.html

前端开发中对图片的优化技巧总结

摘要：使用矢量图替代位图。对于绝大多数图案图标等，矢量图更小，且可缩放而无需生成多套图。基本上，内容图片多为照片之类的，适用于。而修饰图片通常更适合用无损压缩的。使用减少对图片的请求次数。将图片转换为编码字符串到或页面中，减少的请求次数。 1.去掉无意义的修饰。优化之前首先确认一下设计本身是否需要用这么多图片，是否可以更简洁！ 2.不用图片。如半透明、边框、圆角、阴影、渐变等，在当前主流浏览...

李义 2019-08-01 16:14 评论0 收藏0
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

MudOnTire 2019-08-21 18:25 评论0 收藏0