HTML
活的标准 - 最后更新于 2024 年 9 月 12 日
活的标准 - 最后更新于 2024 年 9 月 12 日
source、img 和 link 元素的公共属性本节是非规范性的。
要在 HTML 中嵌入图像，当只有一个图像资源时，请使用 img 元素及其 src 属性。
< h2 > From today's featured article</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...但是，在许多情况下，作者可能希望使用多个图像资源，以便用户代理从中进行选择。
不同的用户可能具有不同的环境特征。
用户的物理屏幕大小可能彼此不同。
手机屏幕的对角线可能为 4 英寸，而笔记本电脑屏幕的对角线可能为 14 英寸。
这仅在图像的渲染大小取决于 视窗 大小的情况下才相关。
用户的屏幕像素密度可能彼此不同。
手机屏幕的每英寸物理像素数量可能是另一台手机屏幕的三倍，无论它们的物理屏幕大小如何。
用户的缩放级别可能彼此不同，或者对于单个用户而言，缩放级别可能会随着时间的推移而发生变化。
用户可能会放大特定图像以获得更详细的视图。
缩放级别和屏幕像素密度（前一点）都会影响每个 CSS 像素 的物理屏幕像素数量。这个比率通常被称为 设备像素比率。
用户的屏幕方向可能彼此不同，或者对于单个用户而言，屏幕方向可能会随着时间的推移而发生变化。
平板电脑可以竖直放置或旋转 90 度，使屏幕处于“纵向”或“横向”状态。
用户的网络速度、网络延迟和带宽成本可能彼此不同，或者对于单个用户而言，这些指标可能会随着时间的推移而发生变化。
用户在工作时可能使用快速、低延迟和固定成本的连接，在家时可能使用缓慢、低延迟和固定成本的连接，而在其他地方可能使用速度可变、高延迟和成本可变的连接。
作者可能希望显示相同的图像内容，但根据 视窗 的宽度（通常如此）呈现不同的渲染大小。这通常被称为 基于视窗的选择。
网页顶部可能有一个横幅，它始终跨越整个 视窗 宽度（使用适当的 CSS）。在这种情况下，图像的渲染大小取决于屏幕的物理大小（假设浏览器窗口已最大化）。
另一个网页可能在列中显示图像，对于物理尺寸小的屏幕使用一列，对于物理尺寸中等的屏幕使用两列，对于物理尺寸大的屏幕使用三列，并且图像在每种情况下以不同的渲染大小变化以填满 视窗。在这种情况下，图像的渲染大小在单列布局中可能比双列布局中 _更大_，尽管屏幕更小。
作者可能希望根据图像的渲染大小显示不同的图像内容。这通常被称为 艺术指导。
当网页在物理尺寸较大的屏幕上查看时（假设浏览器窗口已最大化），作者可能希望在图像的关键部分周围包含一些不太相关的部分。当相同的网页在物理尺寸较小的屏幕上查看时，作者可能希望只显示图像的关键部分。
作者可能希望根据用户代理支持的图像格式显示相同的图像内容，但使用不同的图像格式。这通常被称为 基于图像格式的选择。
网页可能包含一些 JPEG、WebP 和 JPEG XR 图像格式的图像，后两种格式的压缩能力比 JPEG 更好。由于不同的用户代理可以支持不同的图像格式，并且某些格式可以提供更好的压缩比率，因此作者希望为支持这些格式的用户代理提供更好的格式，同时为不支持这些格式的用户代理提供 JPEG 备用方案。
以上情况并非相互排斥。例如，将用于不同 设备像素比率 的不同资源与用于 艺术指导 的不同资源相结合是合理的。
虽然可以使用脚本解决这些问题，但这样做会带来一些其他问题。
一些用户代理会积极下载 HTML 标记中指定的图像，在脚本有机会运行之前，以便网页更快地完成加载。如果脚本更改了要下载的图像，用户代理可能会启动两个单独的下载，这反而会导致页面加载性能变差。
如果作者避免在 HTML 标记中指定任何图像，而是从脚本实例化单个下载，这将避免上述双重下载问题，但对于禁用脚本的用户，根本不会下载任何图像，并且积极的图像下载优化也将被禁用。
考虑到这一点，本规范引入了一些功能，以以声明式的方式解决上述问题。
可以使用 src 和 srcset 属性，使用 x 描述符，在 img 元素上提供仅大小不同的多个图像（较小的图像是由较大图像缩小而成的）。
当图像的渲染大小取决于 视窗 宽度（基于视窗的选择）时，x 描述符不适用，但可以与 艺术指导 一起使用。
< h2 > From today's featured article</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg"
srcset = "/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...用户代理可以根据用户的屏幕像素密度、缩放级别以及其他因素（如用户的网络条件）选择任何给定的资源。
为了向后兼容尚不理解 srcset 属性的较旧用户代理，一个 URL 在 img 元素的 src 属性中指定。这将导致在较旧的用户代理中显示一些有用的东西（尽管可能比用户想要的的分辨率低）。对于新用户代理，src 属性参与资源选择，就好像它是在 srcset 中使用 1x 描述符指定的一样。
可以使用 srcset 和 sizes 属性，使用 w 描述符，提供仅大小不同的多个图像（较小的图像是由较大图像缩小而成的）。
在这个例子中，横幅图像占据了整个 视窗 宽度（使用适当的 CSS）。
< h1 >< img sizes = "100vw" srcset = "wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src = "wolf-400.jpg" alt = "The rad wolf" ></ h1 > 用户代理将根据指定的 w 描述符和 sizes 属性中指定的渲染大小计算每个图像的有效像素密度。然后它可以根据用户的屏幕像素密度、缩放级别以及其他因素（如用户的网络条件）选择任何给定的资源。
如果用户的屏幕宽度为 320 CSS 像素，这相当于指定 wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x。另一方面，如果用户的屏幕宽度为 1200 CSS 像素，这相当于指定 wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x。通过使用 w 描述符和 sizes 属性，无论用户设备的大小如何，用户代理都可以选择正确的图像源进行下载。
为了向后兼容，一个 URL 被指定在 img 元素的 src 属性中。在新用户代理中，当 srcset 属性使用 w 描述符时，src 属性会被忽略。
在这个例子中，网页根据 视窗 的宽度有三种布局。窄布局有一列图像（每个图像的宽度约为 100%），中等布局有两列图像（每个图像的宽度约为 50%），最宽的布局有三列图像，还有一些页面边距（每个图像的宽度约为 33%）。当 视窗 宽度分别为 30em 和 50em 时，它会在这些布局之间切换。
< img sizes = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" > The sizes 属性在 30em 和 50em 处设置布局断点，并声明这些断点之间的图像大小为 100vw、50vw 或 calc(33vw - 100px)。这些大小不必与 CSS 中指定的实际图像宽度完全匹配。
用户代理将从 sizes 属性中选择一个宽度，使用第一个具有 <media-condition>（括号内的部分）为真的项目，或者如果它们都为假，则使用最后一个项目（calc(33vw - 100px)）。
例如，如果 视窗 宽度为 29em，则 (max-width: 30em) 评估为真，并使用 100vw，因此图像大小（用于资源选择）为 29em。如果 视窗 宽度改为 32em，则 (max-width: 30em) 评估为假，但 (max-width: 50em) 评估为真，并使用 50vw，因此图像大小（用于资源选择）为 16em（视窗 宽度的二分之一）。请注意，略微更宽的 视窗 会导致较小的图像，因为布局不同。
然后，用户代理可以计算有效的像素密度并选择合适的资源，类似于前面的例子。
此示例与上一个示例相同，但图像为 延迟加载。在这种情况下，sizes 属性可以使用 auto 关键字，用户代理将使用 width 属性（或 CSS 中指定的宽度）作为 源大小。
< img loading = "lazy" width = "200" height = "200" sizes = "auto"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" > 为了与不支持 auto 关键字的旧版用户代理保持更好的向后兼容性，可以根据需要指定回退大小。
< img loading = "lazy" width = "200" height = "200"
sizes = "auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" > picture 元素和 source 元素，以及 media 属性，可用于提供多个图像，这些图像改变了图像内容（例如，较小的图像可能是较大图像的裁剪版本）。
< picture >
< source media = "(min-width: 45em)" srcset = "large.jpg" >
< source media = "(min-width: 32em)" srcset = "med.jpg" >
< img src = "small.jpg" alt = "The wolf runs through the snow." >
</ picture > 用户代理将选择第一个 source 元素，其 media 属性中的媒体查询匹配，然后从其 srcset 属性中选择一个合适的 URL。
图像的渲染大小根据选择的资源而变化。为了指定用户代理在下载图像之前可以使用的大小，可以使用 CSS。
img { width : 300 px ; height : 300 px }
@media ( min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }type 属性在 source 元素上可以使用，用于提供多种格式的图像。
< h2 > From today's featured article</ h2 >
< picture >
< source srcset = "/uploads/100-marie-lloyd.webp" type = "image/webp" >
< source srcset = "/uploads/100-marie-lloyd.jxr" type = "image/vnd.ms-photo" >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
</ picture >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...在此示例中，用户代理将选择第一个具有 type 属性的源，该属性具有受支持的 MIME 类型。如果用户代理支持 WebP 图像，则将选择第一个 source 元素。如果用户代理不支持 WebP 图像，但支持 JPEG XR 图像，则将选择第二个 source 元素。如果两种格式都不支持，则将选择 img 元素。
本节是非规范性的。
CSS 和媒体查询可用于构建图形页面布局，这些布局动态适应用户的环境，特别是适应不同的 视窗 尺寸和像素密度。但是，对于内容，CSS 无法提供帮助；相反，我们有 img 元素的 srcset 属性和 picture 元素。本节将逐步介绍一个示例案例，展示如何使用这些功能。
考虑这样一种情况：在宽屏上（宽度超过 600 CSS 像素），将使用名为 a-rectangle.png 的 300×150 图像，但在较小的屏幕上（600 CSS 像素 或更少），将使用名为 a-square.png 的较小的 100×100 图像。此标记将如下所示
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure > 有关在 alt 属性中放置内容的详细信息，请参见 提供文本作为图像替代的必要条件 部分。
此问题在于，用户代理在图像加载时不一定知道要使用哪个尺寸的图像。为了避免在页面加载时布局必须多次重新调整，可以使用 CSS 和 CSS 媒体查询来提供尺寸
< style >
# a { width : 300 px ; height : 150 px ; }
@ media ( max-width : 600px ) { # a { width : 100 px ; height : 100 px ; } }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure > 或者，可以使用 width 和 height 属性为旧版用户代理提供宽度和高度，仅为支持 picture 的用户代理使用 CSS
< style media = "(max-width: 600px)" >
# a { width : 100 px ; height : 100 px ; }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" width = "300" height = "150"
alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure > img 元素与 src 属性一起使用，该属性提供图像的 URL，用于不支持 picture 元素的旧版用户代理。这导致了一个问题，即在 src 属性中提供哪个图像。
如果作者希望在旧版用户代理中使用最大的图像，则标记可以如下所示
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< img src = "pear-desktop.jpeg" alt = "The pear is juicy." >
</ picture > 但是，如果旧版移动用户代理更重要，则可以在 source 元素中列出所有三个图像，完全覆盖 src 属性。
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture > 由于此时 src 属性实际上被支持 picture 的用户代理完全忽略，因此 src 属性可以默认为任何图像，包括既不是最小也不是最大的图像
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-tablet.jpeg" alt = "The pear is juicy." >
</ picture > 在 max-width 媒体特征之上使用，给出图像的预期最大 (视窗) 尺寸。也可以使用 min-width 代替。
< picture >
< source srcset = "pear-desktop.jpeg" media = "(min-width: 1281px)" >
< source srcset = "pear-tablet.jpeg" media = "(min-width: 721px)" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture > source、img 和 link 元素的通用属性一个 srcset 属性 是一个属性，其要求在本节中定义。
如果存在，其值必须由一个或多个 图像候选字符串 组成，每个字符串之间用 U+002C 逗号字符 (,) 分隔。如果一个 图像候选字符串 不包含描述符，并且在 URL 后面没有 ASCII 空格，则下一个 图像候选字符串（如果有）必须以一个或多个 ASCII 空格 开头。
一个 图像候选字符串 由以下组件组成，顺序如下，并在本列表之后进一步描述限制
零个或多个 ASCII 空格。
一个 有效的非空 URL，它不以 U+002C 逗号字符 (,) 开头或结尾，引用一个非交互式、可选动画的图像资源，该资源既不是分页的也不是脚本化的。
零个或多个 ASCII 空格。
以下内容中的零个或一个
零个或多个 ASCII 空格。
对于具有与同一元素的另一个 图像候选字符串 的 宽度描述符值 相同的 宽度描述符值 的元素，必须没有 图像候选字符串。
对于具有相同像素密度描述符值的元素，其不能具有与另一个图像候选字符串的像素密度描述符值相同的图像候选字符串。为满足此要求，没有描述符的图像候选字符串等效于具有1x描述符的图像候选字符串。
如果元素的图像候选字符串指定了宽度描述符，则该元素的所有其他图像候选字符串也必须指定宽度描述符。
在图像候选字符串的宽度描述符中指定的宽度必须与图像候选字符串的URL中给出的资源的自然宽度匹配（如果它具有自然宽度）。
如果元素具有sizes属性，则该元素的所有图像候选字符串必须指定宽度描述符。
一个sizes 属性是一个属性，在本节中定义了其要求。
如果存在，该值必须是有效的源尺寸列表。
一个有效的源尺寸列表是一个与以下语法匹配的字符串：[CSSVALUES] [MQ]
< source-size-list > = < source-size > #? , < source-size-value >
< source-size > = < media-condition > < source-size-value > | auto
< source-size-value > = < length > | auto一个<source-size-value>，它是一个<length>，不能为负数，并且不能使用除数学函数之外的 CSS 函数。
关键字auto是在解析 sizes 属性中计算的宽度。如果存在，它必须是第一个条目，并且整个<source-size-list>值必须是字符串 "auto"（ASCII 不区分大小写）或以字符串 "auto,"（ASCII 不区分大小写）开头。
如果发起图像加载的img 元素（通过更新图像数据或对环境变化做出反应算法）允许自动大小并且正在渲染，则auto是具体对象大小宽度。否则，auto值将被忽略，如果有，将使用下一个源大小。
如果满足以下条件，auto关键字可以在source元素的sizes属性和img元素的sizes属性中指定。否则，auto不能被指定。
此外，强烈建议使用width和height属性或 CSS 来指定尺寸。如果没有指定尺寸，图像可能会以 300x150 的尺寸渲染，因为渲染部分中sizes="auto"意味着contain-intrinsic-size: 300px 150px。
一个<source-size-value>给出了图像的预期布局宽度。作者可以使用<media-condition>为不同的环境指定不同的宽度。
在<source-size-value>中不允许使用百分比，以避免对其相对于什么的混淆。可以将'vw'单位用于相对于视窗宽度的尺寸。
一个img元素具有一个当前请求和一个待处理请求。当前请求最初被设置为一个新的图像请求。待处理请求最初被设置为 null。
一个图像请求具有一个状态、当前 URL和图像数据。
当一个图像请求的状态是部分可用或完全可用时，该图像请求被认为是可用。
当一个img元素的当前请求的状态是完全可用，并且用户代理可以在没有错误的情况下解码媒体数据时，img元素被认为是完全可解码。
当一个img元素的当前请求是可用时，img元素提供一个绘制源，其宽度为图像的密度校正后的自然宽度（如果有），其高度为图像的密度校正后的自然高度（如果有），其外观为图像的自然外观。
如果一个img元素指定了srcset属性，或其父级是picture元素，则该img元素被认为使用srcset或picture。
每个img元素都有一个最后选择的源，最初必须为 null。
每个图像请求都有一个当前像素密度，最初必须为 1。
每个图像请求都有首选密度校正后的尺寸，它要么是一个包含宽度和高度的结构，要么为 null。最初必须为 null。
要确定一个img元素img的密度校正后的自然宽度和高度：
设dim为img的当前请求的首选密度校正后的尺寸。
在准备图像以进行展示算法中，基于图像中的元信息设置首选密度校正后的尺寸。
如果dim为 null，则将dim设置为img的自然尺寸。
返回 dim。
例如，如果 当前像素密度 为 3.125，则意味着每个 CSS 英寸 有 300 个设备像素，因此如果图像数据为 300x600，则其 密度校正的自然宽度和高度 为 96 CSS 像素 和 192 CSS 像素。
一个 源集 是一个有序的集合，包含零个或多个 图像源 和一个 源大小。
一个 图像源 是一个 URL，并且可选地包含一个 像素密度描述符 或一个 宽度描述符。
一个 源大小 是一个 <source-size-value>。当一个 源大小 具有相对于 视窗 的单位时，它必须被解释为相对于 img 元素的 节点文档 的 视窗。其他单位必须像在媒体查询中一样解释。 [MQ]
本节中算法的 解析错误 表示输入与要求之间的非致命不匹配。鼓励用户代理以某种方式暴露 解析错误。
无论图像是否成功获取（例如，响应状态是否为 ok 状态）都必须在确定图像的类型和它是否为有效图像时忽略。
这允许服务器返回具有错误响应的图像，并使它们显示。
用户代理应应用 图像嗅探规则 来确定图像的类型，图像的 关联的 Content-Type 标头 提供 正式类型。如果未应用这些规则，则图像的类型必须由图像的 关联的 Content-Type 标头 给出。
用户代理不得使用 img 元素支持非图像资源（例如，文档元素 为 HTML 元素的 XML 文件）。用户代理不得运行嵌入在图像资源中的可执行代码（例如脚本）。用户代理必须仅显示多页资源的第一页（例如，PDF 文件）。用户代理不得允许资源以交互方式运行，但应尊重资源中的任何动画。
本规范未指定要支持的图像类型。
默认情况下，图像会立即获取。用户代理可能向用户提供按需获取图像的选项。（例如，带宽受限的用户可能会使用按需选项。）
在立即获取图像时，用户代理必须同步地 更新 img 元素的图像数据，如果指定，则设置 重新启动动画 标志，无论何时创建该元素或经历 相关变异。
在按需获取图像时，用户代理必须 更新 img 元素的图像数据，无论何时需要图像数据（即按需），但前提是 img 元素的 当前请求 的 状态 为 不可用。当 img 元素经历 相关变异 时，如果用户代理仅按需获取图像，则 img 元素的 当前请求 的 状态 必须恢复为 不可用。
img 元素的 相关变异 如下所示
元素的 crossorigin 属性的状态发生更改。
元素的 referrerpolicy 属性的状态发生更改。
img 或 source HTML 元素插入步骤 或 HTML 元素移除步骤 将变异计为 相关变异。
元素的父元素是 picture 元素，并且 source 元素是先前兄弟节点，其 srcset、sizes、media、type、width 或 height 属性被设置、更改或删除。
元素的 采用步骤 被运行。
如果元素 允许自动调整大小：元素开始或停止 被渲染，或者其 具体对象大小 宽度发生变化。这必须为 更新图像数据 算法设置 可能省略事件 标志。
每个 Document 对象必须具有一个 可用图像列表。此列表中的每个图像都由一个元组标识，该元组由一个 绝对 URL、一个 CORS 设置属性 模式以及，如果模式不是 No CORS，则为一个 来源。此外，每个图像都有一个 忽略更高层缓存 标志。用户代理可以在任何时间将条目从一个 Document 对象的 可用图像列表 复制到另一个（例如，当 Document 创建时，用户代理可以向其添加在其他 Document 中加载的所有图像），但不得在这样做时更改以这种方式复制的条目的键，并且必须取消设置已复制条目的 忽略更高层缓存 标志。用户代理也可以在任何时间从这些列表中删除图像（例如，为了节省内存）。用户代理必须根据资源的更高层缓存语义（例如，HTTP `Cache-Control` 响应头）适当地从 可用图像列表 中删除条目，当 忽略更高层缓存 标志未设置时。
可用图像列表 旨在支持在将 src 属性更改为之前已加载的 URL 时进行同步切换，并避免在同一文档中重新下载图像，即使它们不允许按 HTTP 进行缓存。它不用于避免在先前图像仍在加载时重新下载同一图像。
用户代理还可以将图像数据与 可用图像列表 分开存储。
例如，如果资源具有 HTTP 响应头 `Cache-Control: must-revalidate`，并且其 忽略更高层缓存 标志未设置，则用户代理会将其从 可用图像列表 中删除，但可以单独保留图像数据，并在服务器响应 304 Not Modified 状态时使用该数据。
图像数据通常会被编码以减少文件大小。这意味着为了让用户代理将图像呈现到屏幕上，需要对数据进行解码。 解码 是将图像的媒体数据转换为适合在屏幕上呈现的位图形式的过程。请注意，此过程可能比参与呈现内容的其他过程慢。因此，用户代理可以选择何时执行解码，以创造最佳的用户体验。
如果图像解码在完成之前阻止呈现其他内容，则称其为同步解码。通常，这会同时呈现图像和任何其他内容，但此呈现会因执行解码所需的时间而延迟。
如果图像解码不阻止呈现其他内容，则称其为异步解码。这会更快地呈现非图像内容，但图像内容在解码完成之前不会显示在屏幕上。解码完成后，屏幕会更新以显示图像。
在同步和异步解码模式下，最终内容在相同的时间过去后都会呈现到屏幕上。主要区别在于用户代理是否在呈现最终内容之前呈现非图像内容。
为了帮助用户代理决定是否执行同步或异步解码，可以在 decoding 属性上设置 img 元素。 decoding 属性的可能值为以下 图像解码提示 关键字
| 关键字 | 状态 | 描述 |
|---|---|---|
sync
| 同步 | 表示首选 解码 此图像，以便与其他内容同步呈现。 |
async
| 异步 | 表示首选 解码 此图像，以避免延迟呈现其他内容。 |
auto
| 自动 | 表示没有解码模式偏好（默认值）。 |
当 解码 图像时，用户代理应尊重 decoding 属性状态指示的偏好。如果指示的状态为 自动，则用户代理可以自由选择任何解码行为。
还可以使用 decode() 方法控制解码行为。由于 decode() 方法执行 解码，独立于负责将内容呈现到屏幕上的过程，因此不受 decoding 属性的影响。
此算法不能从在 并行 中运行的步骤中调用。如果用户代理需要从在 并行 中运行的步骤中调用此算法，则需要 排队 一项任务来执行此操作。
当用户代理要 更新图像数据 的 img 元素时，可以选择设置 重新启动动画 标志，可以选择设置 可能省略事件 标志，则必须运行以下步骤
如果用户代理无法支持图像，或其图像支持已被禁用，则 中止图像请求，针对 当前请求 和 待处理请求，将 当前请求 的 状态 设置为 不可用，将 待处理请求 设置为 null，并返回。
设 选定源 为 null，选定像素密度 为未定义。
如果元素不 使用 srcset 或 picture，并且它具有一个指定的值不是空字符串的 src 属性，则将 选定源 设置为元素的 src 属性的值，并将 选定像素密度 设置为 1.0。
将元素的 上次选定源 设置为 选定源。
如果 选定源 不为 null，则
如果此 img 元素的另一个此算法实例在此实例之后启动（即使它已中止并且不再运行），则返回。
只有最后一个实例生效，以避免在例如 src、srcset 和 crossorigin 属性依次设置时发生多次请求。
设 选定源 和 选定像素密度 为 选择图像源 产生的 URL 和像素密度。
如果 选定源 为 null，则
设 urlString 为给定 选定源 相对于元素的 节点文档 的 编码解析和序列化 URL 的结果。
如果 urlString 为失败，则
如果 urlString 与 当前请求 的 当前 URL 相同，并且 当前请求 的 状态 为 部分可用，则 中止 挂起请求 的图像请求，在 DOM 操作任务源 上排队一个元素任务，该任务由 img 元素组成，用于 重新启动动画（如果 重新启动动画 已设置），然后返回。
如果 当前请求 的 状态 为 不可用 或 损坏，则将 当前请求 设置为 图像请求。否则，将 挂起请求 设置为 图像请求。
让 请求 为 创建潜在 CORS 请求 的结果，该请求由 urlString、"image" 和元素的 crossorigin 内容属性的当前状态组成。
如果元素 使用 srcset 或 picture，则将 请求 的 发起者 设置为 "imageset"。
将 请求 的 引用者策略 设置为元素的 referrerpolicy 属性的当前状态。
将 请求 的 优先级 设置为元素的 fetchpriority 属性的当前状态。
如果 img 的 延迟加载属性 处于 急切 状态，或者 脚本被禁用（对于 img 而言），则让 延迟加载事件 为 true，否则为 false。
如果 将延迟加载元素步骤（由 img 返回）返回 true，则
对 img 元素 开始交叉观察一个延迟加载元素。
返回。
获取图像：获取 请求。从本算法返回，并将剩余步骤作为获取的 processResponse（对于 响应 响应）的一部分运行。
通过这种方式获得的资源（如果有）是 图像请求 的 图像数据。它可以是 CORS 同源 或 CORS 跨源；这会影响图像与其他 API 的交互（例如，在 canvas 上使用时）。
当 延迟加载事件 为 true 时，获取图像必须 延迟元素的 节点文档 的加载事件，直到由 网络任务源 排队的任务（一旦资源被获取（在下面定义））已运行。
不幸的是，这可用于对用户的本地网络执行基本端口扫描（尤其是在与脚本结合使用时，虽然实际上并不需要脚本即可执行此类攻击）。用户代理可能会实施 跨源 访问控制策略，这些策略比上面描述的策略更严格，以减轻这种攻击，但不幸的是，此类策略通常与现有的 Web 内容不兼容。
尽快跳到以下列表中的第一个适用条目
multipart/x-mixed-replace在获取图像时由 网络任务源 排队的下一个 任务 必须运行以下步骤
如果 图像请求 是 挂起请求 并且至少有一个主体部分已完全解码，则 中止 当前请求 的图像请求，并 将挂起请求升级为当前请求。
否则，如果 图像请求 是 挂起请求 并且用户代理能够确定 图像请求 的图像以某种致命方式损坏（以至于无法获取图像尺寸），则 中止 当前请求 的图像请求，将挂起请求升级为当前请求，并将 当前请求 的 状态 设置为 损坏。
否则，如果 图像请求 是 当前请求，其 状态 为 不可用，并且用户代理能够确定 图像请求 的图像的宽度和高度，则将 当前请求 的 状态 设置为 部分可用。
否则，如果 图像请求 是 当前请求，其 状态 为 不可用，并且用户代理能够确定 图像请求 的图像以某种致命方式损坏（以至于无法获取图像尺寸），则将 当前请求 的 状态 设置为 损坏。
在获取图像时由 网络任务源 排队的每个 任务 必须更新图像的呈现方式，但随着每个新的主体部分的到来，如果用户代理能够确定图像的宽度和高度，则它必须 根据 img 元素准备 img 元素的 当前请求 以进行呈现，并替换之前的图像。一旦一个主体部分已完全解码，则执行以下步骤
在获取图像时由 网络任务源 排队的下一个 任务 必须运行以下步骤
如果用户代理能够确定 图像请求 的图像的宽度和高度，并且 图像请求 是 挂起请求，则将 图像请求 的 状态 设置为 部分可用。
否则，如果用户代理能够确定图像请求的图像的宽度和高度，并且图像请求是当前请求，准备图像请求以供呈现，给定img元素，并设置图像请求的状态为部分可用。
否则，如果用户代理能够确定图像请求的图像以某种致命方式损坏，以至于无法获取图像尺寸，并且图像请求是待处理请求
否则，如果用户代理能够确定图像请求的图像以某种致命方式损坏，以至于无法获取图像尺寸，并且图像请求是当前请求
该任务，以及每个后续任务，它由网络任务源在图像正在获取时排队，如果图像请求是当前请求，则必须适当更新图像的呈现（例如，如果图像为渐进式JPEG，则每个数据包都可以提高图像的分辨率）。
图像数据不在支持的文件格式中；用户代理必须将图像请求的状态设置为损坏，中止图像请求，用于当前请求和待处理请求，如果图像请求是待处理请求，则将待处理请求升级为当前请求，然后，如果可能省略事件未设置或previousURL不等于urlString，则在DOM操作任务源上排队，给定img元素，触发名为error的事件，在img元素上。
当用户代理正在为元素x运行上述算法时，必须从元素的节点文档到元素x有一个强引用，即使该元素没有连接。
要中止图像请求，用于图像请求或空图像请求，表示运行以下步骤
要将待处理请求升级为当前请求，用于img元素，表示运行以下步骤
要准备图像以供呈现，用于图像请求req，给定图像元素img
令physicalWidth和physicalHeight为从req的图像数据获取的宽度和高度，如相关编解码器所定义。
令dimX为exifTagMap的标签0xA002（PixelXDimension）的值。
令dimY为exifTagMap的标签0xA003（PixelYDimension）的值。
令resX为exifTagMap的标签0x011A（XResolution）的值。
令resY为exifTagMap的标签0x011B（YResolution）的值。
令resUnit为exifTagMap的标签0x0128（ResolutionUnit）的值。
如果dimX或dimY不是正整数，则返回。
如果resX或resY不是正浮点数，则返回。
如果resUnit不等于2（Inch），则返回。
令widthFromDensity为physicalWidth的值，乘以72并除以resX。
令heightFromDensity为physicalHeight的值，乘以72并除以resY。
如果widthFromDensity不等于dimX或heightFromDensity不等于dimY，则返回。
将req的首选密度校正尺寸设置为一个结构体，其宽度设置为dimX，高度设置为dimY。
适当更新req的img元素的呈现。
EXIF中的分辨率等效于每英寸CSS点数，因此72是根据分辨率计算尺寸的基数。
如果EXIF在图像已经呈现后到达，目前尚未指定会发生什么情况。请参阅问题#4929。
要选择图像源，给定img元素el
要从源集中选择图像源，给定源集sourceSet
如果sourceSet中的条目b具有与sourceSet中较早条目a相同的关联像素密度描述符，则删除条目b。重复此步骤，直到sourceSet中的所有条目都没有与较早条目相同的关联像素密度描述符。
返回selectedSource及其关联的像素密度。
当被要求创建源集，给定字符串默认源、字符串srcset、字符串sizes，以及元素或空img时
令源集为一个空的源集。
如果srcset不是一个空字符串，则将源集设置为解析srcset的结果。
如果 默认源 不是空字符串，并且 源集 不包含具有 像素密度描述符 值为 1 的 图像源，且不包含具有 宽度描述符 的 图像源，则将 默认源 追加到 源集 中。
规范化源密度 源集。
返回 源集。
当被要求 更新源集 针对给定的 img 或 link 元素 el 时，用户代理必须执行以下操作
设 elements 为 « el »。
如果 el 是一个其父节点为 picture 元素的 img 元素，则 替换 elements 的内容为 el 的父节点的子元素，保留相对顺序。
设 img 为 el，如果 el 是一个 img 元素，否则为 null。
对于每个 child 在 elements 中
如果 child 是 el
设 默认源 为空字符串。
设 srcset 为空字符串。
设 sizes 为空字符串。
否则，如果 el 是一个具有 imagesrcset 属性的 link 元素，则将 srcset 设置为该属性的值。
否则，如果 el 是一个具有 imagesizes 属性的 link 元素，则将 sizes 设置为该属性的值。
返回。
如果 el 是一个 link 元素，则 elements 只包含 el，因此此步骤将立即到达，并且算法的其余部分将不会运行。
解析 child 的 srcset 属性，并将返回的 源集 设置为 源集。
解析 child 的 sizes 属性 与 img，并将 源集 的 源大小 设置为返回的值。
如果 child 具有 width 或 height 属性，则将 el 的 维度属性来源 设置为 child。否则，将 el 的 维度属性来源 设置为 el。
规范化源密度 源集。
设 el 的 源集 为 源集。
返回。
每个 img 元素独立地考虑其前面的兄弟 source 元素加上 img 元素本身来选择 图像源，忽略任何其他（无效）元素，包括同一 picture 元素中的其他 img 元素，或相关 img 元素后面的兄弟 source 元素。
当被要求 解析 srcset 属性 从一个元素中，解析元素的 srcset 属性 的值，如下所示
设 input 为传递给此算法的值。
设 position 为指向 input 的指针，最初指向字符串的开头。
设 candidates 为一个最初为空的 源集。
拆分循环： 收集一系列代码点 它们是 ASCII 空格 或 U+002C 逗号字符从 input 给定 position。如果收集了任何 U+002C 逗号字符，则这是一个 解析错误。
如果 position 超过 input 的末尾，则返回 candidates。
设 descriptors 为一个新的空列表。
如果 url 以 U+002C (,) 结尾，则
从 url 中删除所有尾随的 U+002C 逗号字符。如果这删除了多个字符，则这是一个 解析错误。
否则
描述符标记器： 跳过 ASCII 空格 在 input 中给定 position。
设 当前描述符 为空字符串。
设 state 为 在描述符中。
设 c 为 position 处的字符。根据 state 的值执行以下操作。为了本步骤的目的，“EOF”是一个特殊字符，表示 position 超过 input 的末尾。
执行以下操作，根据 c 的值
如果 当前描述符 不为空，则将 当前描述符 追加到 descriptors 中，并将 当前描述符 设置为空字符串。将 state 设置为 描述符之后。
将 position 前移到 input 中的下一个字符。如果 当前描述符 不为空，则将 当前描述符 追加到 descriptors 中。跳转到标记为 描述符解析器 的步骤。
将 c 追加到 当前描述符 中。将 state 设置为 在括号中。
如果 当前描述符 不为空，则将 当前描述符 追加到 descriptors 中。跳转到标记为 描述符解析器 的步骤。
将 c 追加到 当前描述符 中。
执行以下操作，根据 c 的值
将 c 追加到 当前描述符 中。将 state 设置为 在描述符中。
将 当前描述符 追加到 descriptors 中。跳转到标记为 描述符解析器 的步骤。
将 c 追加到 当前描述符 中。
执行以下操作，根据 c 的值
保持此状态。
跳转到标记为 描述符解析器 的步骤。
将 state 设置为 在描述符中。将 position 设置为 input 中的上一个字符。
将 position 前移到 input 中的下一个字符。重复此步骤。
为了与未来的添加兼容，此算法支持多个描述符和带有括号的描述符。
描述符解析器：设 error 为 否。
设 width 为 缺失。
设 density 为 缺失。
设 future-compat-h 为 缺失。
对于 descriptors 中的每个描述符，从以下列表中运行适当的一组步骤
这是一个解析错误。
如果 future-compat-h 和 density 都不为 absent，则将 error 设为 yes。
将解析非负整数的规则应用于描述符。如果结果为 0，则将 error 设为 yes。否则，将 future-compat-h 设为结果。
将 error 设为 yes。
如果 future-compat-h 不为 absent 且 width 为 absent，则将 error 设为 yes。
如果 error 仍然为 no，则将一个新的图像源附加到 candidates 中，其 URL 为 url，如果 width 不为 absent，则关联一个 width，如果 density 不为 absent，则关联一个 density。否则，存在解析错误。
返回到标记为 splitting loop 的步骤。
当被要求从一个元素 element 中解析 sizes 属性时，其中 element 为一个img 元素或为 null
将 unparsed sizes list 设为从 element 的sizes 属性（如果属性不存在，则为一个空字符串）的值解析一个逗号分隔的组件值列表的结果。 [CSSSYNTAX]
将 size 设为 null。
对于 unparsed sizes list 中的每个 unparsed size
从 unparsed size 的末尾删除所有连续的<whitespace-token>。如果 unparsed size 现在为空，则这是一个解析错误；继续。
如果 unparsed size 中最后一个组件值是一个有效的非负<source-size-value>，则将 size 设为它的值，并从 unparsed size 中删除该组件值。除数学函数以外的任何 CSS 函数都是无效的。否则，存在解析错误；继续。
如果 size 为auto，且 img 不为 null，且 img 为正在渲染，且 img允许自动大小，则将 size 设为 img 的具体对象尺寸宽度，以CSS 像素为单位。
如果 size 仍然为auto，则它将被忽略。
从 unparsed size 的末尾删除所有连续的<whitespace-token>。如果 unparsed size 现在为空
将 unparsed size 中剩余的组件值解析为一个<media-condition>。如果它解析不正确，或者它解析正确但<media-condition>评估为 false，则继续。 [MQ]
如果 size 不为auto，则返回 size。否则，继续。
返回 100vw。
在<source-size-list> 中，不是最后一项的<source-size-value>（无伴随的<media-condition>）是一个<length>，这是无效的。但是，解析算法允许它出现在<source-size-list> 中的任何位置，如果列表中的前一项未使用，它将立即接受该项作为大小。这是为了启用未来的扩展，并防止简单的作者错误，例如最终的尾随逗号。一个裸露的auto 关键字允许有其他条目跟随它，以便为旧版用户代理提供回退。
一个图像源可以有一个像素密度描述符、一个宽度描述符，或者没有描述符与其 URL 相伴。规范化一个源集会为每个图像源提供一个像素密度描述符。
当被要求规范化一个源集 source set 的源密度时，用户代理必须执行以下操作
用户代理可以随时运行以下算法来更新一个img 元素的图像，以对环境变化做出反应。（用户代理不需要运行此算法；例如，如果用户不再查看页面，用户代理可能希望等到用户返回页面后再确定要使用哪个图像，以防环境在此期间再次发生变化。）
当用户更改视口的大小（例如通过调整窗口大小或更改页面缩放比例）时，以及当一个img 元素插入文档时，用户代理鼓励运行此算法，以便密度校正后的自然宽度和高度匹配新的视口，并且当涉及到艺术指导时，选择正确的图像。
⌛ 如果 img 元素没有 使用 srcset 或 picture，其 节点文档 不 完全活跃，具有资源类型为 multipart/x-mixed-replace 的图像数据，或者 挂起的请求 不为空，则返回。
⌛ 令 选定源 和 选定像素密度 分别为 选择图像源 所得的 URL 和像素密度。
⌛ 如果 选定源 为空，则返回。
⌛ 令 urlString 为 对 URL 进行编码、解析和序列化 所得的结果，相对于元素的 节点文档。
⌛ 如果 urlString 失败，则返回。
⌛ 令 corsAttributeState 为元素的 crossorigin 内容属性的状态。
⌛ 令 key 为一个元组，包含 urlString、corsAttributeState 以及，如果 corsAttributeState 不是 No CORS，则包含 origin。
⌛ 令元素的 挂起的请求 为 图像请求。
如果 可用图像列表 包含 key 的条目，则将 图像请求 的 图像数据 设置为该条目的图像数据。继续执行下一步。
否则
令 request 为 创建潜在 CORS 请求 所得的结果，给定 urlString、"image" 和 corsAttributeState。
将 request 的 客户端 设置为 client，发起者 设置为 "imageset"，并将 request 的 同步标志 设置。
将 request 的 referrer 策略 设置为元素的 referrerpolicy 属性的当前状态。
将 request 的 优先级 设置为元素的 fetchpriority 属性的当前状态。
令 response 为 获取 request 所得的结果。
如果 response 的 不安全响应 是 网络错误，或者图像格式不受支持（通过应用 图像嗅探规则 确定，如前所述），或者用户代理能够确定 图像请求 的图像以某种致命方式损坏，以至于无法获取图像尺寸，或者资源类型为 multipart/x-mixed-replace，则令 挂起的请求 为空，并中止这些步骤。
否则，response 的 不安全响应 是 图像请求 的 图像数据。它可以是 CORS 同源 或 CORS 跨域；这会影响图像与其他 API 的交互（例如，在 canvas 上使用时）。
在 DOM 操作任务源上排队一个元素任务，给定 img 元素和以下步骤。
除非另有说明，否则必须指定 alt 属性，其值不能为空；该值必须是图像的适当替代。alt 属性的具体要求取决于图像的意图，如以下各节所述。
编写替代文本时要考虑的最一般规则如下：意图是，用每个图像的 alt 属性的文本替换每个图像，不会改变页面的含义。
因此，一般而言，可以通过考虑如果不能包含图像会写什么来编写替代文本。
一个推论是，alt 属性的值永远不应该包含可以被认为是图像的标题、标题或图例的文本。它应该包含用户可以代替图像使用的替代文本；它不是为了补充图像。可以将 title 属性用于补充信息。
另一个推论是，alt 属性的值不应该重复图像旁边散文中的信息。
一种理解替代文本的方法是，想象一下如何通过电话向某人朗读包含图像的页面，而不提及存在图像。你所说的代替图像的内容通常是编写替代文本的良好起点。
当一个创建 超链接 的 a 元素，或者一个 button 元素，没有文本内容，但包含一个或多个图像，则 alt 属性必须包含共同传达链接或按钮目的的文本。
在这个例子中，用户被要求从三个列表中选择他们喜欢的颜色。每种颜色都用图像表示，但对于配置了用户代理不显示图像的用户，则使用颜色名称。
< h1 > Pick your color</ h1 >
< ul >
< li >< a href = "green.html" > < img src = "green.jpeg" alt = "Green" > </ a ></ li >
< li >< a href = "blue.html" > < img src = "blue.jpeg" alt = "Blue" > </ a ></ li >
< li >< a href = "red.html" > < img src = "red.jpeg" alt = "Red" > </ a ></ li >
</ ul > 在这个例子中，每个按钮都有一组图像，以指示用户期望的颜色输出类型。第一个图像在每种情况下用于提供替代文本。
< button name = "rgb" > < img src = "red" alt = "RGB" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button > 由于每个图像代表文本的一部分，因此也可以这样写
< button name = "rgb" > < img src = "red" alt = "R" >< img src = "green" alt = "G" >< img src = "blue" alt = "B" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "C" >< img src = "magenta" alt = "M" >< img src = "yellow" alt = "Y" >< img src = "black" alt = "K" > </ button > 但是，对于其他替代文本，这可能不起作用，并且将所有替代文本放在每种情况下的一个图像中可能更有意义
< button name = "rgb" > < img src = "red" alt = "sRGB profile" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK profile" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button > 有时，某些内容可以用图形形式更清晰地表达，例如流程图、图表、图形或简单的方向地图。在这种情况下，可以使用 img 元素给出图像，但仍必须给出较少的文本版本，以便无法查看图像的用户（例如，因为他们连接速度很慢，或者因为他们使用的是纯文本浏览器，或者因为他们正在收听免提汽车语音网络浏览器朗读页面，或者仅仅因为他们失明）仍然能够理解传达的信息。
文本必须在 alt 属性中给出，并且必须与 src 属性中指定的图像传达相同的信息。
重要的是要意识到，替代文本是图像的替代，而不是图像的描述。
在以下示例中，我们有 一个流程图，以图像形式，文本在 alt 属性中，用散文形式改写了流程图。
< p > In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = "The Network
passes data to the Input Stream Preprocessor, which passes it to the
Tokenizer, which passes it to the Tree Construction stage. From there,
data goes to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to the
Tokenizer." > </ p > 以下是一个示例，展示了在描述中包含图像时，一个好的解决方案和一个不好的解决方案。
首先，这是好的解决方案。此示例显示了如何将替代文本设置为如果图像从未存在过，您会在散文中输入的内容。
<!-- This is the correct way to do things. -->
< p >
You are standing in an open field west of a house.
< img src = "house.jpeg" alt = "The house is white, with a boarded front door." >
There is a small mailbox here.
</ p > 其次，这是不好的解决方案。在这种不正确的方式中，替代文本仅仅是对图像的描述，而不是图像的文字替换。这是不好的，因为当图像没有显示时，文本的流畅度不如第一个示例。
<!-- This is the wrong way to do things. -->
< p >
You are standing in an open field west of a house.
< img src = "house.jpeg" alt = "A white house, with a boarded front door." >
There is a small mailbox here.
</ p > 诸如“带有木板门的白色房屋的照片”之类的文本将是同样糟糕的替代文本（尽管它可能适用于 title 属性或 figcaption 元素中 figure 元素中包含此图像）。
文档可以包含以图标形式的信息。图标旨在帮助使用视觉浏览器的用户一目了然地识别功能。
在某些情况下，图标是对传达相同含义的文本标签的补充。在这些情况下，alt 属性必须存在，但必须为空。
这里，图标位于传达相同含义的文本旁边，因此它们具有空的 alt 属性。
< nav >
< p >< a href = "/help/" > < img src = "/icons/help.png" alt = "" > Help</ a ></ p >
< p >< a href = "/configure/" > < img src = "/icons/configuration.png" alt = "" >
Configuration Tools</ a ></ p >
</ nav > 在其他情况下，图标旁边没有描述其含义的文本；图标应该是不言自明的。在这些情况下，必须在 alt 属性中给出等效的文本标签。
在这里，新闻网站上的帖子用图标标记，以指示其主题。
< body >
< article >
< header >
< h1 > Ratatouille wins < i > Best Movie of the Year</ i > award</ h1 >
< p > < img src = "movies.png" alt = "Movies" > </ p >
</ header >
< p > Pixar has won yet another < i > Best Movie of the Year</ i > award,
making this its 8th win in the last 12 years.</ p >
</ article >
< article >
< header >
< h1 > Latest TWiT episode is online</ h1 >
< p > < img src = "podcasts.png" alt = "Podcasts" > </ p >
</ header >
< p > The latest TWiT episode has been posted, in which we hear
several tech news stories as well as learning much more about the
iPhone. This week, the panelists compare how reflective their
iPhones' Apple logos are.</ p >
</ article >
</ body > 许多页面包含徽标、标识、旗帜或徽章，代表特定实体，例如公司、组织、项目、乐队、软件包、国家或类似实体。
如果徽标用于代表实体，例如作为页面标题，则 alt 属性必须包含徽标代表的实体的名称。 alt 属性不能包含诸如“logo”之类的文本，因为传达的不是它是一个徽标的事实，而是实体本身。
如果徽标被用在它所代表的实体的名称旁边，那么徽标是补充的，它的 alt 属性必须为空。
如果徽标仅用作装饰性材料（作为品牌，或者，例如，作为一篇提到徽标所属实体的文章的侧边图像），那么以下关于纯粹装饰性图像的条目适用。如果徽标实际上正在讨论，那么它被用作具有替代图形表示（徽标本身）的短语或段落（徽标的描述），并且上面的第一个条目适用。
在以下片段中，所有四种上述情况都存在。首先，我们看到一个用于代表公司的徽标。
< h1 > < img src = "XYZ.gif" alt = "The XYZ company" > </ h1 > 接下来，我们看到一个段落，它在公司名称旁边使用了一个徽标，因此没有替代文本。
< article >
< h2 > News</ h2 >
< p > We have recently been looking at buying the < img src = "alpha.gif"
alt = "" > ΑΒΓ company, a small Greek company
specializing in our type of product.</ p > 在这个第三个片段中，我们有一个在旁注中使用的徽标，它是讨论收购的较大文章的一部分。
< aside >< p >< img src = "alpha-large.gif" alt = "" ></ p ></ aside >
< p > The ΑΒΓ company has had a good quarter, and our
pie chart studies of their accounts suggest a much bigger blue slice
than its green and orange slices, which is always a good sign.</ p >
</ article > 最后，我们有一篇谈论徽标的评论文章，因此徽标在替代文本中得到了详细描述。
< p > Consider for a moment their logo:</ p >
< p >< img src = "/images/logo" alt = "It consists of a green circle with a
green question mark centered inside it." ></ p >
< p > How unoriginal can you get? I mean, oooooh, a question mark, how
< em > revolutionary</ em > , how utterly < em > ground-breaking</ em > , I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</ p > 此示例显示了如何编写替代文本，以便如果图像不可用，并且使用文本代替，文本将无缝地融入周围的文本中，就好像图像从未存在过一样。
有时，图像仅仅包含文本，并且图像的目的是不突出显示用于渲染文本的实际排版效果，而是仅仅传达文本本身。
在这种情况下，alt 属性必须存在，但必须与图像本身中写入的相同文本一致。
考虑一个包含“地球日”文本的图形，但所有字母都用花卉和植物装饰。如果文本仅仅用作标题，为了视觉用户美化页面，那么正确的替代文本就是相同的文本“地球日”，并且无需提及装饰。
< h1 > < img src = "earthdayheading.png" alt = "Earth Day" > </ h1 > 手抄本可能使用图形作为其某些图像。在这种情况下，替代文本仅仅是图像代表的字符。
< p >< img src = "initials/o.svg" alt = "O" > nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...当图像用于表示无法在 Unicode 中表示的字符时，例如外字、异体字或新字符，例如新颖的货币符号，替代文本应该是更传统的方式来写相同的内容，例如使用日语平假名或片假名来给出字符的发音。
在本例中，来自 1997 年，一个看起来像一个卷曲的 E，中间有两个条而不是一个条的新式货币符号，使用图像表示。替代文本给出了字符的发音。
< p > Only < img src = "euro.png" alt = "euro " > 5.99!如果字符可以完全服务于相同的目的，则不应该使用图像。只有当文本不能直接使用文本表示时，例如，由于装饰或因为没有合适的字符（例如，在使用外字的情况下），图像才适用。
如果作者想使用图像，因为他们的默认系统字体不支持给定的字符，那么网络字体是比图像更好的解决方案。
在许多情况下，图像实际上只是补充性的，它的存在只是加强了周围的文本。在这些情况下，alt 属性必须存在，但其值必须为空字符串。
一般来说，如果删除图像不会使页面变得不再有用，但包含图像会使使用视觉浏览器的用户更容易理解概念，那么图像就属于此类别。
一个以图形形式重复上一段的流程图。
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg" alt = "" ></ p > 在这些情况下，包含仅由标题组成的替代文本将是错误的。如果要包含标题，则可以使用 title 属性，或者可以使用 figure 和 figcaption 元素。在后一种情况下，图像实际上将是一个具有替代图形表示的短语或段落，因此需要替代文本。
<!-- Using the title="" attribute -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = ""
title = "Flowchart representation of the parsing model." > </ p > <!-- Using <figure> and <figcaption> -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< figure >
< img src = "images/parsing-model-overview.svg" alt = "The Network leads to
the Input Stream Preprocessor, which leads to the Tokenizer, which
leads to the Tree Construction stage. The Tree Construction stage
leads to two items. The first is Script Execution, which leads via
document.write() back to the Tokenizer. The second item from which
Tree Construction leads is the DOM. The DOM is related to the Script
Execution." >
< figcaption > Flowchart representation of the parsing model.</ figcaption >
</ figure > <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg"
alt = "Flowchart representation of the parsing model." ></ p >
<!-- Never put the image's caption in the alt="" attribute! --> 一个以图形形式重复上一段的图表。
< p > According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</ p >
< p >< img src = "rendering-mode-pie-chart.png" alt = "" ></ p > 有时，图像对内容并不关键，但它既不是纯粹的装饰，也不是完全与文本冗余。在这些情况下，alt 属性必须存在，其值应该是空字符串，或者是对图像传达的信息的文本表示。如果图像有描述图像标题的标题，那么 alt 属性的值不能为空（因为这对于非视觉读者来说会非常令人困惑）。
考虑一篇关于政治人物的新闻文章，其中该人的面孔以图像形式显示。图像不是纯粹的装饰，因为它与故事相关。图像也不是完全与故事冗余，因为它显示了政治人物的样子。是否需要提供任何替代文本是作者的决定，取决于图像是否影响对散文的理解。
在这个第一个变体中，图像在没有上下文的情况下显示，并且没有提供替代文本。
< p > < img src = "president.jpeg" alt = "" > Ahead of today's referendum,
the President wrote an open letter to all registered voters. In it, she admitted that the country was
divided.</ p > 如果图片只是一个脸，那么描述它可能没有任何价值。读者是否对这个人是否拥有红头发或金头发，这个人是否拥有白皮肤或黑皮肤，这个人是否拥有一只眼睛或两只眼睛不感兴趣。
但是，如果图片更具动态性，例如显示政治人物很愤怒，或者特别高兴，或者很沮丧，那么一些替代文本将有助于设定文章的基调，而这种基调可能在没有图片的情况下会被遗漏。
< p > < img src = "president.jpeg" alt = "The President is sad." >
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</ p > < p > < img src = "president.jpeg" alt = "The President is happy!" >
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</ p > 这个人是“悲伤”还是“高兴”对如何理解其余段落有影响：她是否可能说她对国家分裂感到不满，或者她是否说国家分裂的前景对她的政治生涯有利？解释根据图像而变化。
如果图像有标题，那么包含替代文本可以避免非视觉用户对标题所指内容感到困惑。
< p > Ahead of today's referendum, the President wrote an open letter to
all registered voters. In it, she admitted that the country was divided.</ p >
< figure >
< img src = "president.jpeg"
alt = "A high forehead, cheerful disposition, and dark hair round out the President's face." >
< figcaption > The President of Ruritania. Photo © 2014 PolitiPhoto. </ figcaption >
</ figure > 如果图像具有装饰性，但不是特别针对页面 - 例如构成网站范围设计方案一部分的图像 - 则应在网站的 CSS 中指定图像，而不是在文档的标记中指定。
但是，一个装饰性的图像，它没有被周围的文本讨论，但仍然具有一定的相关性，可以使用 img 元素包含在页面中。这些图像具有装饰性，但仍然是内容的一部分。在这些情况下，alt 属性必须存在，但其值必须为空字符串。
例如，图片纯粹是装饰性的，尽管与内容相关，例如，在关于火人节活动博客文章中，Black Rock City 景观的照片，或者在一首诗歌的页面上，展示受诗歌启发的绘画图像。以下代码段展示了后一种情况的示例（代码段中只包含第一节）
< h1 > The Lady of Shalott</ h1 >
< p >< img src = "shalott.jpeg" alt = "" ></ p >
< p > On either side the river lie< br >
Long fields of barley and of rye,< br >
That clothe the wold and meet the sky;< br >
And through the field the road run by< br >
To many-tower'd Camelot;< br >
And up and down the people go,< br >
Gazing where the lilies blow< br >
Round an island there below,< br >
The island of Shalott.</ p > 当图片被切分成更小的图像文件，然后一起显示以再次形成完整的图片时，其中一张图片必须设置其 alt 属性，以符合适用于整张图片的相关规则，然后所有其余的图片必须将其 alt 属性设置为空字符串。
在以下示例中，代表 XYZ Corp 公司 logo 的图片被分成两部分，第一部分包含字母 “XYZ”，第二部分包含单词 “Corp”。替代文本 (“XYZ Corp”) 全部都在第一张图片中。
< h1 > < img src = "logo1.png" alt = "XYZ Corp" >< img src = "logo2.png" alt = "" > </ h1 > 在以下示例中，评级显示为三个实心星和两个空心星。虽然替代文本可以是 “★★★☆☆”，但作者选择以更友好的方式给出评级，即 “3 out of 5”。 这是第一张图片的替代文本，其余的图片则为空白替代文本。
< p > Rating: < meter max = 5 value = 3 > < img src = "1" alt = "3 out of 5"
>< img src = "1" alt = "" >< img src = "1" alt = "" >< img src = "0" alt = ""
>< img src = "0" alt = "" > </ meter ></ p > 通常，图像地图 应该代替将图片切片以创建链接。
但是，如果图片确实被切片，并且切片图片的任何组件都是链接的唯一内容，则每个链接必须有一张图片在其 alt 属性中具有替代文本，代表链接的目的。
在以下示例中，图片代表飞翔的意大利面条怪兽的标志，左边的面条附肢和右边的面条附肢在不同的图片中，这样用户可以在冒险中选择左侧或右侧。
< h1 > The Church</ h1 >
< p > You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</ p >
< p >< a href = "?go=left" >< img src = "fsm-left.png" alt = "Left side. " ></ a
>< img src = "fsm-middle.png" alt = ""
>< a href = "?go=right" >< img src = "fsm-right.png" alt = "Right side." ></ a ></ p > 在某些情况下，图片是内容的关键部分。例如，在一个属于图片库的页面上可能出现这种情况。图片是包含它的页面的全部重点。
为作为内容关键部分的图片提供替代文本的方式取决于图片的来源。
如果可以提供详细的替代文本，例如，如果图片是杂志评论中一系列截图的一部分，或者漫画的一部分，或者博客条目中关于该照片的照片，则必须将可作为图片替代的文本作为 alt 属性的内容提供。
新操作系统截图库中的截图，带有替代文本
< figure >
< img src = "KDE%20Light%20desktop.png"
alt = "The desktop is blue, with icons along the left hand side in
two columns, reading System, Home, K-Mail, etc. A window is
open showing that menus wrap to a second line if they
cannot fit in the window. The window has a list of icons
along the top, with an address bar below it, a list of
icons for tabs along the left edge, a status bar on the
bottom, and two panes in the middle. The desktop has a bar
at the bottom of the screen with a few buttons, a pager, a
list of open applications, and a clock." >
< figcaption > Screenshot of a KDE desktop.</ figcaption >
</ figure > 财务报告中的图表
< img src = "sales.gif"
title = "Sales graph"
alt = "From 1998 to 2005, sales increased by the following percentages
with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%" > 请注意，对于销售图表， “销售图表” 将是不充分的替代文本。通常，适合作为标题的文本不适合作为替代文本。
在某些情况下，图片的性质可能使得提供完整的替代文本不切实际。例如，图片可能模糊不清，或者是一个复杂的碎形，或者是一张详细的地形图。
在这些情况下，alt 属性必须包含一些合适的替代文本，但它可能相对简短。
有时根本不存在能够充分描述图片的文本。例如，对于罗夏墨迹测验，几乎没有什么可以说的。但是，即使是简短的描述也比没有好。
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "A shape with left-right
symmetry with indistinct edges, with a small gap in the center, two
larger gaps offset slightly from the center, with two similar gaps
under them. The outline is wider in the top half than the bottom
half, with the sides extending upwards higher than the center, and
the center extending below the sides." >
< figcaption > A black outline of the first of the ten cards
in the Rorschach inkblot test.</ figcaption >
</ figure > 请注意，以下将是替代文本的极差用法
<!-- This example is wrong. Do not copy it. -->
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "A black outline
of the first of the ten cards in the Rorschach inkblot test." >
< figcaption > A black outline of the first of the ten cards
in the Rorschach inkblot test.</ figcaption >
</ figure > 像这样将标题包含在替代文本中并没有用，因为它实际上是为无法看到图片的用户复制了标题，让他们重复看到了它，但并没有比只阅读或听到标题一次更有帮助。
另一个无法完全描述的图片示例是碎形，根据定义，它具有无限的细节。
以下示例展示了一种为曼德博集合图片的全视图提供替代文本的可能方法。
< img src = "ms1.jpeg" alt = "The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes." > 类似地，一张人物肖像的照片，例如在传记中，可以被认为与内容高度相关且是内容的关键部分，但很难用文本完全代替
< section class = "bio" >
< h1 > A Biography of Isaac Asimov</ h1 >
< p > Born < b > Isaak Yudovich Ozimov</ b > in 1920, Isaac was a prolific author.</ p >
< p >< img src = "headpics/asimov.jpeg" alt = "Isaac Asimov had dark hair, a tall forehead, and wore glasses.
Later in life, he wore long white sideburns." ></ p >
< p > Asimov was born in Russia, and moved to the US when he was three years old.</ p >
< p > ...</ p >
</ section > 在这种情况下，没有必要（实际上也不鼓励）在替代文本中包含对图片本身存在的引用，因为这种文本会与浏览器本身报告图片存在重复。例如，如果替代文本是 “一张艾萨克·阿西莫夫的照片”，则符合规范的用户代理可能会将其读出来，例如 “(Image) 一张艾萨克·阿西莫夫的照片”，而不是更有用的 “(Image) 艾萨克·阿西莫夫留着黑发，额头很高，戴着眼镜……”。
在一些不幸的情况下，可能根本没有可用的替代文本，要么是因为图片是通过某种自动方式获取的，没有任何相关的替代文本（例如，网络摄像头），要么是因为页面是由使用用户提供的图片的脚本生成的，而用户没有提供合适的或可用的替代文本（例如，照片分享网站），要么是因为作者自己不知道图片代表什么（例如，盲人摄影师在博客上分享图片）。
在这些情况下，可以省略 alt 属性，但必须同时满足以下条件之一
img 元素位于一个 figure 元素中，该元素包含一个 figcaption 元素，该元素包含除 元素间空白 之外的其他内容，并且，忽略 figcaption 元素及其后代，figure 元素没有除 元素间空白 和 img 元素之外的 流内容 后代。
title 属性存在且具有非空值。
目前不建议依赖 title 属性，因为许多用户代理无法以本规范要求的可访问方式公开该属性（例如，需要使用指向设备，如鼠标，才能显示工具提示，这排除了仅使用键盘的用户和仅使用触摸的用户，例如，任何使用现代手机或平板电脑的人）。
应将此类情况降至最低。如果作者有哪怕是最小的可能性能够提供真实的替代文本，那么省略 alt 属性将是不可接受的。
照片分享网站上的照片，如果网站接收到的图片除了标题之外没有其他元数据，可以标记如下
< figure >
< img src = "1100670787_6a7c664aef.jpg" >
< figcaption > Bubbles traveled everywhere with us.</ figcaption >
</ figure > 但是，如果从用户那里获取并包含在页面上的图片重要部分的详细描述会更好。
盲人用户的博客，其中展示了用户拍摄的照片。最初，用户可能不知道他们拍摄的照片是什么
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article > 然而，最终，用户可能会从朋友那里获得图片的描述，然后可以包含替代文本
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" alt = "The photograph shows my squirrel
feeder hanging from the edge of my roof. It is half full, but there
are no squirrels around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
with light blue streaks." >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article > 有时，图片的全部意义在于文本描述不可用，用户需要提供描述。例如，CAPTCHA 图片的目的是看看用户是否能够真正读取图形。以下是一种标记 CAPTCHA 的方法（请注意 title 属性）
< p >< label > What does this image say?
< img src = "captcha.cgi?id=8934" title = "CAPTCHA" >
< input type = text name = captcha ></ label >
(If you cannot see the image, you can use an < a
href = "?audio" > audio</ a > test instead.)</ p > 另一个示例是，软件显示图片并要求提供替代文本，以便随后用正确的替代文本编写页面。该页面可能包含一个图片表，如下所示
< table >
< thead >
< tr > < th > Image < th > Description
< tbody >
< tr >
< td > < img src = "2421.png" title = "Image 640 by 100, filename 'banner.gif'" >
< td > < input name = "alt2421" >
< tr >
< td > < img src = "2422.png" title = "Image 200 by 480, filename 'ad3.gif'" >
< td > < input name = "alt2422" >
</ table > 请注意，即使在这个例子中，尽可能多的有用信息仍然包含在 title 属性中。
由于某些用户根本无法使用图片（例如，因为他们的连接速度很慢，或者因为他们使用的是纯文本浏览器，或者因为他们使用的是免提汽车语音网络浏览器来朗读页面，或者仅仅是因为他们失明），所以 alt 属性只能在没有可用的替代文本且无法提供替代文本的情况下被省略，而不是提供替代文本，如上述示例所示。作者的努力不足不是省略 alt 属性的合理理由。
通常，作者应避免将 img 元素用于显示图片以外的其他目的。
如果 img 元素用于显示图片以外的其他目的，例如作为统计页面浏览次数的服务的一部分，则 alt 属性必须为空字符串。
在这种情况下，应将 width 和 height 属性都设置为零。
本节不适用于公开可访问的文档或目标受众并非作者个人认识的文档，例如网站上的文档、发送到公共邮件列表的电子邮件或软件文档。
当图片包含在针对已知能够查看图片的特定人员的私人通信（例如，HTML 电子邮件）中时，可以省略 alt 属性。但是，即使在这种情况下，也强烈建议作者包含替代文本（根据所涉及图片的类型，如上述条目中所述，进行适当的调整），这样，即使用户使用不支持图片的邮件客户端，或者文档被转发给其他可能无法轻松看到图片的用户，电子邮件仍然可以使用。
标记生成器（例如 WYSIWYG 作者工具）应尽可能地从用户处获取备用文本。但是，我们认识到在许多情况下，这是不可能的。
对于作为链接唯一内容的图像，标记生成器应检查链接目标以确定目标标题或目标 URL，并使用通过这种方式获得的信息作为备用文本。
对于带有标题的图像，标记生成器应使用 figure 和 figcaption 元素，或 title 属性来提供图像的标题。
作为最后手段，实现者应将 alt 属性设置为空字符串，假设图像是一个纯粹的装饰性图像，不添加任何信息，但仍然与周围内容相关，或者完全省略 alt 属性，假设图像内容的关键部分。
标记生成器可以在 img 元素上指定 generator-unable-to-provide-required-alt 属性，对于他们无法获得备用文本并且因此省略了 alt 属性的元素，此属性的值必须为空字符串。包含此类属性的文档不符合标准，但符合性检查器将 静默忽略 此错误。
这是为了避免标记生成器被迫用提供虚假备用文本的更严重错误来取代省略 alt 属性的错误，因为最先进的自动化符合性检查器无法区分虚假备用文本与正确的备用文本。
标记生成器通常应避免使用图像本身的文件名作为备用文本。同样，标记生成器应避免从将同样可用于表示用户代理（例如，Web 浏览器）的任何内容生成备用文本。
这是因为一旦页面生成，通常不会更新，而随后读取页面的浏览器可以由用户更新，因此浏览器很可能拥有比标记生成器在生成页面时更新和更精细的启发式算法。
符合性检查器必须报告缺少 alt 属性作为错误，除非以下列出的条件之一适用
符合性检查器已被配置为假设该文档是电子邮件或面向已知能够查看图像的特定人员的文档。
img 元素具有（不符合标准的） generator-unable-to-provide-required-alt 属性，其值为一个空字符串。不将缺少 alt 属性报告为错误的符合性检查器也不应将空 generator-unable-to-provide-required-alt 属性报告为错误。（这种情况不代表文档符合标准的情况，只代表生成器无法确定合适的备用文本——在这种情况下，验证器不需要显示错误，因为这样的错误可能会鼓励标记生成器纯粹是为了让验证器静音而包含虚假的备用文本。当然，符合性检查器可以将缺少 alt 属性报告为错误，即使在 generator-unable-to-provide-required-alt 属性存在的情况下；例如，可能存在一个用户选项来报告所有符合性错误，即使这些错误可能是使用标记生成器或多或少不可避免的结果。）