图像

装饰性图片，例如按钮上的背景渐变或者部分内容或整个页面上的背景图片； 是展示性的，应与 CSS 一同应用。当图片为文档添加上下文时，它就是内容，应该 嵌入 HTML。

添加图片的主要方法是使用 <img> 标记和 src 属性引用图片资源和描述图片的 alt 属性。

<img src="images/eve.png" alt="Eve">

<img> 上的 srcset 属性和 <picture> 元素都提供了一种方式来包含多个图片来源， 相关联的媒体查询，每个查询都有一个后备图片来源，以便根据设备的 浏览器功能以及视口尺寸通过 srcset 属性，您可以提供多个映像版本 基于分辨率、浏览器视口大小和 sizes 属性。

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

您也可以使用 <picture> 元素以及 <source> 子元素（采用 <img> 作为默认来源）来完成此操作。

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

除了这些内置的 HTML 自适应图片方法外，HTML 还支持图片 通过各种属性改进渲染性能。<img> 标记以及图形提交按钮 <input type="image">， 可添加 height 和 width 属性来设置图片的宽高比，以减少内容布局偏移。lazy 属性支持延迟加载。

HTML 还支持直接使用 <svg> 添加 SVG 图片，不过 SVG 您可以使用 <img> 元素嵌入扩展名为 .svg 的图片（或以 data-uri 形式）。

每张前景图片至少应包含 src 和 alt 属性。

src 文件是嵌入的图片的路径和文件名。src 属性用于提供图片的网址。 然后，浏览器提取资源并将其呈现到页面上。<img> 要求提供此属性；没有它，就没有 进行渲染。

alt 属性用于为图片提供替代文本， 屏幕（比如搜索引擎和辅助技术，甚至是 Alexa、Siri 和 Google 助理），并可能通过浏览器显示 如果图片无法加载除了网络速度缓慢或带宽受限的用户外，alt 文本在 HTML 中也非常有用 因为很多用户会在其电子邮件应用中屏蔽图片。

<img src="path/filename" alt="descriptive text" />

如果图片是 SVG 文件类型，还应添加 role="img"， 因为 VoiceOver 错误。

<img src="switch.svg" alt="light switch" role="img" />

撰写有效的 alt 图片说明

Alt 属性力求简明扼要，提供图片传达的所有相关信息，同时省略 对文档中的其他内容造成重复或无用的信息。书写文本时，语气应 能够体现网站的风格

要撰写有效的替代文本，请设想一下，您在向看不到它的人朗读整个页面的内容。使用 语义 <img> 元素，屏幕阅读器用户和漫游器会收到通知 该元素是图片请勿添加“这是以下应用的图片/屏幕截图/照片”在 alt 中。用户没有 但需要知道图片传达的信息

通常，您不能说“这是一张戴着红色帽子的狗狗的颗粒状图片”。而是应该直接传递 传达相关背景信息；您传达的内容会因情境的不同而发生变化 以及周围文字的内容。

例如，狗的照片会根据具体情况以不同的方式进行描述。如果毛毛是 对 Yuckymeat 狗粮的评价，alt="Fluffy"已经足够。

如果这张照片是毛毛在某个动物收容所网站上的领养页面上的一部分，那么目标受众群体就是那只潜在狗 。文本应描述图片中传达的与采用者相关的信息且不重复 。使用较长的说明（例如 alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth"）是合适的做法。领养页面的文字通常包括可领养宠物的品种、品种、年龄和性别， 因此无需在替代文本中重复。但狗狗的著作可能并不包含头发长度、颜色和 或玩具偏好请注意，我们没有描述该图片：潜在狗主人无需知道狗是否 或有红色项圈和蓝色牵引绳。

使用图片作为图标时，由于 alt 属性提供无障碍名称，因此应传达图标的含义。 而不是图片的描述。例如，放大镜图标的 alt 属性为 search。显示的图标 比如房子有 home 作为替代文本。5 英寸软盘图标的说明为 save。如果使用“Fluffy”的两个图标 为了指明最佳实践和反面模式，可以设置 alt="good" 戴在绿色贝雷帽里微笑的狗，而吼狗是吼叫的狗 可能显示为“alt="bad"”。也就是说，您只能使用标准图标，并且要使用非标准图标（如 无论猫是好是坏，都应该添加图例，并确保图标不是解读界面元素含义的唯一途径。

