装饰性图片（例如按钮上的背景渐变或内容 sections 或整页上的背景图片）是展示性的，应使用 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 的 SVG 图片（或作为 data-uri）可以使用 <img> 元素嵌入。
至少，每个前景图片都应包含 src 和 alt 属性。
src 文件是嵌入图片的路径和文件名。src 属性用于提供图片的网址。然后，浏览器会提取资源并将其渲染到页面上。此属性是 <img> 必需的；没有它，将无法渲染任何内容。
alt 属性为图片提供替代文本，为无法看到屏幕的人（想想搜索引擎和辅助技术，甚至包括 Alexa、Siri 和 Google Assistant）提供图片描述，并且如果图片未加载，浏览器可能会显示该文本。除了网络速度慢或带宽受限的用户外，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 中包含“这是一张图片/屏幕截图/照片”是多余的。用户不需要知道那里有图片，但他们确实需要知道图片传达了什么信息。
通常，您不会说“这是一张戴着红帽子的狗的颗粒感图片”。相反，您会传达图片在文档其余部分的上下文中传达的内容；而您传达的内容会根据上下文和周围文本的内容而变化。
例如，狗的照片将根据上下文以不同的方式描述。如果 Fluffy 是 Yuckymeat 狗粮评论旁边的头像，则 alt="Fluffy" 就足够了。
如果照片是动物收容所网站上 Fluffy 领养页面的组成部分，则目标受众是未来的狗父母。文本应描述图片中传达的与领养者相关的信息，并且该信息不会在周围文本中重复。更长的描述（例如 alt="Fluffy，一只毛很短的三色小猎犬，嘴里叼着一个网球"）是合适的。领养页面的文本通常包括可领养宠物的物种、品种、年龄和性别，因此无需在 alt 文本中重复这些信息。但是，狗的书面传记可能不包括毛发长度、颜色或玩具偏好。请注意，我们没有描述图片：未来的狗主人不需要知道狗是在室内还是室外，或者它是否戴着红色项圈和蓝色皮带。
当将图片用于图标时，由于 alt 属性提供了可访问的名称，因此请传达图标的含义，而不是图片的描述。例如，放大镜图标的 alt 属性是 search。看起来像房子的图标的 alt 文本是 home。5 英寸软盘图标的描述是 save。如果有两个 Fluffy 图标用于指示最佳实践和反模式，则戴着绿色贝雷帽的微笑狗可以设置 alt="good"，而戴着红色贝雷帽的咆哮狗可能会读取 alt="bad"。也就是说，仅使用标准图标，如果您使用非标准图标（例如好 Fluffy 和坏 Fluffy），请包含图例，并确保图标不是破译 UI 元素含义的唯一方法。
如果图片是屏幕截图或图表，请编写从图片中学到的内容，而不是描述外观。虽然一张图片绝对可以胜过千言万语，但描述应简洁地传达学到的一切。
省略用户从上下文中已经知道的信息以及内容中另行告知的信息。例如，如果您在关于更改浏览器设置的教程页面上，并且该页面是关于单击浏览器 Chrome 中的图标，则屏幕截图中页面的网址并不重要。将 alt 限制为手头的主题：如何更改设置。alt 可能是“设置图标位于搜索字段下方的导航栏中。”不要包含“屏幕截图”或“machinelearningworkshop”，因为用户不需要知道它是屏幕截图，也不需要知道技术作者在编写说明时在浏览什么。图片的描述基于最初包含图片的原因的上下文。
如果屏幕截图显示了如何通过转到 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 属性接受逗号分隔值列表，每个值都包含资源的网址，后跟一个空格，后跟该图片选项的描述符。如果使用宽度描述符，则还必须包含 sizes 属性，其中包含除最后一个 srcset 选项之外的每个选项的媒体查询或来源大小。值得阅读“学习”sections 中涵盖的带有 srcset 的自适应图片和描述性语法。
如果存在匹配项，则 srcset 图片将优先于 src 图片。
<picture> 和 <source>
提供多个资源并允许浏览器渲染最合适的资源的另一种方法是使用 <picture> 元素。<picture> 元素是多个图片选项的容器元素，这些图片选项列在无限数量的 <source> 元素和一个必需的 <img> 元素中。
<source> 属性包括 srcset、sizes、media、width 和 height。srcset 属性在 img、source 和 link 中通用，但在 source 中通常以稍有不同的方式实现，因为媒体查询可以列在 <srcset> 的 media 属性中。<source> 还支持在 type 属性中定义的图片格式。
浏览器将考虑每个子 <source> 元素，并在其中选择最佳匹配项。如果找不到匹配项，则会选择 <img> 元素的 src 属性的网址。可访问的名称来自嵌套的 <img> 的 alt 属性。“学习”sections 中涵盖的 <picture> 元素和规范性语法也值得一读。
其他性能特性
延迟加载
loading 属性告诉启用 JS 的浏览器如何加载图片。默认的 eager 值表示图片在 HTML 解析时立即加载，即使图片在可见视口之外也是如此。通过设置 loading="lazy"，图片加载将推迟到图片很可能进入视口时。“可能”由浏览器根据图片与视口的距离来定义。这会在用户滚动时更新。延迟加载有助于节省带宽和 CPU，从而提高大多数用户的性能。如果 JavaScript 被禁用，出于安全原因，所有图片都将默认为 eager。
<img src="switch.svg" alt="light switch" loading="lazy" />
纵横比
浏览器在收到 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 覆盖。包含这些属性的目的是以正确的纵横比保留空间，从而通过减少布局偏移来提高性能。页面仍然需要大致相同的时间来加载，但当图片绘制到屏幕上时，UI 不会跳动。
其他图片特性
<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。
检查您的理解情况
测试您对图片的知识。
前景图片应始终具有哪两个属性？
sizealtsrc