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. nginx之热部署，以及版本回滚

    热部署的概念:当从老版本替换为新版本的nginx的时候,如果不热部署的话,会需要取消nginx服务并重启服务才能替换成功,这样的话会使正在访问的用户在断开连接,所以为了不影响用户的体验,且需要版本升级 ...

  2. 统计学习方法——第二章的c++实现

    1.东西搞丢了,只写一部分 2.算法那收敛性 证明逻辑: a.γ是yi*(wopt*Xi)最小值 b.R是Xi最小值 c.k<=(R/γ)^2 难打公式,直接说,Wk由Wk-1迭代而来,所以事实 ...

  3. [转载]MAC、IP头、TCP头、UDP头帧格式、详解

    原文地址:MAC.IP头.TCP头.UDP头帧格式.详解作者:iTudu 转自:http://zoufengfu168.blog.163.com/blog/static/546105520099133 ...

  4. Linux 开机自动启动脚本

    1)编写要执行脚本的sh文件mysetup.sh #!/bin/sh ### BEGIN INIT INFO # Provides: land.sh # Required-start: $local_ ...

  5. 分布式FastDfs+nginx缓存高可用集群构建

    介绍: FastDFS:开源的高性能分布式文件系统:主要功能包括:文件存储,文件同步和文件访问,以及高容量和负载平衡 FastDFS:角色:跟踪服务器(Tracker Server).存储服务器(St ...

  6. 【学习】019 SpringBoot

    一.SpringBoot介绍 1.1.SpringBoot简介 在您第1次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复黏贴的配 ...

  7. 表达式，数据类型和变量(Expressions，Data Types & Variables)

    (一)表达式: 1)4+4就是表达式,它是程序中最基本的编程指令:表达式包含一个值(4)和操作符号(+),然后就会计算出一个单独的值; 2)一个单独的值没有包含操作符号也可以叫表达式,尽管它只计算它本 ...

  8. Kafka---系统学习

    1.Topics 1.1.Topic  就是  数据主题: 1.2.作用:数据记录  发布的地方,用来  区分 业务系统: 1.3.每个Topic  可以有多个 消费者 订阅它的数据: 1.4.每个T ...

  9. java: 列出本机java环境

    java: 列出本机java环境 System.getProperties().list(System.out);

  10. IDEA unable to find valid certification path to requested target

    一.报错 Could not transfer artifact org.apache.maven.plugins:maven-install-plugin:pom:2.4 from/to alima ...