如果图片是屏幕截图或图表，请写下从图片中学到的内容，而不是描述外观。 虽然一张图片绝对胜过千言万语，但描述应该简明扼要地表达您所学到的一切知识。

省略用户已从上下文中得知的信息以及内容中以其他方式获知的信息。例如： 如果您访问的是介绍如何更改浏览器设置的教程页面，并且该页面介绍的是如何点击 Chrome 浏览器中的图标，那么该网址 网页截图中的网页并不重要。将 alt 限制为当前主题：如何更改设置。alt可能是 “设置图标位于搜索字段下方的导航栏中。”请勿添加“屏幕截图”或“机器学习研讨会” 因为用户不需要知道这是一张屏幕截图，也不必知道 Techwriter 是在什么地方冲浪的 按照说明执行操作。图片的描述取决于图片最初包含原因的背景信息。

如果屏幕截图显示了如何通过转到 chrome://version/ 找到浏览器版本号，请将网址添加到 网页内容作为说明，并提供空字符串作为 alt 属性，因为图片不提供任何信息 文本中未包含的文本。

如果图片没有提供额外信息或只是装饰，则该属性仍应保留，就像一个空字符串一样。

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com 有七张前景图片，因此有七张图片具有 Alt 属性：复活节彩蛋灯开关、 一个手动图标、两张 Hal 和 Eve 的传记照片，以及三个搅拌机、吸尘器和烤面包机的头像。通过 只有看起来像杂志的前景图片是唯一一个纯装饰的图片。该网页还包含 两张背景图片；这些也具有装饰性，使用 CSS 添加时将无法访问。

该杂志为纯装饰风格，具有一个空的 alt 属性，并且 role 为 none，因为图片是纯粹的 展示 SVG。如果有意义，SVG 图片应包含 role="img"。

<img src="svg/magazine.svg" alt="" role="none" />

页面底部有 3 条评价，每条评价都有一张海报的图片。通常，alt 文本是名称 图片中人物的形象

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

由于这是一个笑话页，因此您应向低视力用户传达可能不易察觉的信息，以免他们错过 幽默感；我们将原始机器函数用作 alt，而不是使用字符的名称：

<img src="images/blender.svg" alt="blender" role="img" />

教师的照片不仅仅是头像，它们属于传记图片，因此包含更详细的描述。

如果这是一个真实的网站，则您应提供最基本的老师样子，以便潜在学生可能 认出他们。

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

这是一个笑话网站，因此请提供与笑话内容相关的信息：

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

如果您通过电话与朋友阅读网页，他们就不会在意红点是什么样的。在这种情况下， 非常重要。

在撰写描述性文字时，请考虑图片传达的信息对用户而言比较重要和相关， 包括那个请注意，图片的 alt 属性的内容因上下文而异。图片传达的所有信息 需要传达的内容是视力正常的用户能够接触到且与情境相关；别无他物语言描述要简短、精确、 非常实用。

src 和 alt 属性是嵌入图片的最低要求。我们还需要讨论一些其他属性。

自适应图片

视口尺寸有很多种。还有不同的屏幕分辨率。您不想浪费移动用户的 从而为大屏幕显示器提供足够宽的图片，但您可能需要为此类资源提供更高的分辨率 为屏幕分辨率是常规屏幕分辨率的四倍的小型设备制作图像。您可以通过多种方式提供不同的图片 来调整视口大小和屏幕分辨率

<img> srcset 个属性

借助 srcset 属性，您可以建议多个图片文件， 浏览器会根据多个媒体查询（包括视口大小和屏幕分辨率）选择要请求的图片。

每个 <img> 元素只能有一个 srcset 属性，但该 srcset 可以关联到多张图片。srcset 属性接受逗号分隔值列表，每个值都包含资产的网址，后跟一个空格，后跟 描述文字的大小。如果使用宽度描述符，则还必须为媒体添加 sizes 属性 查询或来源大小。srcset值得一读的“学习”部分包含使用 srcset 的自适应图片和描述性语法。

