开发者社区> 好程序员> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

好程序员web前端分享主流CSS image比较

简介:   好程序员web前端分享主流CSS image比较在还原设计图的时候,难免会碰到一些样式图片的引用。如何来对这些图片做优化呢?本文简单的梳理了一下目前几种比较常用的使用方式。  注:  1. 有更好的方法的话,欢迎补充。
+关注继续查看

  好程序员web前端分享主流CSS image比较在还原设计图的时候,难免会碰到一些样式图片的引用。如何来对这些图片做优化呢?本文简单的梳理了一下目前几种比较常用的使用方式。
  注:
  1. 有更好的方法的话,欢迎补充。
  2. 下文未对性能问题做真实的测试,请保持一颗好奇的心,并告诉我们
  CSS Sprite
  这是目前使用比较多的方式。也是我个人认为相对最优的一种解决方式。当然,这里的最优指的是特定环境。比如移动客户端,就不一定要这么干。CSS Sprite 是将页面中所使用到的小图片整合到一张大图上去。大家都知道,客户端向服务器发送请求是很有代价的,特别是在移动端,所以,sprite 的提出是为了减少 http 请求数,从而加快页面加载速度。

  使用方式 先将小图片整合到一张大图上 css 引入背景图片 然后依据图标的位置使用 background-position 进行定位 使用技巧 切图的时候就构思拼接好图片(不然后期抓心挠肺的,当然,善用工具的出门右转) 排序有序,便于后期维护(个人建议图标从上到下排列)。有利于 background-position 定位 定位时避免使用 right, bottom 等(后期图片尺寸变化后就不一定了好不) 合理预留空白位置(空太多文件变大,太小引起图标重叠) 优点 减少 http 请求。(这个是最大的优点) 对你存在的图片一目了然(不知道这个算不算,如改进版3.0拿到的图哪些图标是之前已存在不需要重新切了的) 缺点 图片合并定位费时费力(谁用谁知道啊) 其它 github 上有个 grunt 合并 sprite 的组件,可以看看 image data URI
  即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。
  如:
  使用方式/ 数据格式 /
1.data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC
  / 样式引用 /
1.

  .icon{


2.

  width: 30px; height: 30px;


3.

  background-image: 
4.url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);


5.

  }


标签语法: data : 取得数据协议 image/png : 取得数据的协议名称(注意这里也图片资源也可以使用字体等) base64 : 数据编码方式 iVBOR... : 编码后数据
  Base64编码 自行百度科普吧。
  优点 减少 HTTP 请求 避免某些文件跨域 无图片缓存等问题(但是一般 css 也是有缓存的好不好) 缺点 兼容性 ( IE6,7 不兼容, 可以使用 MHTML 来解决 ) 浏览器不会缓存该图片(这里是否是这样我存有疑惑,因为好像看上去也是第一次加载的时候慢) 增加 css 文件大小 编码成本及维护(展示不直观,目前需手动转换,我暂时不知道自动替换之类的插件) 之前有看到过篇测评说性能上比 sprite 微弱一些,一时间找不到链接
  综合起来,data URI可以使用在
  * 图片尺寸很小,使用一条 http 请求有点浪费,如渐变背景框
  * 图片在全站大规模使用,且很少被更新的,如 loading 图
  在线转换工具 Encode Data URL image to data URI 更新 github 资源 sus 可转换 data URI 参考资料 MDN - data URIs icon fonts
  由于移动端设备拥有不同分辨率,PPI 等引起的问题, 常常需要针对不同屏幕分辨率来调整优化,如使用 @2x 图片, max-width 限制等。
  采用 css @font-face 用来显示 icon 也不失为一种好办法。
  因为 icon fonts (字体)是矢量图形,所以不受分辨率的影响,同时可以做到完美缩放;当然,也可使用在 WEB 端。
  优点 文件小 加载性能好 支持 css 样式 IE6/7 下也支持 缺点 样式限制,使用扁平化风格 移动端还存在不兼容问题 (兼容表,作者不详) 少量移动设备和 icon fonts 字符编码冲突 FF和 IE9 下跨域问题 性能问题 使用方法 制作字体文件
  可以利用字体工具手动制作 也可以利用在线工具自动生成 在 css 中引用,如下
  引入字体文件
  @font-face {font-family: 'iconfont';
1.

  src: url('iconfont.eot'); / IE9/


2.

  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 
3.*/


4.

  url('iconfont.woff') format('woff'), / chrome、firefox /


5.

  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, 
6.Android, iOS 4.2+*/


7.

  url('iconfont.svg#uxiconfont') format('svg'); / iOS 4.1- /


8.

  }

  再定义一个 icon-* 通配我们所有图标的共有 CSS 样式,
  [class^="icon-"], [class*=" icon-"] {
1.

  display: inline-block;


2.

  speak: none


3.

  font-family: "iconfont";


4.

  font-size: 16px;


5.

  line-height: 1;


6.

  font-style: normal;


7.

  /* 字体图标出现锯齿的问题: /


8.

  -webkit-font-smoothing: antialiased;


9.

  -moz-osx-font-smoothing: grayscale;


10.

  }

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

  content: "003432";


2.

  }


3.

  .icon-search:before {


4.

  content: "003433";


5.

  }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
软件测试|web前端的HTML浅析
软件测试|web前端的HTML浅析
0 0
web前端面试技巧-如何自我介绍?如何应对hr?
如何做好一个自我介绍? 问题来,如何做好自我面试?说清楚四点: ①个人信息:包括你的姓名、年龄、专业、毕业学校 ②职业经验:说清楚自己往期的工作经验,待过哪些公司,具体做过
0 0
终于让Web前端和Tomcat(Java服务器)和MySQL(数据库)连在一起了
终于让Web前端和Tomcat(Java服务器)和MySQL(数据库)连在一起了
0 0
给页面写一个炫酷的时钟特效【web前端】
给页面写一个炫酷的时钟特效【web前端】
0 0
精美的web前端源码的特效
这是一款基于JS和Canvas的自定义烟花特效,初始化界面的时候特效是不带声效的绽放,当你点击顶部中间的播放,即可以看到美丽的烟火也可以听到烟花绽放的声音,让你脑海浮现过年团圆放烟火的画面。当然除了声音的控制还有 爆炸类型、爆炸大小、画面质量、天空亮度、烟花大小、全屏控制等控件 你只需点击右上角的设置按钮就可以展开进行自定义设置
0 0
Web前端作业-教育信息化"十三五"规划报告
Web前端作业-教育信息化"十三五"规划报告
0 0
zabbix_4.0部署篇之使用nginx实现web前端
zabbix_4.0部署篇之使用nginx实现web前端
0 0
Web站,前端接入钉钉扫码登录!
Web站,前端接入钉钉扫码登录!
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于Web前端的可用性优化
立即下载
基于Web前端的可用性探索
立即下载
富途web前端组件化实践
立即下载