codecamp

图片优化与合并

Table of Contents generated with DocToc

图片优化与合并

在 HTML 中使用背景图片的方法如下:

<button type="button" class="btn-default">Click Me</button>

<style type="text/css" media="screen">
  .btn-default {
  background: url(image/btn.png) no-repeat 0 0;
}
.btn-default-alt {
background: url(image/sprite.png) no-repeat 0 -50px;
}
</style>

图片的合并就如同上面提到的切图后保存的过程。拼好的图称之为 Sprite 它能减少网络请求次数提高速度。图片压缩工具分为无损(ImageOptim 等工具,也可结合 Grunt 自动化构建工具一同使用)与有损压缩工具(TinyPng)。

图片合并

图片合并建议方案:

  • 同个模块的图片合并
  • 大小相近的图片合并
  • 色彩相近的图片合并
  • 以上3种合并混合

合并的图片可以以横向或纵向的排列,分类可将同属于一个模块(功能模块),大小相近(充分利用画布空间),颜色相近(减少文件大小)。

图片的兼容

IE6 不支持 PNG24 半透明所以需要保存两份(sprite.png - png24 和 sprite-ie.png - 8)。在使用 CSS3 是让高级浏览器使用 CSS3 低级浏览器则使用切图。优雅降级指的是让低级浏览器不显示高级浏览器中的界面细节。


图片保存
Sublime 编辑器
温馨提示
下载编程狮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; }