如果存在匹配，srcset 映像将优先于 src 映像。

<picture>和<source>

另一种提供多个资源并允许浏览器呈现最合适的资源的方法是使用 <picture> 元素。<picture> 元素是一个容器 元素。在任意数量的 <source> 中列出多个图片选项 元素和一个必需的 <img> 元素。

<source> 属性包括 srcset、sizes、media、width 和 height。 srcset 属性在 img、source 和 link 中很常见，但在源代码中的实现方式通常略有不同 因为媒体查询可改为在 <srcset> 的媒体属性中列出。<source> 还支持 type 属性中定义的图片格式。

浏览器会考虑每个子 <source> 元素并从中选择最匹配的元素。如果未找到匹配项，则网址 已选择 <img> 元素的 src 属性。可访问名称来自嵌套 <img> 的 alt 属性。 介绍 <picture> 元素和规范语法的“学习”部分也值得一读。

其他性能功能

延迟加载

loading 属性用于告知已启用 JS 的浏览器如何加载图片。默认的 eager 值表示该图片 系统会在 HTML 解析后立即加载，即使图片不在可见视口内也是如此。通过设置 loading="lazy" 图片加载会延迟到有可能进入视口时再加载。“有可能”由浏览器根据距离 该图像就来自视口了它会随着用户滚动屏幕而更新。延迟加载有助于节省带宽和 CPU 并提高性能 。如果 JavaScript 已停用，出于安全考虑，所有图片都将默认为 eager。

<img src="switch.svg" alt="light switch" loading="lazy" />

宽高比

浏览器在接收到 HTML 时就开始呈现 HTML，并在遇到 HTML 时提出资源请求。这意味着浏览器 在遇到 <img> 标记并发出请求时，已呈现 HTML。此外，图片可能需要一些时间才能加载完毕。 默认情况下，浏览器不会为图片预留空间（除了呈现 alt 文本所需的大小）。

<img> 元素始终支持无单位的 height 和 width 属性。这些属性已停止使用 CSS 页面CSS 可能会定义图片尺寸，通常会设置单个尺寸（例如 max-width: 100%;），以确保宽高比保持不变。 由于 CSS 通常包含在 <head> 中，因此会在遇到任何 <img> 之前对其进行解析。但没有明确列出 height 或 则预留的空间为 alt 文本的高度（或宽度）。由于大多数开发者只声明宽度 接收和呈现图片会导致累积布局偏移，从而对 Web Vitals 造成负面影响。 为了解决此问题，浏览器支持图片宽高比。在<img>中添加height和width属性 大小调整提示，告知浏览器宽高比，启用合适的 为最终的图片渲染预留的空间量。通过在图片上添加高度和宽度值，浏览器 知道图片的宽高比当浏览器遇到一个维度（例如我们的 50% 示例）时， （采用 CSS 尺寸的图片，另一个尺寸保持宽高比不变）。

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

如果 CSS 已正确设置，使其具备自适应能力，那么这些图片仍然具有自适应能力。是，随附的无单位 height 和 width 值将被 CSS 覆盖。添加这些属性的目的是为了预留 保持合适的宽高比，通过减少布局偏移来提高性能。此网页所耗费的时间与原来大致相同 但当图片绘制到屏幕上时，界面不会跳动。

其他图片特征

<img> 元素还支持 crossorigin、decoding、referrerpolicy；在基于 Blink 的浏览器中， fetchpriority 属性。很少使用；如果图片是服务器端地图的一部分，请添加 ismap 布尔值属性 并将 <img> 嵌套在链接中，以供没有指向设备的用户使用。

ismap 属性在 <input type="image" name="imageSubmitName"> 上与 x 和 y 一样，不是必需的，甚至不受支持 点击位置的坐标在表单提交过程中发送，并将值附加到输入名称（如果有）。例如： 用户点击图片时，会随表单提交 &imageSubmitName.x=169&imageSubmitName.y=66 之类的内容， 提交问题。如果图片没有 name 属性，则会发送 x 和 y：&x=169&y=66。

检查您的理解情况

测试您对图像知识的掌握情况。