为什么要使用css-sprite

什么是Css sprite?

Css sprite:又被称为Css精灵,它是一种性能优化技术,它将多个图像合并到一个通常被称为雪碧图的图像中。

Sprint通过减少呈现网络所需的下载次数来减少网络堵塞。

在一个网站里,每一个图片通常储存在一个单独的文件中,其中的一些图片可能是相关的,或者是同一个图片的变体,例如一个按钮在普通状态和高亮状态下使用的两个不同的图片。当用户打开网络时,他们的浏览器必须一个一个的请求这些图片,这样便可能导致页面呈现较慢。

然而使用CSS Sprite,多个图片被整合到一个精灵图中,用户不需要下载多个文件,而是只需要下载单个文件,当需要特定的图像时,CSS引用这张雪碧图,通过偏移和定义尺寸来达到目的。

应用场景

  • 各种小图标:如导航图标,功能按钮,标签。。。
  • 相对固定,不会频繁更换的背景修饰图

CSS Sprite 的优点##

  • 更流畅的用户体验,因为一旦雪碧图被下载,所有使用雪碧图上面的图片的地方都会得到渲染,而不是一个文件一个文件的加载。
  • 减少HTTP请求,将原本需要的多个请求合并为一个,较少服务器压力,从而较少网络堵塞。对于拥有百万级别用户的web服务,雪碧图可能意味着下载数量从一亿变为一百万的区别。
  • 减少图片的字节。多次比较,三张图片合并成一张图片之后的字节总是小于这三长图片的总和。
  • 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源优测

哪些年从事自动化测试需要经历的往事

在实战中,又去接触了watir,即ruby版的selenium,又是一通的直接看源码,顺便学习和了解ruby

11420
来自专栏java一日一条

我是怎样克服对 React 的恐惧,然后爱上 React 的

在一个交互式应用程序一切罪恶的根源是管理状态。“传统”的方式是MVC架构,或者一些变体。MVC提出你的模型是检验真理的唯一来源 – 所有的状态住在那里。视图是源...

7720
来自专栏陈树义

Web语义化、响应式设计

Web语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。 如果可以在合适的位置使用恰当的标签,那么写...

29940
来自专栏Material Design组件

Human Interface Guidelines — Steppers

11850
来自专栏张俊红

python在租房过程中的应用

总第84篇 01|背景介绍: 租房是再普遍不过的一件事情了,我们在租房过程中常考量的两个因素是出租房离公司的远近以及价格,而我们一般都会去链家上看相应的信息,但...

43360
来自专栏王肖的UT

使用FFmpeg处理音视频

本文主要是介绍如何使用ffmpeg命令行工具进行各式各样的音视频处理操作——缩放、裁剪、剪辑、旋转、格式转换,etc。。。学了本文,基本可以把格式工厂之类的音视...

1.8K80
来自专栏编程

canvas 入门实战-邀请卡生成与下载

来源:守候 https://segmentfault.com/a/1190000012418898 1.前言 写了很多的javascript和css3的文章,是...

241100
来自专栏更流畅、简洁的软件开发方式

帮助文档的数据库结构

  自然框架一直没有完整的帮助文档,只是有几个简单的示例。这个就是差距呀,那么帮助文档要怎么写呢?有工具可以自动生成,但是总感觉自动生成的一点都不好用,自己都看...

22590
来自专栏前端新视界

如何编写通用的 Helper Class

Github: https://github.com/nzbin/snack-helper Docs: https://nzbin.github.io/sn...

23080
来自专栏听雨堂

Morris图表使用小记

挺好用的,碰到几个问题,有的是瞎试解决了的: 1、我想折线图能够响应单击事件,即点击某个节点后,就能加载进一步的信息,帮助没找到,参照另外一个地方的写法,居然支...

30580

扫码关注云+社区

领取腾讯云代金券