建議
[建議] 避免為 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ū)別
alt
alt屬性是考慮到不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶,以及視覺障礙的用戶和使用屏幕閱讀器的用戶。當(dāng)圖片不顯示的時候,圖片的替換文字。
alt屬性值得長度必須少于100個英文字符
alt屬性是img標(biāo)簽的必須屬性,如果沒有特別意義的圖片,可以寫alt=""
alt屬性是搜索引擎判斷圖片與文字是否相關(guān)的重要依據(jù),alt屬性添加到img主要的目的是為了SEO
title
title屬性并不是必須的。
title屬性規(guī)定元素的額外信息,有視覺效果,當(dāng)鼠標(biāo)放到文字或是圖片上時有文字顯示。
title屬性更多傾向于用戶體驗的考慮。