alt属性是图片被识别的底线，必须显式写alt=""而非省略；装饰图用alt=""，内容图需用一句话说明“图里有什么”和“为什么放这张图”，避免堆砌关键词、空格或无效描述。
alt 属性不是“加分项”，而是图片在网页中被识别的底线——没写、写空格、写成 alt="图片"，等于这张图对屏幕阅读器和搜索引擎完全隐形。
alt 值为空字符串（alt=""）还是直接省略属性？
必须显式写 alt=""，不能删掉属性。省略 alt 会让浏览器和读屏器认为开发者忘了填，触发警告或默认朗读文件名；而 alt="" 是明确声明“此图无语义信息”。
- 装饰性图片（如分隔线、背景花纹、纯图标占位）一律用
alt="" -
alt=" "（含空格）或alt="\t"（含制表符）等同于未设置，爬虫直接跳过 - CMS 或模板中自动生成的图片，后端 fallback 必须是
""，而非"image"或"未填写"
内容图的 alt 描述怎么写才不被判定为关键词堆砌？
搜索引擎和读屏器只认一句话里的主谓宾结构，不是关键词列表。重点是让“图里有什么”和“为什么放这张图”同时成立。
- 用具体名词 + 场景动词：比如
alt="iPhone 14 Pro 暗紫色款正面特写，屏幕显示天气应用"，而非alt="iPhone 手机 苹果 14 pro 天气 app" - 含文字的截图必须完整写出可见文字，例如仪表盘图里有“Q1 活跃用户增长23%”，就得写进
alt - 链接中的图片，
alt要说明动作目的，如alt="下载PDF版白皮书"，而不是alt="白皮书封面图" - 避免“图片”“插图”“示意图”等冗余词——
<img>标签本身已表明这是图像
<picture></picture> 和 srcset 中 alt 怎么处理？
alt 只属于最外层的 <img> 标签，跟 <source></source> 或 srcset 无关。换再多种尺寸，描述也不能变。
- 桌面全景图和手机版裁切人脸，仍统一描述核心对象：
alt="团队合影，五人穿工装站在公司门口" - 漏掉
<img>的alt，哪怕<source></source>写满条件也无效 - SVG 内联图不支持
alt，必须用<title></title>标签 +aria-hidden="false"才能被读取
background-image 的图片能加 alt 吗？
不能。CSS 的 background-image 对爬虫和读屏器完全不可见，alt 属性根本无法绑定到它上面。
- 优先改用
<img>标签实现视觉效果 - 实在要用 CSS 背景，退而求其次：用语义化容器（如
<div>）包裹，加 <code>role="img"+aria-label，但这是次优解，且需测试读屏兼容性 - 文件名仍是第一线索：用
red-wireless-headphones.jpg比IMG_8923.jpg更容易被爬虫初步判断主题
最容易被忽略的是动态渲染场景：React/Vue 中 v-bind:alt="item.alt" 如果 item.alt 是 undefined，结果就是 alt="undefined" —— 这比不写还糟。必须写成 v-bind:alt="item.alt || ''"。
