html5 - CSS Sprite适合合并什么图片?
高洛峰
高洛峰 2017-04-17 11:04:46
[HTML讨论组]

我看一般用来合并小图标。是否可以合并一些图片,省去img标签?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(5)
黄舟

通常当遇到一个网站要加载大量icon(小图标)的时候,我们会把它合并成sprite(图片拼接)。目的是为了减少HTTP请求次数。这样做既能减少页面加载时间,又可以减轻服务器的负载。楼主的问题是可不可以推而广之,把大量image(图片),比如背景和首页slides图片,也合并成sprite,把对所有image的大量请求减少为1个对sprite的请求. 因为使用了压缩技术,sprite的大小要比每个image加起来小得多。这里有个问题,是否需要把这个sprite再转换成data-uri:base64, 并放到css里。google了一下“base64 vs css sprite”,Paul Irish 对此有一篇精彩的论述,他的结论是不需要转换,直接使用CSS sprite.

PHPz

你在自问自答嘛,合并图片的话,大多是合并一些小的图标也就是icon,你可以看看新浪微博是怎么划分的, 不过有时候不光是小图标可以合并,大的图标也可以, 只要做好分组。

伊谢尔伦

给你推荐两个网址 http://www.spritecow.com/ http://csssprites.com/

怪我咯

CSS sprite和DataURIs各有各的好,主要看实际情况 参考这篇blog:http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/

伊谢尔伦

CSS Sprite适合合并多个无意义的图标,不适合图片。 img标签是有语义的,搜索引擎可以读的到,而Sprite提在css中,搜索引擎不会读,虽然用两种方式看起来展示效果是一样的。

其次,如果你网页里面存在图片的缩放操作,比如:

<img src="abc.png" style="width: 50%">

这个css sprite是搞不定的。(css3中的bg-size有类似效果,不过支持度不一样)

PS:base64 IE6不认哦(fuck,我厂网站还有10%多的IE6用户)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号