前端規(guī)范 圖片引入

圖片引入

測試內(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 的不使用