圖片引入
測試內(nèi)容圖應(yīng)該寫上表明圖片尺寸的占位圖,可以用線上占位圖生成服務(wù),如:
http://placeholder.qiniudn.com/300x200
HTML 中圖片引入不需添加 width、height 屬性,alt 屬性應(yīng)該寫上
推薦:
<img src="" alt="" >
不推薦:
<img src="" width="" height="" >
CSS 中圖片引入不需要引號(hào)
.jdc {
background-image: url(icon.png);
}
CSS Sprites VS Data URIs
CSS Sprites特點(diǎn)
- 減少請(qǐng)求數(shù)
- 加速圖片的顯示
- 維護(hù)更新成本大
- 更多的內(nèi)存消耗,特別是大體積或有過多空白的 Sprites 圖
- 圖片滲漏,相鄰的不需展示的圖片有可能出現(xiàn)在展示元素中,特別是在高清設(shè)備移動(dòng)設(shè)備上
Data URIs(base64編碼)
- 減少請(qǐng)求數(shù)
- 轉(zhuǎn)換文件體積大,大約比原始的二進(jìn)制大 33%
- IE6 / IE7 不支持
- 圖片顯示相對(duì)較慢,需要更多的 CPU 消耗
更多關(guān)于 CSS Sprites 和 Data URIs 可以閱讀:
《When to Base64 Encode Images (and When Not To)》
《Data URI 最佳實(shí)踐》
《Data URI&MHTML: 用還是不用?》
CSS Sprites vs. Data URIs: Which is Faster on Mobile?
團(tuán)隊(duì)約定
CSS Sprites 使用建議
- 適合使用頻率高更新頻率低的小圖標(biāo)
- 盡量不留太多的空白
- 體積較大的圖片不合并
- 確保要合并的小圖坐標(biāo)數(shù)值和合并后的 Sprites 圖尺寸均為偶數(shù)
Data URIs(base64編碼)使用建議
- 適合更新頻率高的小圖片,如某些具備自定義功能的標(biāo)題 icon 等
- 轉(zhuǎn)換成 Base64 編碼的圖片應(yīng)小于 2KB
- 移動(dòng)端不使用 Base64 編碼
- 要兼容 IE6/IE7 的不使用
更多建議: