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

2020-09-09 14:11 更新

圖片引入

測試內(nèi)容圖應(yīng)該寫上表明圖片尺寸的占位圖,可以用線上占位圖生成服務(wù),如:

http://placeholder.qiniudn.com/300x200

HTML 中圖片引入不需添加 width、height 屬性,alt 屬性應(yīng)該寫上

推薦:

<img src="" alt="" >

不推薦:

<img src="" width="" height="" >

CSS 中圖片引入不需要引號

.jdc {
  background-image: url(icon.png);
}

CSS Sprites VS Data URIs

CSS Sprites特點(diǎn)

  • 減少請求數(shù)
  • 加速圖片的顯示
  • 維護(hù)更新成本大
  • 更多的內(nèi)存消耗,特別是大體積或有過多空白的 Sprites 圖
  • 圖片滲漏,相鄰的不需展示的圖片有可能出現(xiàn)在展示元素中,特別是在高清設(shè)備移動設(shè)備上

Data URIs(base64編碼)

  • 減少請求數(shù)
  • 轉(zhuǎn)換文件體積大,大約比原始的二進(jìn)制大 33%
  • IE6 / IE7 不支持
  • 圖片顯示相對較慢,需要更多的 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
  • 移動端不使用 Base64 編碼
  • 要兼容 IE6/IE7 的不使用


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號