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

圖片引入

測試內容圖應該寫上表明圖片尺寸的占位圖，可以用線上占位圖生成服務，如：

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 的不使用