在此页

• Supported image formats
• Image loading errors
• 属性
• Styling with CSS
• 范例
• Security and privacy concerns
• 可访问性关注
• Technical summary
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

HTML <img> element 将图像嵌入文档。

The above example shows usage of the <img> 元素：

• src 属性为 required , and contains the path to the image you want to embed.
• alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

There are many other attributes to achieve various purposes:

• Referrer / CORS control for security and privacy: see crossorigin and referrerpolicy .
• Use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.
• Responsive image hints with sizes and srcset (see also the <picture> element and our Responsive images tutorial).

Supported image formats

The HTML standard doesn't list what image formats to support, so each 用户代理 supports different formats. Below is a list of the image formats that are most commonly used on the web.

The image file formats that are most commonly used on the web are listed below.

注意： The older formats like PNG, JPEG, GIF have poor performance compared to newer formats like WebP and AVIF, but enjoy broader "historical" browser support. The newer image formats are seeing increasing popularity as browers without support become increasingly irrelevant (i.e. have virually zero market share).

The following list includes image formats that appear on the web, but which should be avoided for web content (generally this is because either they do not have wide browser support, or because there are better alternatives).

注意： The abbreviation for each image format links to a longer description of the format, its capabilities, and detailed browser compatibility information (including which versions introduced support and specific special features that may have been introduced later).

注意： 见 Image file type and format guide for more comprehensive information about image formats supported by web browsers. This includes image formats that are supported but not recommended for web content (e.g. ICO, BMP, etc.)

Image loading errors

If an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will get called. This can happen in a number of situations, including:

• src attribute is empty ( "" ) 或 null .
• src URL is the same as the URL of the page the user is currently on.
• The image is corrupted in some way that prevents it from being loaded.
• The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes.
• The image is in a format not supported by the 用户代理 .

属性

此元素包括 全局属性 .

alt

Defines an alternative text description of the image.

注意： Browsers do not always display images. There are a number of situations in which a browser might not display images, such as:

• Non-visual browsers (such as those used by people with visual impairments)
• The user chooses not to display images (saving bandwidth, privacy reasons)
• The image is invalid or an unsupported type

In these cases, the browser may replace the image with the text in the element's alt attribute. For these reasons and others, provide a useful value for alt 每当可能时。

Omitting alt altogether indicates that the image is a key part of the content and no textual equivalent is available. Setting this attribute to an empty string ( ) indicates that this image is not a key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it from rendering . Visual browsers will also hide the broken image icon if the alt is empty and the image failed to display.

This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.

crossorigin

Indicates if the fetching of the image must be done using a CORS request. Image data from a CORS-enabled image returned from a CORS request can be reused in the <canvas> element without being marked " tainted ".

若 crossorigin 属性为 not specified, then a non-CORS request is sent (without the Origin request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> 元素。

若 crossorigin 属性 is specified, then a CORS request is sent (with the Origin request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any Access-Control-Allow-Origin response header, or by not including the site's origin in any Access-Control-Allow-Origin response header it does send), then the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> 元素。

Allowed values:

anonymous

A CORS request is sent with credentials omitted (that is, no Cookie , X.509 certificates ，或 Authorization request header).

use-credentials

The CORS request is sent with any credentials included (that is, cookies, X.509 certificates, and the Authorization request header). If the server does not opt into sharing credentials with the origin site (by sending back the Access-Control-Allow-Credentials: true response header), then the browser marks the image as tainted and restricts access to its image data.

If the attribute has an invalid value, browsers handle it as if the anonymous value was used. See CORS 设置属性 for additional information.

decoding

Provides an image decoding hint to the browser. Allowed values:

sync

Decode the image synchronously, for atomic presentation with other content.

async

Decode the image asynchronously, to reduce delay in presenting other content.

auto

Default: no preference for the decoding mode. The browser decides what is best for the user.

The intrinsic height of the image, in pixels. Must be an integer without a unit.

The intrinsic width of the image in pixels. Must be an integer without a unit.

<img src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="MDN logo">
								

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Visit the MDN site">
</a>
								

 <img src="https://developer.mozilla.org/static/img/favicon72.png"
      alt="MDN logo"
      srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">
								

 <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">
								

<img alt="image" src="penguin.jpg">
								

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg">
								

相关话题

1. <img>
2. HTML 元素

   1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
   2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
   3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
   4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
   5. E
      1. <em>
      2. <embed>
   6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
   7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
   8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
   9. J K
      1. <kbd>
      2. <keygen>
   10. L
       1. <label>
       2. <legend>
       3. <li>
       4. <link>
       5. <listing>
   11. M
       1. <main>
       2. <map>
       3. <mark>
       4. <marquee>
       5. <menu>
       6. <menuitem>
       7. <meta>
       8. <meter>
   12. N
       1. <nav>
       2. <nobr>
       3. <noframes>
       4. <noscript>
   13. O
       1. <object>
       2. <ol>
       3. <optgroup>
       4. <option>
       5. <output>
   14. P
       1. <p>
       2. <param>
       3. <picture>
       4. <plaintext>
       5. <pre>
       6. <progress>
   15. Q
       1. <q>
   16. R
       1. <rp>
       2. <rt>
       3. <rtc>
       4. <ruby>
   17. S
       1. <s>
       2. <samp>
       3. <script>
       4. <section>
       5. <select>
       6. <shadow>
       7. <slot>
       8. <small>
       9. <source>
       10. <spacer>
       11. <span>
       12. <strike>
       13. <strong>
       14. <style>
       15. <sub>
       16. <summary>
       17. <sup>
   18. T
       1. <table>
       2. <tbody>
       3. <td>
       4. <template>
       5. <textarea>
       6. <tfoot>
       7. <th>
       8. <thead>
       9. <time>
       10. <title>
       11. <tr>
       12. <track>
       13. <tt>
   19. U
       1. <u>
       2. <ul>
   20. V
       1. <var>
       2. <video>
   21. W
       1. <wbr>
   22. X Y Z
       1. <xmp>