codecamp

前端规范 图片引入

图片引入

测试内容图应该写上表明图片尺寸的占位图,可以用线上占位图生成服务,如:

http://placeholder.qiniudn.com/300x200

HTML 中图片引入不需添加 width、height 属性,alt 属性应该写上

推荐:

<img src="" alt="" >

不推荐:

<img src="" width="" height="" >

CSS 中图片引入不需要引号

.jdc {
  background-image: url(icon.png);
}

CSS Sprites VS Data URIs

CSS Sprites特点

  • 减少请求数
  • 加速图片的显示
  • 维护更新成本大
  • 更多的内存消耗,特别是大体积或有过多空白的 Sprites 图
  • 图片渗漏,相邻的不需展示的图片有可能出现在展示元素中,特别是在高清设备移动设备上

Data URIs(base64编码)

  • 减少请求数
  • 转换文件体积大,大约比原始的二进制大 33%
  • IE6 / IE7 不支持
  • 图片显示相对较慢,需要更多的 CPU 消耗

更多关于 CSS Sprites 和 Data URIs 可以阅读:

《When to Base64 Encode Images (and When Not To)》

《Data URI 最佳实践》

《Data URI&MHTML: 用还是不用?》

CSS Sprites vs. Data URIs: Which is Faster on Mobile?

团队约定

CSS Sprites 使用建议

  • 适合使用频率高更新频率低的小图标
  • 尽量不留太多的空白
  • 体积较大的图片不合并
  • 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数

Data URIs(base64编码)使用建议

  • 适合更新频率高的小图片,如某些具备自定义功能的标题 icon 等
  • 转换成 Base64 编码的图片应小于 2KB
  • 移动端不使用 Base64 编码
  • 要兼容 IE6/IE7 的不使用


前端规范 图片质量
前端目录命名规范
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }