initial commit

1 files changed, 410 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/img/index.html b/files/zh-cn/web/html/element/img/index.html
new file mode 100644
index 0000000000..a1f6530952
--- /dev/null
+++ b/files/zh-cn/web/html/element/img/index.html
@@ -0,0 +1,410 @@
+---
+title: <img>：图像嵌入元素
+slug: Web/HTML/Element/img
+tags:
+  - HTML
+  - Web
+  - 元素
+  - 参考
+  - 图像
+  - 图片
+  - 多媒体
+  - 照片
+  - 相片
+translation_of: Web/HTML/Element/img
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;img&gt;</code> 元素</strong>将一份图像嵌入文档。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>
+
+<p>上面的例子展示了 <code>&lt;img&gt;</code> 元素的用法：</p>
+
+<ul>
+ <li><code>src</code> 属性是<strong>必须的</strong>，它包含了你想嵌入的图片的文件路径。</li>
+ <li><code>alt</code> 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它<strong>难以置信地有用</strong>——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示<code>alt</code> 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。</li>
+</ul>
+
+<p>还有很多其他属性，可以实现各种不同的目的：</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} 控制，保证安全与隐私：详见 {{htmlattrxref("crossorigin", "img")}} 属性和 {{htmlattrxref("referrerpolicy", "img")}} 属性。</li>
+ <li>使用 {{htmlattrxref("width", "img")}}、{{htmlattrxref("height", "img")}} 和 {{htmlattrxref("intrinsicsize", "img")}} 设置 {{glossary("intrinsic size", "原始分辨率")}}：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。</li>
+ <li>使用 {{htmlattrxref("sizes", "img")}} 和 {{htmlattrxref("srcset", "img")}} 设置响应式图像（亦可参考 {{htmlelement("picture")}} 元素和我们的<a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图像</a>教程）。</li>
+</ul>
+
+<h2 id="支持的图像格式">支持的图像格式</h2>
+
+<p>HTML 标准并没有给出需要支持的图像格式的列表，因此每个{{glossary("user agent", "用户代理")}}支持一组不同的格式。MDN 另有一份完整的<a href="/zh-CN/docs/Web/Media/Formats/Image_types">网页浏览器图像格式指南</a>可供参考。</p>
+
+<p>{{page("/zh-CN/docs/Web/Media/Formats/Image_types", "table-of-image-file-types")}}</p>
+
+<h2 id="图像加载错误">图像加载错误</h2>
+
+<p>如果在加载或渲染图像时发生错误，且设置了至少一个 {{htmlattrxref("onerror")}} 事件处理器来处理 {{event("error")}} 事件，那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下，包括：</p>
+
+<ul>
+ <li><code>src</code> 属性的属性值为空（<code>""</code>）或者 <code>null</code>。</li>
+ <li><code>src</code> 属性的 {{glossary("URL")}} 和用户正在浏览的页面的 URL 完全相同。</li>
+ <li>图像出于某些原因损坏了，从而无法加载。</li>
+ <li>图像的元数据被破坏了，无法检索它的分辨率/宽高，而且在 <code>&lt;img&gt;</code> 元素的属性中没有指定宽度和/或高度。</li>
+ <li>{{glossary("user agent", "用户代理")}}尚未支持该图片所用的格式。</li>
+</ul>
+
+<h2 id="属性">属性</h2>
+
+<p>此元素支持<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>定义了图像的备用文本描述。
+ <div class="note">
+ <p><strong>注意：</strong>浏览器并非总是会显示图像。比如：</p>
+
+ <ul>
+  <li>非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）</li>
+  <li>用户选择不显示图像（比如为了节省带宽，或出于隐私等考虑不加载包括图片在内的第三方资源文件）</li>
+  <li>图像文件无效，或是使用了<a href="#Supported_image_formats">不支持的格式</a></li>
+ </ul>
+
+ <p>在这些情况下，浏览器很可能会将图像替换为图像所属 <code>&lt;img&gt;</code> 元素的 <code>alt</code> 属性所提供的文本。基于上面罗列的原因，以及更多尚未列出的原因，建议尽可能地通过 <code>alt</code> 属性提供一些有用的信息。</p>
+ </div>
+
+ <p>如果省略 <code>alt</code> 属性，则表明该图像是内容的关键部分，但没有等效的文本可用。<br>
+  如果把这个属性设置为空字符串（<code>alt=""</code>），则表明该图像<em>不是</em>内容的关键部分（这是一种装饰或者一个追踪像素点），非可视化浏览器在{{glossary("Rendering engine", "渲染")}}的时候可能会忽略它。而且，如果图片加载失败，可视化浏览器会隐藏表示图片损坏的图标。</p>
+
+ <p>将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。</p>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。<a href="/zh-CN/docs/CORS_Enabled_Image">启用 CORS 的图像</a> 可以在 {{HTMLElement("canvas")}} 元素中重复使用，而不会被<a href="/zh-CN/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas">污染</a>（tainted）。允许的值有：
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>执行一个跨域请求（比如，有 {{httpheader("Origin")}} {{glossary("HTTP")}} header）。但是没有发送证书（比如，没有 cookie，没有 <a href="https://tools.ietf.org/html/rfc5280">X.509 证书</a>，没有 <a href="/zh-CN/docs/Web/HTTP/Authentication#Basic_authentication_scheme">HTTP 基本授权认证</a>）。如果服务器没有把证书给到源站（没有设置 {{httpheader("Access-Control-Allow-Origin")}} HTTP 头），图像会被污染，而且它的使用会被限制。</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>一个有证书的跨域请求（比如，有 <code>Origin</code> HTTP header）被发送 （比如，cookie, 一份证书，或者 HTTP 基本验证信息）。如果服务器没有给源站发送证书（通过 <code>Access-Control-Allow-Credentials</code> HTTP header），图像将会被污染，且它的使用会受限制。</dd>
+ </dl>
+ 当用户并未显式使用本属性时，默认不使用 CORS 发起请求（例如，不会向服务器发送<code>原有的</code>HTTP 头部信息），可防止其在 {{HTMLElement('canvas')}} 中的使用。如果无效，默认当做 <code>anonymous</code> 关键字生效。更多信息，请查看 <a href="mailto:hamoda.alhayek@msn.com">CORS 属性设置</a> 。</dd>
+ <dt>{{htmlattrdef("decoding")}}</dt>
+ <dd>
+ <p>为浏览器提供图像解码方式上的提示。允许的值：</p>
+
+ <dl>
+  <dt><code>sync</code></dt>
+  <dd>同步解码图像，实现与其他内容的显示相互斥的原子显示。
+  <div class="standardNoteBlock">
+  <p><strong>译者注：</strong>这里的原文是：</p>
+
+  <p>Decode the image synchronously, for atomic presentation with other content.</p>
+
+  <p>此图像的解码将是一个原子操作，在完成解码显示之前，不被其他内容的显示而打断，因此其他内容的显示会被延迟。</p>
+  </div>
+  </dd>
+  <dt><code>async</code></dt>
+  <dd>异步解码图像，以减少其他内容的显示延迟。</dd>
+  <dt><code>auto</code></dt>
+  <dd>默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。</dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>图像的高度，在 {{HTMLVersionInline(5)}} 中的单位是 CSS 像素，在 {{HTMLVersionInline(4)}} 中既可以是像素，也可以是百分比。可以只指定 <code>width</code> 和 <code>height</code> 中的一个值，浏览器会根据原始图像进行缩放。</dd>
+ <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>指示下载资源时相对重要性，或者说优先级。允许的值：
+ <dl>
+  <dt><code>auto</code></dt>
+  <dd><strong>不指定优先级。</strong>浏览器可以使用自己的算法来为图像选择优先级。</dd>
+  <dt><code>high</code></dt>
+  <dd>此图像在下载时优先级<strong>较高</strong>。</dd>
+  <dt><code>low</code></dt>
+  <dd>此图像在下载时优先级<strong>较低</strong>。</dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt>
+ <dd>This attribute tells the browser to ignore the actual {{glossary("intrinsic size")}} of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd>
+ <dt>{{htmlattrdef("ismap")}}</dt>
+ <dd>这个布尔属性表示图像是否是<a href="https://en.wikipedia.org/wiki/Image_map#Server-side">服务器端 map</a> 的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。
+ <div class="note">
+ <p><strong>使用说明：</strong>只有在 <code>&lt;img&gt;</code> 元素是一个拥有有效 {{htmlattrxref("href","a")}} 属性的 {{htmlelement("a")}} 元素的后代元素的情况下，这个属性才会被允许使用。</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt>
+ <dd>指示浏览器应当如何加载该图像。允许的值：
+ <dl>
+  <dt><code>eager</code></dt>
+  <dd>立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。</dd>
+  <dt><code>lazy</code></dt>
+  <dd>延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。</dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>A string indicating which referrer to use when fetching the resource:
+ <ul>
+  <li><code>no-referrer</code>: The {{httpheader("Referer")}} header will not be sent.</li>
+  <li><code>no-referrer-when-downgrade</code>: No <code>Referer</code> header is sent when navigating to an origin without {{glossary("HTTPS")}}. This is the default if no policy is otherwise specified.</li>
+  <li><code>origin</code>: The <code>Referer</code> header will include the page's origin ({{glossary("scheme")}}, {{glossary("host")}}, and {{glossary("port")}}).</li>
+  <li><code>origin-when-cross-origin</code>: Navigating to other origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full path and query string.</li>
+  <li><code>unsafe-url</code>: The <code>Referer</code> header will always include the origin, path and query string, but not the fragment, password, or username. <strong>This is unsafe</strong> because it can leak information from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}</dt>
+ <dd>表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：
+ <ol>
+  <li>一个<a href="/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">媒体条件</a>。最后一项一定是被忽略的。</li>
+  <li>一个资源尺寸的值。</li>
+ </ol>
+
+ <p>Media Conditions describe properties of the <em>viewport</em>, not of the <em>image</em>. For example, <code>(max-height: 500px) 1000px</code> proposes to use a source of 1000px width, if the <em>viewport </em>is not higher than 500px.</p>
+
+ <p>资源尺寸的值被用来指定图像的预期尺寸。当 <code>srcset</code> 中的资源使用了宽度描述符 <code>w</code> 时，{{glossary("User agent", "用户代理")}}会使用当前图像大小来选择 <code>srcset</code> 中合适的一个图像 URL。被选中的尺寸影响图像的{{glossary("intrinsic size", "显示大小")}}（如果没有影响大小的 {{glossary("CSS")}} 样式被应用的话）。如果没有设置 <code>srcset</code> 属性，或者没有属性值，那么 <code>sizes</code> 属性也将不起作用。</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>图像的 {{glossary("URL")}}，这个属性对 <code>&lt;img&gt;</code> 元素来说是必需的。在支持 <code>srcset</code> 的浏览器中，<code>src</code> 被当做拥有一个像素密度的描述符 <code>1x</code> 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 <code>srcset</code> 或者 <code>srcset</code> 包含 <code>w</code> 描述符中定义了。</dd>
+ <dt>{{htmlattrdef("srcset")}}</dt>
+ <dd>以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：
+ <ol>
+  <li>指向图像的 {{glossary("URL")}}。</li>
+  <li>可选地，再加一个空格之后，附加以下的其一：
+   <ul>
+    <li>一个宽度描述符，这是一个正整数，后面紧跟 '<code>w</code>' 符号。该整数宽度除以sizes属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和x描述符等价的值。</li>
+    <li>一个像素密度描述符，这是一个正浮点数，后面紧跟 '<code>x</code>' 符号。</li>
+   </ul>
+  </li>
+ </ol>
+
+ <p>如果没有指定源描述符，那它会被指定为默认的 <code>1x</code>。</p>
+
+ <p>在相同的 <code>srcset</code> 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 <code>srcset</code> 两个源都是 <code>2x</code>）也是无效的。</p>
+
+ <p>The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or {{glossary("bandwidth")}} conditions. See our <a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial for an example.</p>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>图像的宽度，在 {{HTMLVersionInline(5)}} 中单位是 CSS 像素， 在 {{HTMLVersionInline(4)}} 中可以是像素也可以是百分比。</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>与元素相关联的 <a href="/zh-CN/docs/HTML/Element/map">image map</a> 的部分 URL（以 '#' 开始的部分）。
+ <div class="note">
+ <p><strong>使用说明： </strong>如果 <code>&lt;img&gt;</code> 元素是 {{htmlelement("a")}} 或 {{HTMLElement("button")}} 元素的后代元素则不能使用这个属性。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="已废弃的属性">已废弃的属性</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}} 使用 {{cssxref('vertical-align')}} CSS 属性</dt>
+ <dd>图像相对于它周围上下文的对齐。使用 {{cssxref('float')}} 和/或 {{cssxref('vertical-align')}} 这两个 {{glossary("CSS")}} 属性作为代替，而不是这个废弃的属性。允许的值：
+ <dl>
+  <dt><code>top</code></dt>
+  <dd>等价于 <code style="white-space: nowrap;">vertical-align: top</code> 或 <code style="white-space: nowrap;">vertical-align: text-top</code></dd>
+  <dt><code>middle</code></dt>
+  <dd>等价于 <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline</code></dd>
+  <dt><code>bottom</code></dt>
+  <dd>默认值，等价于 <code style="white-space: nowrap;">vertical-align: unset</code> 或 <code style="white-space: nowrap;">vertical-align: initial</code></dd>
+  <dt><code>left</code></dt>
+  <dd>等价于 <code style="white-space: nowrap;">float: left</code></dd>
+  <dt><code>right</code></dt>
+  <dd>等价于 <code style="white-space: nowrap;">float: right</code></dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt>
+ <dd>图像周围的边框宽度。使用 {{glossary("CSS")}} 属性 {{cssxref('border')}} 代替此废弃属性。</dd>
+ <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt>
+ <dd>插入到图像的左侧和右侧的空白像素的值。使用 CSS 属性 {{cssxref('margin')}} 代替此废弃属性。</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt>
+ <dd>一个指向更详细的图像描述的链接。可能的值是一个 {{glossary("URL")}} 或一个页面上其他元素的 {{htmlattrxref("id")}}。
+ <div class="note">
+ <p><strong>备注：</strong> 此属性的当前最新的 {{glossary("W3C")}} 版本，<a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a> 中被提到，但在 {{glossary("WHATWG")}} 组织的 <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a> 中依然处于被移除的状态。它的未来尚无定数；authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> or <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt>
+ <dd>元素的名字。使用 {{htmlattrxref("id")}} 属性代替此废弃属性。</dd>
+ <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt>
+ <dd>插入到图像的上方和下方的空白像素的数组。使用 CSS 属性 {{cssxref('margin')}} 代替此废弃属性。</dd>
+</dl>
+
+<h2 id="使用_CSS_为_&lt;img>_附加样式">使用 CSS 为 <code>&lt;img&gt;</code> 附加样式</h2>
+
+<p><code>&lt;img&gt;</code> 是一个<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>。它的 {{cssxref("display")}} 属性的默认值是 <code>inline</code>，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 <code>inline-block</code> 一样。你可以为 <code>&lt;img&gt;</code> 设置 {{cssxref("border")}}/{{cssxref("border-radius")}}、{{cssxref("padding")}}/{{cssxref("margin")}}、{{cssxref("width")}}、{{cssxref("height")}} 等等的 CSS 属性。</p>
+
+<p><code>&lt;img&gt;</code> 没有基线（baseline），这意味着，当在一个行内格式的上下文（an inline formatting context）中使用 {{cssxref("vertical-align")}}<code>: baseline</code> 时，图像的底部将会与容器的文字基线对齐。</p>
+
+<p>You can use the {{cssxref("object-position")}} property to position the image within the element's box, and the {{cssxref("object-fit")}} property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).</p>
+
+<p>根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的。比如说，{{glossary("SVG")}} 图像，如果它们的根 {{SVGElement("svg")}} 元素没有 <code>width</code> 或 <code>height</code> 属性，SVG 图像就可以没有原始分辨率。</p>
+
+<div class="standardNoteBlock">
+<p><strong>译者注：</strong>原始分辨率/原始宽高是图像的固有属性，基本上就是图像本身的分辨率/宽高。只与图像本身有关，与 <code>&lt;img&gt;</code> 元素的属性、显示分辨率等等无关。点阵图像通常有且只有一个随图片宽高变化的原始分辨率，而矢量图像可以没有。不过，编辑矢量图像时，通常可以手动/编辑器自动为其设置原始分辨率。</p>
+</div>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="备用文字">备用文字</h3>
+
+<p>下面的示例将图像嵌入到页面中，且包含用于改善可访问性的备用文本。</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+     alt="MDN logo"&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Alternative_text', '100%', '160') }}</p>
+
+<h3 id="图像链接">图像链接</h3>
+
+<p>此示例建立在前一个示例的基础上，展示了如何将图像转换为链接。为做到这一点，将 <code>&lt;img&gt;</code> 标签嵌套在 {{HTMLElement("a")}} 之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://developer.mozilla.org"&gt;
+  &lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+       alt="Visit the MDN site"&gt;
+&lt;/a&gt;</pre>
+
+<p>{{ EmbedLiveSample('Image_link', '100%', '160') }}</p>
+
+<h3 id="使用_srcset_属性">使用 <code>srcset</code> 属性</h3>
+
+<p>在这个例子中，我们包含了一个 <code>srcset</code> 属性，它引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代 <code>src</code> 属性中的图像。在支持 <code>srcset</code> 的{{glossary("User agent", "用户代理")}}中，<code>src</code> 属性中的图片被作为 <code>1x</code> 候选项。</p>
+
+<pre class="brush: html notranslate"> &lt;img src="https://developer.mozilla.org/static/img/favicon72.png"
+      alt="MDN logo"
+      srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"&gt;</pre>
+
+<p>{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}</p>
+
+<h3 id="使用_srcset_和_sizes_属性">使用 <code>srcset</code> 和 <code>sizes</code> 属性</h3>
+
+<p>在支持 <code>srcset</code> 的用户代理中，当使用 <code>w</code> 描述符时，src 属性会被忽略。当匹配了媒体条件 <code>(min-width: 600px)</code> 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。</p>
+
+<pre class="brush: html notranslate"> &lt;img src="/files/16864/clock-demo-200px.png"
+      alt="Clock"
+      srcset="/files/16864/clock-demo-200px.png 200w,
+          /files/16797/clock-demo-400px.png 400w"
+      sizes="(max-width: 600px) 200px, 50vw"&gt;</pre>
+
+<p>{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}</p>
+
+<div class="blockIndicator note">
+<p>若要看到大小调整的效果，请<a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">打开单独的页面查看示例</a>，以便拖动窗口，调整内容区域的大小。</p>
+</div>
+
+<h2 id="安全与隐私方面的考量">安全与隐私方面的考量</h2>
+
+<p>虽然 <code>&lt;img&gt;</code> 元素的用途是很单纯（原文：innocent）的，但是它们可对用户安全和隐私造成不良的后果。See <a href="/zh-CN/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> for more information and mitigations.</p>
+
+<h2 id="可访问性考量">可访问性考量</h2>
+
+<h3 id="使用有实际意义的备用描述">使用有实际意义的备用描述</h3>
+
+<p><code>alt</code> 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述， <code>alt</code> 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。</p>
+
+<h4 id="不要">不要</h4>
+
+<pre class="brush: html example-bad notranslate">&lt;img alt="图片" src="penguin.jpg"&gt;
+</pre>
+
+<h4 id="而是">而是</h4>
+
+<pre class="brush: html example-good notranslate">&lt;img alt="一只站在沙滩上的跳岩企鹅。" src="penguin.jpg"&gt;
+</pre>
+
+<p>当图像上没有 <code>alt</code> 属性时，一些屏幕阅读器可能会读出图像的文件名。如果文件名不能代表图像的内容，甚至是一团乱码，这可只能造成令人迷惑的体验。</p>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li>
+ <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li>
+ <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li>
+ <li><a href="/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="title_属性"><code>title</code> 属性</h3>
+
+<p>{{htmlattrxref("title")}} 属性不是 <code>alt</code> 属性可接受的替代品。并且，避免将 <code>alt</code> 属性的值直接复制到同一幅图片的<code>title</code> 属性上。这样可能会让一些屏幕阅读器把同一段描述读两遍，造成一定程度上的困扰。</p>
+
+<p><code>title</code> 属性也不该被用作一幅图片在 <code>alt</code> 之外的补充说明信息。如果一幅图片需要小标题，使用 <code><a href="/zh-CN/docs/Web/HTML/Element/figure">figure</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/figcaption">figcaption</a></code> 元素。</p>
+
+<p><code>title</code> 元素的值一般作为提示条(tooltip)呈现给用户，在光标于图片上停下后显示出来。尽管这<em>确实</em>能给用户提供更多的信息，您不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，选择上面提供的一种方法将其内联显示，而不是使用 <code>title</code> 。</p>
+
+<ul>
+ <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
+</ul>
+
+<h2 id="技术信息">技术信息</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">内容类别</a></th>
+   <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content">流式内容</a>、<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>、<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Embedded_content">嵌入内容</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>. If the element has a <code>usemap</code> attribute, it also is a part of the interactive content category.</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的内容</th>
+   <td>无，它是一个 {{Glossary("empty element", "空元素")}}。</td>
+  </tr>
+  <tr>
+   <th scope="row">标签省略</th>
+   <td>必须有开始标签，不可有结束标签。</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的父元素</th>
+   <td>接受嵌入内容的任意元素。</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的 ARIA 角色</th>
+   <td>任意</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 接口</th>
+   <td>{{domxref("HTMLImageElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">说明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("html.elements.img")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li>
+ <li><a href="/zh-CN/docs/Web/Media/Formats/Image_types">图像文件类型与格式指南</a></li>
+ <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li>
+ <li>{{HTMLElement("picture")}}、{{HTMLElement("object")}} 和 {{HTMLElement("embed")}} 元素</li>
+ <li>其他与图像相关的 CSS 属性：{{cssxref("object-fit")}}、{{cssxref("object-position")}}、{{cssxref("image-orientation")}}、{{cssxref("image-rendering")}}，和 {{cssxref("image-resolution")}}。</li>
+</ul>