img 的正确使用方式

建议

[建议] 避免为 img 添加不必要的 title 属性。为重要图片添加 alt 属性。

多余的 title 影响看图体验,并且增加了页面尺寸。可以提高图片加载失败时的用户体验。

[建议] 添加 width 和 height 属性,以避免页面抖动。

[建议] 有下载需求的图片采用 img 标签实现,无下载需求的图片采用 CSS 背景图实现。

产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片,以 img 形式实现,能方便用户下载。

无下载需求的图片,比如:icon、背景、代码使用的图片等,尽可能采用 CSS 背景图实现。

img与alt区别

图片标签的alt与title区别

alt

  1. alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候,图片的替换文字。

  2. alt属性值得长度必须少于100个英文字符

  3. alt属性是img标签的必须属性,如果没有特别意义的图片,可以写alt=""

  4. alt属性是搜索引擎判断图片与文字是否相关的重要依据,alt属性添加到img主要的目的是为了SEO

title

  1. title属性并不是必须的。

  2. title属性规定元素的额外信息,有视觉效果,当鼠标放到文字或是图片上时有文字显示。

  3. title属性更多倾向于用户体验的考虑。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音。了解发音是有意...
    萤火虫de梦阅读 100,172评论 9 468
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,751评论 32 459
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,178评论 19 139
  • 俗话说“家有一老,如有一宝。”我的奶奶已经八十四岁了,身体依然硬朗,我想这便是我家的福吧。 大概是...
    蕙质兰心_25d4阅读 3,157评论 3 4
  • 男人的一生,绝大多数时间应该是和酒度过的。真正的男人,不可以没有女人,更不可以没有酒。 酒,对于男人,就像想象之于...
    扑扑大咋咋嘞阅读 5,410评论 0 1

友情链接更多精彩内容