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. MIT-线性代数公开课

    本博客是学习MIT-线性代数笔记,Gilbert Strang大神讲的通俗易懂,感兴趣的可以观看视频 其中习题集请点击 01)方程组的几何解释 02)矩阵消元 03)乘法和逆矩阵 04)A的LU分解 ...

  2. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  3. PAT Advanced 1002 A+B for Polynomials (25 分)（隐藏条件，多项式的系数不能为0）

    This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: Each ...

  4. hdu 1059 Dividing bitset 多重背包

    bitset做法 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a ...

  5. 八、ARM 汇编程序格式和程序控制

    8.1 汇编程序格式 源程序中的语句可以分为两种类型:指令性语句.指示性语句 指示性语句就是一些伪操作,在 MDK 编译环境下的伪操作有下面几种: 符号定义伪操作 数据定义伪操作 汇编控制伪操作 其他 ...

  6. thinkphp5 yii2 laravel5.1 框架性能压测对比图

    nginx+php7环境,opcache已经开启,每测试一个框架都重启服务器并且预热访问三次,压测工具ab.exe. laravel,thinkphp,yii都已关闭debug,该做的优化命令都搞了, ...

  7. SpringBoot使用Easypoi导出excel示例

    SpringBoot使用Easypoi导出excel示例 https://blog.csdn.net/justry_deng/article/details/84842111

  8. django开发环境搭建（参考流程)

    django开发环境搭建(参考流程) 2013-08-08 01:09:06 分类: LINUX 原文地址:django开发环境搭建(参考流程) 作者:bailiangcn 对于一个初学者,在实际的开 ...

  9. jenkins 邮箱通知设置

    https://blog.csdn.net/boonya/article/details/77335074 https://blog.csdn.net/lovedingd/article/detail ...

  10. mysql WHERE语句 语法

    mysql WHERE语句 语法 作用:如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句.珠海大理石平尺 语法:SELECT 列名称 FROM 表名称 WHERE 列 运算 ...