主流CSS image比较

在还原设计图的时候,难免会碰到一些样式图片的引用。如何来对这些图片做优化呢?本文简单的梳理了一下目前几种比较常用的使用方式。
注:
1. 有更好的方法的话,欢迎补充。
2. 下文未对性能问题做真实的测试,请保持一颗好奇的心,并告诉我们

CSS Sprite

这是目前使用比较多的方式。也是我个人认为相对最优的一种解决方式。当然,这里的最优指的是特定环境。比如移动客户端,就不一定要这么干。CSS Sprite 是将页面中所使用到的小图片整合到一张大图上去。大家都知道,客户端向服务器发送请求是很有代价的,特别是在移动端,所以,sprite 的提出是为了减少 http 请求数,从而加快页面加载速度。

使用方式

  • 先将小图片整合到一张大图上
  • css 引入背景图片
  • 然后依据图标的位置使用 background-position 进行定位

使用技巧

  • 切图的时候就构思拼接好图片(不然后期抓心挠肺的,当然,善用工具的出门右转)
  • 排序有序,便于后期维护(个人建议图标从上到下排列)。有利于 background-position 定位
  • 定位时避免使用 right, bottom 等(后期图片尺寸变化后就不一定了好不)
  • 合理预留空白位置(空太多文件变大,太小引起图标重叠)

优点

  • 减少 http 请求。(这个是最大的优点)
  • 对你存在的图片一目了然(不知道这个算不算,如改进版3.0拿到的图哪些图标是之前已存在不需要重新切了的)

缺点

  • 图片合并定位费时费力(谁用谁知道啊)

其它

image data URI

即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。
如:

使用方式

/** 数据格式 **/
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/** 样式引用 **/
.icon{
    width: 30px; height: 30px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
}

标签语法:

  • data : 取得数据协议
  • image/png : 取得数据的协议名称(注意这里也图片资源也可以使用字体等)
  • base64 : 数据编码方式
  • iVBOR… : 编码后数据

Base64编码 自行百度科普吧。

优点

  • 减少 HTTP 请求
  • 避免某些文件跨域
  • 无图片缓存等问题(但是一般 css 也是有缓存的好不好)

缺点

  • 兼容性 ( IE6,7 不兼容, 可以使用 MHTML 来解决 )
  • 浏览器不会缓存该图片(这里是否是这样我存有疑惑,因为好像看上去也是第一次加载的时候慢)
  • 增加 css 文件大小
  • 编码成本及维护(展示不直观,目前需手动转换,我暂时不知道自动替换之类的插件)
  • 之前有看到过篇测评说性能上比 sprite 微弱一些,一时间找不到链接

综合起来,data URI可以使用在
* 图片尺寸很小,使用一条 http 请求有点浪费,如渐变背景框
* 图片在全站大规模使用,且很少被更新的,如 loading 图

在线转换工具

更新

参考资料

icon fonts

由于移动端设备拥有不同分辨率,PPI 等引起的问题, 常常需要针对不同屏幕分辨率来调整优化,如使用 @2x 图片, max-width 限制等。
采用 css @font-face 用来显示 icon 也不失为一种好办法。
因为 icon fonts (字体)是矢量图形,所以不受分辨率的影响,同时可以做到完美缩放;当然,也可使用在 WEB 端。

优点

  • 文件小
  • 加载性能好
  • 支持 css 样式
  • IE6/7 下也支持

缺点

使用方法

  1. 制作字体文件
    • 可以利用字体工具手动制作
    • 也可以利用在线工具自动生成
  2. 在 css 中引用,如下

引入字体文件

    @font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
    }

再定义一个 icon-* 通配我们所有图标的共有 CSS 样式,

    [class^="icon-"], [class*=" icon-"] {
      display: inline-block;
      speak: none
      font-family: "iconfont";
      font-size: 16px;
      line-height: 1;
      font-style: normal;
      /** 字体图标出现锯齿的问题: */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

最后是利用 :before 来注入每个 icon 对应的字体编码

    .icon-bell:before {
      content: "\003432";
    }
    .icon-search:before {
      content: "\003433";
    }

资源推荐

参考资料

其它一些想法

  • SVG绘图
  • HTML5 离线文件
  • localStorage 存储
    原文作者:见见
    原文地址: https://segmentfault.com/a/1190000000658499
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