alt是HTML中唯一被规范强制要求且具备真正降级能力的图片属性，因它在图像加载失败时渲染为占位内容、供屏幕阅读器朗读、被搜索引擎解析语义；其他属性如title、loading等均不承担此核心职责。

alt 是 HTML 中唯一被规范强制要求、且具备明确降级能力的图片属性。其他如 title 或 loading 都不构成真正意义上的“降级”——它们不参与可访问性回退，也不在图像加载失败时替代呈现。

为什么只有 alt 算降级属性？

浏览器加载 <img> 失败（路径错、404、跨域拦截、禁用图片）时，会把 alt 文本直接渲染为占位内容；屏幕阅读器在读图时也会朗读 alt；搜索引擎用它理解图片语义。而 title 仅作为悬停提示，loading="lazy" 只控制加载时机，decoding="async" 影响解码线程——三者都不接管“不可见时该显示什么”这个核心降级职责。

• alt 必须是简短、准确的描述，不是装饰性文字（装饰图应设 alt=""）
• 空 alt="" 表示该图无语义信息，屏幕阅读器会跳过，这是 WCAG 合规写法
• 不要用 alt="图片" 或 alt="logo" 这类无效值；要写 alt="公司蓝色鲸鱼 Logo"

<img> 标签常用属性组合与避坑点

实际开发中，单靠 alt 不够，需配合其他属性保障基础可用性：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• src：必须存在，且路径有效；相对路径以当前 HTML 文件为基准，不是以 CSS 或 JS 文件为准
• width/height：建议显式声明，防止布局偏移（CLS 指标恶化），值可以是数字（像素）或百分比
• loading="lazy"：对非首屏图启用懒加载，但不要滥用在关键首屏图上（会导致 LCP 延迟）
• referrerpolicy="no-referrer"：跨域请求图片时避免泄露来源 URL，尤其用于第三方 CDN 图片
• 避免使用已废弃的 border、align、hspace/vspace 属性，全部交由 CSS 控制

更可靠的降级方案：不只是 alt

当图片承载关键信息（如图表、验证码、教学示意图），单靠 alt 描述仍不够，需结构化补充：

立即学习“前端免费学习笔记（深入）”；

• 用 <figure><figcaption> 包裹图片 + 详细说明，figcaption 会在视觉和语义上成为图片的正式标题/注释
• 对复杂图表，额外提供 <details><summary> 折叠文本描述，或链接到纯文本版数据
• 服务端可结合 Accept: image/webp 请求头做格式协商，但客户端降级仍依赖 srcset + sizes + picture 元素

真正容易被忽略的是：很多团队把 alt 当作 SEO 关键词堆砌字段，或交给运营填“点击查看详情”这类操作性文字——这会让视障用户完全无法理解图片本身内容。降级不是“有就行”，而是“像原图一样传递同等信息”。