前端图片最优化的引入方式分析

苏丹发布于2019-08-29 13:43 / 1402人阅读

摘要：前端图片引入方式分析众所周知，页面内图片的引入方式一般有这种雪碧图，内联，普通单图。当然了，你非要把标签写在前面那我只能说，哥，我服了解了三种方式的优劣势之后，对于使用场景简单归纳一下页面自身独有的图片，全部合并成一张雪碧图。

前端图片引入方式分析

众所周知，页面内图片的引入方式一般有这3种：雪碧图，base64内联，普通单图。（canvas,svg等非常规方式不在此次议题里），先简单分析一下三种方式的优劣势：

嗯，大概的情况是这样的，然后我来稍微扩展解释一下：

base64图本身确实无法缓存，但是base64图一般是存在于css里的，那么就可以随着css被缓存而实现间接缓存，所以它的缓存属性不是“无”。说它“差”是因为并不是直接被当做图片缓存。当然如果是直接写在html里的，那就没法缓存了，这个要注意。

base64额外增加html/css大小并不是主要问题，问题是，因此造成的渲染堵塞有时候是致命的！而作为图片文件加载则不存在这个问题，因为图片是不会堵塞到html和css加载的，因此也不会影响首屏渲染。（当然了，你非要把img标签写在style前面那我只能说，哥，我服~~~~）

了解了三种方式的优劣势之后，对于使用场景简单归纳一下：

页面自身独有的图片，全部合并成一张雪碧图。

公共模块或者公共组件，如果包含多张图片，则各自为阵合并各自的雪碧图；如果只有一两个图片，或者包含有可以被其他模块、组件、页面复用的图片，则使用灵活性好的单图模式或base64模式。

不过这种说法遗留了一个问题：例如所有页面都有的吊顶区域，假如那里有一个小图，注意，是一个喔（如果是很多的话就合并啦），这种时候是直接单图引入呢？还是base64内嵌到吊顶的css里？

别急！

下面我们再对base64模式做一个简单的分析：

先明确我们对于base64图片劣势的控诉点在于，1：丫会增大原始图片文件；2：植入css之后会增大css文件大小。

做一个简单的实验，我把几个全局经常出现的小图标，用base64编码，结果：平均增大35%
但是！gzip压缩后 —— 4%~40%，平均增大22%

下面简单归纳一下不同场景所应该使用的图片引入方式：（正经脸 -_- !!!）

1、全局通用的，非特定页面或模块独有的图片，采用单图或base64方式引入，二者区别如下：
1.1 若该图片在多处使用或图片本身较大（这类图总体积大于20kb），则使用单图模式
1.2 若该图片只有少数地方使用且图片本身较小（这类图总体积小于20kb），则使用base64模式
2、公共模块/组件里的图片（假设该模块名为mod-prd）
模块内有N(N>=3)个图片，则全部放入slice/mod/prd里，使用雪碧图模式，否则参考全局通用图片处理方式
3、页面自身独有的图片，全部合并成一张雪碧图

云服务器 GPU云服务器 css引入方式对数据仓库分析的四种方式 html如何引入图片前端优化

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

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

前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

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

CoderStudy 2019-08-21 16:56 评论0 收藏0
前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

HackerShell 2019-08-21 12:05 评论0 收藏0
前端面试题（五）（安全、性能优化）

摘要：可能造成危害利用已通过认证的用户权限更新设定信息等利用已通过认证的用户权限购买商品利用已通过的用户权限在留言板上发表言论。二说说你说了解的前端性能优化方面减少请求合并文件精灵减少查询查询完成之前浏览器不能从这个主机下载任何任何文件。一、说说你所知道的web安全及防护措施常用攻击手段：SQL注入、XSS(Cross Site Script)，跨站脚本攻击、CSRF(Cross Sit...

tuomao 2019-08-22 18:01 评论0 收藏0
前端面试题（五）（安全、性能优化）

摘要：可能造成危害利用已通过认证的用户权限更新设定信息等利用已通过认证的用户权限购买商品利用已通过的用户权限在留言板上发表言论。二说说你说了解的前端性能优化方面减少请求合并文件精灵减少查询查询完成之前浏览器不能从这个主机下载任何任何文件。一、说说你所知道的web安全及防护措施常用攻击手段：SQL注入、XSS(Cross Site Script)，跨站脚本攻击、CSRF(Cross Sit...

aaron 2019-08-02 10:41 评论0 收藏0