手机端怎么减少大量小图标的http请求?(手机端能否使用sprite?)

大家都知道在pc端能够使用雪碧图减少小图标的http请求,但是在手机端如何实现呢?

还有除了使用sprite的方法,还有什么其他的方式能够减少大量图片http请求数?

阅读 6.9k
13 个回答

这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。
不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。

手机端使用css sprite,要实现窗口响应,background-size使用百分比就行,另外还是建议你使用字体图标吧,现在移动设备显示屏越来越高清了,@2x都不够用了,这里介绍两个字体图标网站给你,希望对你有帮助。
Iconfont:http://www.iconfont.cn/
FontAwesome:http://fortawesome.github.io/Font-Awesome/

这个与手机端和pc端没有关系的。均可以使用雪碧来减少http请求的。不过如果是大量小图标的话,可以使用Font Awesome,一套绝佳的图标字体库和CSS框架。

请参考雅虎优化准则.

一般都用字体图标

还有datauri呀~

就我目前的接触到的来说 spirit 不能响应式布局。所以题主应该是有响应式的要求。那么可以采用字体图标的方式去实现。这样通过控制font-size 就可以控制在不同屏幕大小下的图标大小。同时,字体图标是一次性导入,http请求方面应该是OK的吧。最近也看到篇帖子,内容是响应式图标,很诱人,不过应用还偏窄。 https://icomoon.io/推荐一个字体图标的网站。非常棒,其他的话,慕课网上也有字体图标的相应课程。

新手上路,请多包涵
  1. 使用spdy

  2. 使用域名收敛
    结果: 不会减少总请求量,但是会减少请求的连接数和大大减少请求时间

CSS Sprite已经过时了,不支持响应式。
优先用字体图标或矢量图形吧

CSS Sprite的好处是制作方便,一些前端构建工具可自动生成Sprite。但很难应用到响应式页面中。

字体图标支持响应式,有很多现成的图标库,但是制作一些个性化的字体图标需要花一些时间。

减小http请求,也可以将一些小图片base64内置。

兼容性不需要低版本PC浏览器的话,可以用纯CSS3图标库。如:
http://www.uiplayground.in/css3-icons/
http://nicolasgallagher.com/pure-css-gui-icons/demo/
http://cssdeck.com/labs/css3-monochrome-icon-set
http://codepen.io/eMaj/pen/joLqt

各种图标库网上很容易找到,个性化要求的只能自己做了 :)

如果你用过webpack的话,可以把小图标写成base64的图片。

字体图标 或 base64;考虑到百分比和相对单位,不建议使用sprite。

把小图标用字体图标icon-font来替代。成熟的字体图标方案有font awesome

推荐问题
宣传栏