在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 圖片優(yōu)化與合并
書單
JavaScript 動畫
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開發(fā)實踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設(shè)計
前端工程師概述
CSS
響應(yīng)式布局
表達(dá)式與運(yùn)算符
基本語法
JavaScript 介紹
版本控制
布局
調(diào)試器
背景
圖片保存
多媒體
文檔樹
列表操作
Sublime 編輯器
盒模型
常見布局樣例
類型識別
變形
數(shù)據(jù)存儲
選擇器
頁面架構(gòu)
開發(fā)及調(diào)試工具
頁面模塊化
節(jié)點(diǎn)操作
測量及取色
瀏覽器兼容
HTML 簡介
內(nèi)置對象
實體字符
產(chǎn)品前端架構(gòu)
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達(dá)式
動畫
語句
面向?qū)ο?/span>
HTML 語法
HTML 標(biāo)簽
技術(shù)選擇
樣式操作
圖片優(yōu)化與合并
語法
DOM 編程藝術(shù)
Canvas
接口設(shè)計
頁面優(yōu)化
文本

圖片優(yōu)化與合并

圖片優(yōu)化與合并

在 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 它能減少網(wǎng)絡(luò)請求次數(shù)提高速度。圖片壓縮工具分為無損(ImageOptim 等工具,也可結(jié)合 Grunt 自動化構(gòu)建工具一同使用)與有損壓縮工具(TinyPng)。

圖片合并

圖片合并建議方案:

  • 同個模塊的圖片合并
  • 大小相近的圖片合并
  • 色彩相近的圖片合并
  • 以上3種合并混合

合并的圖片可以以橫向或縱向的排列,分類可將同屬于一個模塊(功能模塊),大小相近(充分利用畫布空間),顏色相近(減少文件大小)。

圖片的兼容

IE6 不支持 PNG24 半透明所以需要保存兩份(sprite.png - png24 和 sprite-ie.png - 8)。在使用 CSS3 是讓高級瀏覽器使用 CSS3 低級瀏覽器則使用切圖。優(yōu)雅降級指的是讓低級瀏覽器不顯示高級瀏覽器中的界面細(xì)節(jié)。

上一篇:Atom 文本編輯器下一篇:屬性操作