img 的正確使用方式

建議

[建議] 避免為 img 添加不必要的 title 屬性。為重要圖片添加 alt 屬性。

多余的 title 影響看圖體驗,并且增加了頁面尺寸??梢蕴岣邎D片加載失敗時的用戶體驗。

[建議] 添加 width 和 height 屬性,以避免頁面抖動。

[建議] 有下載需求的圖片采用 img 標(biāo)簽實現(xiàn),無下載需求的圖片采用 CSS 背景圖實現(xiàn)。

產(chǎn)品 logo、用戶頭像、用戶產(chǎn)生的圖片等有潛在下載需求的圖片,以 img 形式實現(xiàn),能方便用戶下載。

無下載需求的圖片,比如:icon、背景、代碼使用的圖片等,盡可能采用 CSS 背景圖實現(xiàn)。

img與alt區(qū)別

圖片標(biāo)簽的alt與title區(qū)別

alt

  1. alt屬性是考慮到不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶,以及視覺障礙的用戶和使用屏幕閱讀器的用戶。當(dāng)圖片不顯示的時候,圖片的替換文字。

  2. alt屬性值得長度必須少于100個英文字符

  3. alt屬性是img標(biāo)簽的必須屬性,如果沒有特別意義的圖片,可以寫alt=""

  4. alt屬性是搜索引擎判斷圖片與文字是否相關(guān)的重要依據(jù),alt屬性添加到img主要的目的是為了SEO

title

  1. title屬性并不是必須的。

  2. title屬性規(guī)定元素的額外信息,有視覺效果,當(dāng)鼠標(biāo)放到文字或是圖片上時有文字顯示。

  3. title屬性更多傾向于用戶體驗的考慮。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Ubuntu的發(fā)音 Ubuntu,源于非洲祖魯人和科薩人的語言,發(fā)作 oo-boon-too 的音。了解發(fā)音是有意...
    螢火蟲de夢閱讀 100,603評論 9 468
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,866評論 32 459
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,533評論 19 139
  • 俗話說“家有一老,如有一寶?!蔽业哪棠桃呀?jīng)八十四歲了,身體依然硬朗,我想這便是我家的福吧。 大概是...
    蕙質(zhì)蘭心_25d4閱讀 484評論 3 4
  • 男人的一生,絕大多數(shù)時間應(yīng)該是和酒度過的。真正的男人,不可以沒有女人,更不可以沒有酒。 酒,對于男人,就像想象之于...
    撲撲大咋咋嘞閱讀 1,587評論 0 1

友情鏈接更多精彩內(nèi)容