HTML元素将一份图像嵌入文档。
上面的例子展示了元素的用法:
src属性是必须的,它包含了你想嵌入的图片的文件路径。alt属性包含一条对图像的文本描述,这不是强制性的,但对可访问性而言,它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。如果由于某种原因无法加载图像,普通浏览器也会在页面上显示alt属性中的备用文本:例如,网络错误、内容被屏蔽或链接过期时。
还有很多其他属性,可以实现各种不同的目的:
使用width、height和intrinsicsize设置原始分辨率(en-US):这将设置图像应占用的空间,以确保图像被加载之前页面的布局是稳定的。
HTML 标准并没有给出需要支持的图像格式的列表,因此每个用户代理支持一组不同的格式。MDN 另有一份完整的网页浏览器图像格式指南可供参考。

缩写文件格式MIME 类型文件拓展名浏览器兼容性
APNGAnimated Portable Network Graphics
动态便携式网络图像image/apng.apngChrome, Edge, Firefox, Opera, Safari
AVIFAV1 Image File Format
AV1 图像文件格式image/avif.avifChrome, Opera, Firefox (feature flag)
位图文件image/bmp.bmpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIFGraphics Interchange Format
图像互换格式image/gif.gifChrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICOMicrosoft Icon
微软图标image/x-icon.ico,.curChrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEGJoint Photographic Expert Group image
联合影像专家小组图像image/jpeg.jpg,.jpeg,.jfif,.pjpeg,.pjpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNGPortable Network Graphics
便携式网络图像image/png.pngChrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVGScalable Vector Graphics
可缩放矢量图形image/svg+xml.svgChrome, Edge, Firefox, Internet Explorer, Opera, Safari
TIFFTagged Image File Format
标签图像文件格式image/tiff.tif,.tiffSafari
万维网图像格式image/webp.webpChrome, Edge, Firefox, Opera, Safari

