Css Sprites：

介绍：

Css Sprites（雪碧图或css精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

原理：

将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

优点：

  • 减少网页的http请求，提升网页加载速度。
  • 合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.

缺点：

  • 前期需要处理图片将小图合并，多些许工程量。
  • 对于需要经常改变的图片维护起来麻烦。

应用例子：

  • 生成雪碧图：我这里使用了网页雪碧图制作专家，当然还有很多其他的工具
  • 合成的图片如图所示：

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css Sprites</title>
</head>

<body>
    <ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
    </ul>
</body>

</html>

css代码：

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}
  • 效果图：

适用场景：

  • 对于一些不需要多变动的小图片，表情，标志等等都可以使用。
  • 一般都是应用于小图片，太大的图片不利于合并，且定位麻烦，一次的加载时间长，导致全部图片出现时间延迟，效果不友好。

base64：

介绍：

base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，要求把每三个8Bit的字节转换为四个6Bit的字节，Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。

通俗点讲：将资源原本二进制形式转成以64个字符基本单位，所组成的一串字符串。
比如一张图片转成base64编码后就像这样，图片直接以base64形式嵌入文件中（很长没截完）：

生成base64编码：

图片生成base64可以用一些工具，如在线工具，但在项目中这样一个图片这样生成是挺繁琐。
特别说下，webpack中的url-loader可以完成这个工作，可以对限制大小的图片进行base64的转换，非常方便。

优点：

  • base64的图片会随着html或者css一起下载到浏览器,减少了请求.
  • 可避免跨域问题

缺点：

  • 老东西（低版本）的IE浏览器不兼容。
  • 体积会比原来的图片大一点。
  • css中过多使用base64图片会使得css过大，不利于css的加载。

适用场景：

    • 应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
    • 用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片

精灵图和base64如何选择的更多相关文章

  1. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  2. 第9天：CSS精灵图

    今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...

  3. web前端sprite，精灵图，雪碧图

    css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一 ...

  4. 如何创建 mapbox 精灵图

    前面文章介绍了如何在本地发布OSM数据,并使用 maputnik 自定义 mapbox 格式的地图样式. 在使用 maputnik 配图时,如果想要使用自己的图片作为地图符号,就需要制作精灵图. ma ...

  5. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

  6. H5 40-CSS精灵图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Css - 精灵图

    Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...

  8. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  9. CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

随机推荐

  1. SpringBoot项目优化和Jvm调优

    https://www.cnblogs.com/jpfss/p/9753215.html 项目调优 作为一名工程师,项目调优这事,是必须得熟练掌握的事情. 在SpringBoot项目中,调优主要通过配 ...

  2. 失控的未来交通工具 （LOJ 508，带权并查集，数论）

    LOJ 508 失控的未来交通工具 (带权并查集 + 数论) $ solution: $ 很综合的一道难题.看了让人不知所措,数据范围又大,题目描述又不清晰.只能说明这道题有很多性质,或者很多优化. ...

  3. SSM整合中错误：Data truncation: Data too long for column 'gender' at row 1

    错误描述 ### SQL: insert into t_customer(name,gender,phone,address) values (?,?,?,?) ### Cause: com.mysq ...

  4. 基于flask的可视化动漫分析网站【python入门必学】

    课程设计项目名称:基于flask的可视化动漫分析网站,如果你在学习Python的过程中,往往因为没有好的教程或者没人指导从而导致自己容易放弃,为此我建了个Python交流.裙 :一久武其而而流一思(数 ...

  5. spring中试用junit4测试

    一:加入jar包 <!-- 单元测试 --> <dependency> <groupId>junit</groupId> <artifactId& ...

  6. 计蒜客 T2237 魔法 分类讨论

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  7. 【bzoj2427】【软件安装】tarjan缩点+树形依赖背包

    (上不了p站我要死了,侵权度娘背锅) Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上, ...

  8. Web 与 Node 基础

    浏览器端发送请求(browser) 浏览器或者模拟发送 http 请求端 服务端处理请求(web) 服务器(使用 node ) 2.1. 使用 Forever 管理程序 2.2. 可以使用 PM2 代 ...

  9. （10.1）Python学习笔记二

    1.在项目工程中要模块化测试一个开发的功能,在测试通过后交付给项目组其他人员继续开发.要保证代码开发的性能和效率以及可扩展性. 2.项目工程中的文件夹分类要功能模块明确清晰,在python中引入某一个 ...

  10. Fiddler简介以及web抓包1

    一.Fiddler简介 简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯.网上简介很多,我们不多说. 二.Fiddler版本 Fiddle ...