其余属性与 CSS 侧的 image-set()

<img> 的属性表里，前几页讲过的只占一半。其余属性不影响「选哪张、何时下载、占多大」，但每一个都对应一个具体的失败场景：图片缺失、跨域读取像素、引用来源泄露、区域点击。

1 · alt

alt 是图片不可用时的替代文本，服务于屏幕阅读器、加载失败、禁用图片的用户与搜索引擎。它有三种状态，含义截然不同：

• 写文字：图片承载内容，文字替代这份内容。写的是图片「传达了什么」，不是「这是一张图片」；阅读器已经会报出「图片」
• alt=""：图片是装饰，辅助技术应当跳过它。分隔花纹、与相邻文字重复的图标都属此类
• 不写 alt：作者没有提供信息。阅读器可能退而读出文件名，IMG_2041.jpg 这样的文件名对用户毫无意义

加载失败时的渲染也由这三种状态决定。实测 Chrome 154 在行内显示下：不写 alt 的破图显示一个 16 × 16 的破图图标；alt="" 的破图宽高为 0，不留任何痕迹；写了文字的破图以文字代替图片，按文字排成 96 × 24 的行内框，即使写了 width="200" height="100" 也不再按尺寸占位。alt="" 配尺寸属性时，破图按 200 × 100 保留一块空白（核对于 2026-09）。

<picture> 的 alt 写在末尾的 <img> 上，对所有 <source> 分支共用。art direction 的不同裁切若传达的内容不同（宽幅合影与特写人像），alt 应当描述所有分支共有的那部分。

2 · crossorigin 与 referrerpolicy

图片默认以 no-cors 模式请求，任何来源的图片都可以显示，但跨域图片画进 <canvas> 后，画布被标记为 tainted，getImageData() 与 toDataURL() 抛出 SecurityError。crossorigin 把请求切换为 CORS 模式：anonymous 不带 cookie，use-credentials 带上。服务器返回合适的 Access-Control-Allow-Origin 时，图片可以无限制地读取像素。

CORS 模式有一个代价：服务器不返回 CORS 头时，图片不是「显示但不能读」，而是整张加载失败。另外，同一个 URL 以两种模式请求时，规范的 list of available images 按 URL 与 CORS 模式共同索引，页面上一处写了 crossorigin、另一处没写，同一张图可能下载两次。需要读像素的图片，全站统一写法比逐处判断稳妥。

referrerpolicy 决定请求头 Referer 带出多少信息，取值与 Referrer Policy 规范相同，缺省跟随文档的策略（现代浏览器默认 strict-origin-when-cross-origin：跨域只带源，不带路径）。图片 CDN 按 Referer 做防盗链时，写成 no-referrer 的图会被拒绝；反过来，URL 路径里含敏感信息的页面（带 token 的分享链接）可以用它避免泄露给第三方图床。

3 · 可点击区域

usemap 把图片关联到一个 <map>，<map> 里的 <area> 用 shape 与 coords 定义可点击区域：

<img src="floor.png" usemap="#floor" alt="三楼平面图" width="600" height="400">
<map name="floor">
  <area shape="rect" coords="20,20,180,140" href="/rooms/301" alt="301 会议室">
  <area shape="circle" coords="420,200,60" href="/rooms/305" alt="305 休息区">
</map>

usemap 的值是带 # 的名称引用，匹配 <map> 的 name 时区分大小写（Chrome 58、Firefox 51 起统一）。coords 以图片的 CSS 像素为单位而非位图像素，所以响应式缩放后的图片区域不会跟着缩放，这是它今天很少被使用的主要原因；需要可点击区域的响应式图片通常改用内联 SVG 或绝对定位的链接（核对于 2026-09）。

ismap 是服务器端图像映射：图片位于 <a> 内时，点击坐标以 ?x,y 追加到链接 URL 上，由服务器判断点中了哪里。它来自 1990 年代，没有键盘可达性，今天只在考古时出现。

4 · 已废弃的属性

下列属性在规范中已废弃，浏览器仍然支持以免旧页面失效，新代码应改用对应的 CSS（BCD 均标为 deprecated，核对于 2026-09）：

attributionsrc 是另一种情况：它属于 Chrome 125 起实现的 Attribution Reporting API，只有 Chromium 支持，BCD 已将其标为 deprecated（核对于 2026-09）。它与图片显示无关，不在本系列讨论范围。

5 · CSS 里的 image-set()

背景图不走 <img> 的选择算法，对应的机制是 CSS 的 image-set()：

.hero {
  background-image: url(hero.jpg);                    /* 旧浏览器回退 */
  background-image: image-set(
    "hero.avif" type("image/avif") 1x,
    "hero-2x.avif" type("image/avif") 2x,
    "hero.jpg" 1x,
    "hero-2x.jpg" 2x
  );
}

它只有分辨率描述符（1x、2x，也可写成 dppx、dpi）和 type() 函数，没有 w 描述符，也就不需要 sizes：CSS 能从盒子的尺寸与 background-size 知道这张图要画多大，但浏览器并没有据此按宽度选图的机制，作者只能按密度备图。type() 让它具备与 <source type> 相同的格式协商能力。

image-set() 在 2012 年随 WebKit 以 -webkit- 前缀出现，当时只支持 url() 与 x，比 <img srcset> 还早。无前缀并支持 type() 的版本到 Chrome 113（2023-05）、Firefox 89（2021-06）、Safari 17（2023-09）才齐（兼容性据 MDN BCD，核对于 2026-09）。首屏的背景主图还有一个 <img> 没有的问题：它藏在样式表里，preload scanner 看不见，需要 优先级与解码 §2 的 preload。能用 <img> 加 object-fit 表达的主图，优先用 <img>。