Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第114天 为什么要使用css sprites? #1038

Open
haizhilin2013 opened this issue Aug 7, 2019 · 6 comments
Open

[css] 第114天 为什么要使用css sprites? #1038

haizhilin2013 opened this issue Aug 7, 2019 · 6 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第114天 为什么要使用css sprites?
#55

@haizhilin2013 haizhilin2013 added the css css label Aug 7, 2019
@nowherebutup
Copy link

  • 减少HTTP请求
  • 增加图片显示速度

@qp97vi
Copy link

qp97vi commented Aug 8, 2019

减少页面向服务器请求次数,优化该页面的加载速度

@HCLQ
Copy link

HCLQ commented Aug 8, 2019

就像钱不够,省着用,一块搬开两块用

@LinStan
Copy link

LinStan commented Aug 8, 2019

css sprites指的是将该页面请求的图片资源都拼接到一个图片文件上,通过css从拼接好的图片上获取需要的部分。
优点:
一个是减少了HTTP请求的发送次数
一个是合并后的图片一般小于合并前的图片大小总和
缺点:
如果发生改动需要重新做拼接

@xiangshuo1992
Copy link
Contributor

根据项目具体需求来做选择吧,现在小图片用base64 也是可以的,或者图标字体库

@Konata9
Copy link

Konata9 commented Aug 19, 2019

CSS sprites 把许多小图片 icon 合成一张大图片。利用 background-position 来显示对应的图片。这样做的好处就是可以减少 http 请求,提高网页的加载速度。如果有 10 个小图标那就需要请求 10 次,如果合成 CSS sprites 就只需要请求一次。

以前一般使用 Photoshop 进行拼接,现在的话有工具可以直接生成。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

7 participants