每一种格式缩写都有一个详细说明,其功能以及详细的浏览器兼容信息, 包括哪个版本引入支持以及以后可能会引入的特殊功能。
如果在加载或渲染图像时发生错误,且设置了至少一个onerror事件处理器来处理error (en-US)事件,那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下,包括:
src属性的属性值为空("")或者null。src属性的URL 和用户正在浏览的页面的 URL 完全相同。图像出于某些原因损坏了,从而无法加载。图像的元数据被破坏了,无法检索它的分辨率/宽高,而且在元素的属性中没有指定宽度和/或高度。用户代理尚未支持该图片所用的格式。
定义了图像的备用文本描述。
注意:浏览器并非总是会显示图像。比如:
非可视化浏览器(Non-visual browsers)(比如有视力障碍的人使用的音频浏览器)用户选择不显示图像(比如为了节省带宽,或出于隐私等考虑不加载包括图片在内的第三方资源文件)图像文件无效,或是使用了不支持的格式
在这些情况下,浏览器很可能会将图像替换为图像所属元素的alt属性所提供的文本。基于上面罗列的原因,以及更多尚未列出的原因,建议尽可能地通过alt属性提供一些有用的信息。
如果省略alt属性,则表明该图像是内容的关键部分,但没有等效的文本可用。
如果把这个属性设置为空字符串(alt=""),则表明该图像不是内容的关键部分(这是一种装饰或者一个追踪像素点),非可视化浏览器在渲染(en-US)的时候可能会忽略它。而且,如果图片加载失败,可视化浏览器会隐藏表示图片损坏的图标。
将图像复制并粘贴为文本,或是将图像的链接保存为浏览器书签时,也会用到此属性。
这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像 可以在元素中重复使用,而不会被污染(tainted)。允许的值有:
anonymous
执行一个跨域请求(比如,有OriginHTTP header)。但是没有发送证书(比如,没有 cookie,没有X.509 证书,没有HTTP 基本授权认证)。如果服务器没有把证书给到源站(没有设置Access-Control-Allow-OriginHTTP 头),图像会被污染,而且它的使用会被限制。
use-credentials
一个有证书的跨域请求(比如,有OriginHTTP header)被发送 (比如,cookie, 一份证书,或者 HTTP 基本验证信息)。如果服务器没有给源站发送证书(通过Access-Control-Allow-CredentialsHTTP header),图像将会被污染,且它的使用会受限制。
当用户并未显式使用本属性时,默认不使用 CORS 发起请求(例如,不会向服务器发送原有的HTTP 头部信息),可防止其在中的使用。如果无效,默认当做anonymous关键字生效。更多信息,请查看CORS 属性设置 。
为浏览器提供图像解码方式上的提示。允许的值:
sync
同步解码图像,实现与其他内容的显示相互斥的原子显示。
译者注:这里的原文是:
Decode the image synchronously, for atomic presentation with other content.
此图像的解码将是一个原子操作,在完成解码显示之前,不被其他内容的显示而打断,因此其他内容的显示会被延迟。
async
异步解码图像,以减少其他内容的显示延迟。
auto
默认值:不指定解码方式,由浏览器决定哪一种对用户来说是最合适的。
图像的高度,在HTML5 中的单位是 CSS 像素,在HTML 4 中既可以是像素,也可以是百分比。可以只指定width和height中的一个值,浏览器会根据原始图像进行缩放。
指示下载资源时相对重要性,或者说优先级。允许的值:
auto
不指定优先级。浏览器可以使用自己的算法来为图像选择优先级。
high
此图像在下载时优先级较高。
low
此图像在下载时优先级较低。
This attribute tells the browser to ignore the actualintrinsic size(en-US) of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions andnaturalWidth/naturalHeighton images would return the values specified in this attribute.Explainer,examples
这个布尔属性表示图像是否是服务器端 map 的一部分。如果是,那么点击图片的精准坐标将会被发送到服务器。
使用说明:只有在元素是一个拥有有效href属性的元素的后代元素的情况下,这个属性才会被允许使用。
指示浏览器应当如何加载该图像。允许的值:
eager
立即加载图像,不管它是否在可视视口(visible viewport)之外(默认值)。
lazy
延迟加载图像,直到它和视口接近到一个计算得到的距离,由浏览器定义。
A string indicating which referrer to use when fetching the resource:no-referrer: TheRefererheader will not be sent.no-referrer-when-downgrade: NoRefererheader is sent when navigating to an origin withoutHTTPS. This is the default if no policy is otherwise specified.origin: TheRefererheader will include the page's origin (scheme,host, andport(en-US)).origin-when-cross-origin: 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.unsafe-url: TheRefererheader will always include the origin, path and query string, but not the fragment, password, or username.This is unsafebecause it can leak information from TLS-protected resources to insecure origins.
表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括:一个媒体条件。最后一项一定是被忽略的。一个资源尺寸的值。
Media Conditions describe properties of theviewport, not of theimage. For example,(max-height: 500px) 1000pxproposes to use a source of 1000px width, if theviewportis not higher than 500px.
资源尺寸的值被用来指定图像的预期尺寸。当srcset中的资源使用了宽度描述符w时,用户代理会使用当前图像大小来选择srcset中合适的一个图像 URL。被选中的尺寸影响图像的显示大小(en-US)(如果没有影响大小的CSS 样式被应用的话)。如果没有设置srcset属性,或者没有属性值,那么sizes属性也将不起作用。
图像的URL,这个属性对元素来说是必需的。在支持srcset的浏览器中,src被当做拥有一个像素密度的描述符1x的候选图像处理,除非一个图像拥有这个像素密度描述符已经被在srcset或者srcset包含w描述符中定义了。
以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成:指向图像的URL。可选地,再加一个空格之后,附加以下的其一:一个宽度描述符,这是一个正整数,后面紧跟 'w' 符号。该整数宽度除以sizes属性给出的资源(source)大小来计算得到有效的像素密度,即换算成和x描述符等价的值。一个像素密度描述符,这是一个正浮点数,后面紧跟 'x' 符号。
如果没有指定源描述符,那它会被指定为默认的1x。
在相同的srcset属性中混合使用宽度描述符和像素密度描述符时,会导致该值无效。重复的描述符(比如,两个源在相同的srcset两个源都是2x)也是无效的。