图像

装饰性图片（例如按钮上的背景渐变效果或内容部分或整个网页上的背景图片）属于展示性图片，应使用 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 扩展名（或作为 data-uri）的 SVG 图片可以使用 <img> 元素进行嵌入。

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

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

alt 属性可为图片提供替代文本，为无法看到屏幕的用户（例如搜索引擎、辅助技术，甚至 Alexa、Siri 和 Google 助理）提供图片说明，并且在图片未加载时可能会由浏览器显示。除了网络速度较慢或带宽受限的用户之外，alt 文本在 HTML 电子邮件中也非常有用，因为许多用户会在电子邮件应用中屏蔽图片。

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

如果图片是 SVG 文件类型，还应包含 role="img"，这是由于 VoiceOver bug 所必需的。

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

撰写有效的alt图片说明

alt 属性旨在简明扼要地提供图片传达的所有相关信息，同时省略文档中其他内容冗余或无用的信息。在撰写文字时，语气应与网站的语气保持一致。

若要撰写有效的替代文本，请想象一下，您正在向一位无法看到网页的人朗读整个网页的内容。通过使用 semantic <img> 元素，屏幕阅读器用户和机器人可以得知该元素是图片。在 alt 中添加“这是一张图片/屏幕截图/照片”是多余的。用户无需知道有图片，但需要知道图片传达了哪些信息。

通常，您不会说“这是一张狗戴红帽的粗糙图片”。 而是要根据文档其余部分的上下文来传达图片所表达的内容。您传达的内容会因周围文字的上下文和内容而异。

例如，根据上下文，对狗的照片的描述会有所不同。如果 Fluffy 是 Yuckymeat 狗粮评价旁边的头像，则 alt="Fluffy" 就足够了。

如果照片是动物收容所网站上 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"。不过，请仅使用标准图标，如果您使用非标准图标（例如好 Fluffy 和坏 Fluffy），请添加图例，并确保图标不是解读界面元素含义的唯一方式。

如果图片是屏幕截图或图表，请写出从图片中了解到的信息，而不是描述图片的外观。虽然一张图片确实可以胜过千言万语，但说明应简洁明了地传达所有学到的知识。

从上下文和内容中省略用户已知的信息。例如，如果您正在查看有关更改浏览器设置的教程页面，而该页面是关于点击浏览器 Chrome 中的图标，那么屏幕截图中的页面网址并不重要。将 alt 限制为当前主题：如何更改设置。

alt 可能是“设置图标位于搜索字段下方的导航栏中。”请勿添加“屏幕截图”或“机器学习工作坊”，因为用户不需要知道这是屏幕截图，也不需要知道技术撰稿人在撰写说明时正在浏览什么内容。图片说明基于最初包含该图片的原因。

如果屏幕截图显示了如何通过访问 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" /> 

页面底部有三条评价，每条评价都附有海报图片。通常，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 属性接受以英文逗号分隔的值列表，每个值都包含相应素材资源的网址，后跟一个空格，再后跟相应图片选项的描述符。如果使用宽度描述符，您还必须为除最后一个 srcset 选项之外的每个选项添加包含媒体查询或来源大小的 sizes 属性。有关使用 srcset 的自适应图片和描述性语法的学习部分值得一读。

如果存在匹配项，srcset 图片优先于 src 图片。

<picture>和<source>

另一种提供多种资源并允许浏览器渲染最合适的资源的方法是使用 <picture> 元素。<picture> 元素是一个容器元素，用于容纳多个图片选项，这些选项列在数量不限的 <source> 元素中，以及一个必需的 <img> 元素中。

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

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

其他性能功能

还有许多其他图片功能可以提升网站的性能。

延迟加载

loading 属性会告知支持 JavaScript 的浏览器如何加载图片。默认值 eager 表示在解析 HTML 时立即加载图片，即使图片位于可见视口之外也是如此。通过设置 loading="lazy"，系统会延迟加载图片，直到图片很可能进入视口时才加载。浏览器会根据图片与视口的距离来确定“可能”。此值会随着用户滚动而更新。延迟加载有助于节省带宽和 CPU，从而为大多数用户提升性能。如果 JavaScript 因安全原因而被停用，所有图片都会默认设置为 eager。

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

宽高比

浏览器会在收到 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 和 fetchpriority 属性（在基于 Blink 的浏览器中）。如果图片是服务器端地图的一部分，则很少使用。如果使用，请添加 ismap 布尔值属性，并将 <img> 嵌套在链接中，以供没有指控设备的客户使用。

ismap 属性对于 <input type="image" name="imageSubmitName"> 而言不是必需的，甚至不受支持，因为点击位置的 x 和 y 坐标会在提交表单时发送，并将这些值附加到输入名称（如果有）中。例如，当用户点击图片并提交表单时，系统会随表单一起提交类似 &imageSubmitName.x=169&imageSubmitName.y=66 的内容。如果图片没有 name 属性，则会发送 x 和 y：&x=169&y=66。

检验您的掌握情况

测试您对图片相关知识的掌握情况。